Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

just found this marvelous website, so, I'm new in Wordpress. I have a HTML/CSS website developed from a PSD file. Everything was going OK, Header, Footer, but when I came across the WP menu, I'm just stocked. Here's a code menu example:

<div id="mainheader">
    <div id="menuprincipal">
    <img src="imagens/menu_alienhead.png" width="33" height="53" alt="Alien Head" style="margin-left: 15px; float:left" />
    <ul>
          <li><a href='#' class="menunews" title='News'> </a></li>
          <li><a href='#' id='menubiografia' title='Biografia'> </a></li>
etc etc
</ul>
</div><!--Fim do menuprincipal-->


</div><!--Fim do mainheader-->

And the CSS for one example:

 a#menunews, a#menunews:link, a#menunews:visited, a#menunews:active {
background: transparent url(imagens/menu/menu_news.png) no-repeat left top;
display: block;
height: 55px;
width: 56px;
 }
 a#menunews:hover {background-position: left bottom;}

Then I found that WP menus accepts classes, and I turn some of these itens into:

.menunews {
background: url(images/menu/menu_news.png) no-repeat left top;
height: 55px;
width: 56px;
display:block;
}

and

    #navmenu li:hover {
background-position: left bottom;
}

My question is, can I build the menu using the first structure, with the ID's? I have no idea where the wp_menu list outputs are...

And using the classes, inside the menu admin panel, it works, but the Page Title stays above the image and the link works only on it, not in the image itself, like a block, like the original CSS.

For visual purposes, the menu should look like this website: http://www.realmofobscura.com/ it is by the way made with WP.

tutorials, links, anything, will be highly appreciated =)

share|improve this question
    
Hey, Rafael here =) I've just find a way, but, it doesn't that it is the correct one. Using the wp_menu, I reworked the CSS using nth selectors, and the "only links the text link" problem, I used a 9999 text indent, plus a display:block (block-inline seems to work) But the topic is open to another solutions, better ones! Tkz! –  Rafael Mar 15 '12 at 23:25

1 Answer 1

Menus are very flexible, but are also quite complicated inside.

Start with wp_nav_menu() documentation for basic customization of container elements and such. You might need to tear it down to basic list items to integrate into more complex markup.

You can also use custom Walker, but I won't recommend any novice to go there (heh, most professionals seems to be scared of Walkers).

PS note that while asking about menu mechanics is on-topic, purely CSS questions ("how to get it look like this") are considered not specific to WordPress and better asked elsewhere.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.