Custom menu… how to do this in header.php file?

ok now i know how its works… its good… thank you for this part… but its not working with some css which i would like to ‘learn’…

for learning i’ve copy a style and image from this blog:
http://www.sohtanaka.com (top navigation)

i’d like to do something else (this is only example, inspiration) in my theme which i am building… but i would like to use mechanism rollover and stripes…

i don’t know what i do wrong…

now i have this:

HEADER.php:

<div id= "menu" class="container">
    <header>
        <nav class="topnav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/"><span>Home</span></a></li>
                <li class="about"><a href="<?php bloginfo('home') ?>/omnie"><span>About</span></a></li>
                <li class="blog"><a href="<?php bloginfo('home') ?>/www"><span>Blog</span></a></li>
		<li class="contact"><a href="<?php bloginfo('home') ?>/kontakt"><span>Contact</span></a></li>
            </ul>
        </nav>
    </header>
	</div>

STYLE.css:

header {float:left; height:102px; width:65%;  float:left;} 

header nav {height:98px; position:absolute; right:0; top:0; } 

header nav ul {margin:40px 50px 0 0; padding:0; } 

header nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

header nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

header nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#home header nav li.home a {background-position:left -86px; }
#home header nav {background-position:right -1px; } 

header nav li.home a {width:49px; }
header nav li.home span {background-position:left -43px; } 

#blog header nav {background-position:right -141px; }
#blog header nav li.blog a {background-position:-64px -86px; } 

header nav li.blog a {background-position:-64px top; width:47px; }
header nav li.blog span {background-position:-64px -43px; } 

#about header nav {background-position:right -421px; }
#about header nav li.about a {background-position:-224px -86px; } 

header nav li.about a {background-position:-224px top; width:55px; }
header nav li.about span {background-position:-224px -43px; } 

#contact header nav {background-position:right -561px; }
#contact header nav li.contact a {background-position:-293px -86px; } 

header nav li.contact a {background-position:-293px top; width:78px; }
header nav li.contact span {background-position:-293px -43px; }

The image is here: http://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/navigation_bg.png

its not rollover when i place mouse on it, and its not showing currnet page… ;(

ok… there are some changes but i’ve done to to work this menu (rollover and links). Thank You for Your fast help 🙂 i’m realy grateful

the final working code is:
Header:

<div id= "menu" class="container">
        <div class="nav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/">Home</a></li>
                <li class="about"><a href="<?php bloginfo('home') ?>/omnie">About</a></li>
                <li class="blog"><a href="<?php bloginfo('home') ?>/www">Blog</a></li>
	        <li class="contact"><a href="<?php bloginfo('home') ?>/kontakt">Contact</a></li>
            </ul>
        </div>
	</div>

CSS:

#menu {height:102px; width:65%;  float:right} 

#menu .nav {height:98px; position:absolute; right:0; top:0; } 

#menu .nav ul {margin:40px 50px 0 0; padding:0; } 

#menu .nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

#menu .nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

#menu .nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#menu .nav li.home a:hover {background-position:left -86px; }
#menu .nav {background-position:right -1px; } 

#menu .nav li.home a {width:49px; }
#menu .nav li.home span {background-position:left -43px; }

#menu .nav {background-position:right -141px; }
#menu .nav li.blog a:hover {background-position:-64px -86px; } 

#menu .nav li.blog a {background-position:-64px top; width:47px; }
#menu .nav li.blog span {background-position:-64px -43px; } 

#menu .nav {background-position:right -421px; }
#menu .nav li.about a:hover {background-position:-224px -86px; } 

#menu .nav li.about a {background-position:-224px top; width:55px; }
#menu .nav li.about span {background-position:-224px -43px; } 

#menu .nav {background-position:right -561px; }
#menu .nav li.contact a:hover {background-position:-293px -86px; } 

#menu .nav li.contact a {background-position:-293px top; width:78px; }
#menu .nav li.contact span {background-position:-293px -43px; }

ps. what i must to add in header or mayby only in css to show the current page?

the class “.current_page_item” will be work here or it mus be some more in header.php ?

hmm.. i think its to much css for me and something is not good 😉 or i dont see my mistake…

for example:
<li class="home <?php if(is_home()): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/">Home</a></li>
css ?

#menu .nav {background-position:right -1px; }
#menu .nav li.home a {width:49px; }
#menu .nav li.home a:hover {background-position:0 -43px;}
#menu .nav li.home span {background-position:0 -86px; }
<strong>#menu .nav li.home .current_page_item {background-position:0 -86px; }</strong>

??

if its good its not working.. its not showing me that this is current page :/

ok, I understand… but it doesnt work… i try this earlier…

after that, there is no appeal to the current tab, for example: “about” or “home”…

maybe better solution would be to do like this?
if this is the current tab: “.curent_tab_home” If not this: “.home” and as for the rest in header.php…

what do you think?

the same…

at this image witch i use are 4 buttons… so for each “current tab” must be diferent “x” & “y” position… thats why i try to do this for each current tab with class for example: .home or .about

you know what i mean?

i would like to give you but i try to do my own wordpress theme on local server (app: Webserv)… its not on internet right now

maybe i will copy everything once more to show what we’v got because the line which you wrote still dont work 🙁

unless you have other suggestions?

HEADER (there are two lines with “home” but they dont work as we want):

<div id= "menu" class="container">
        <div class="nav">
            <ul>
	       <li class="<?php if(is_home()): ?>current_page_item<?php else: echo 'home '; endif;?>"><a href="<?php bloginfo('home') ?>/">Home 1</a></li>
                <li class="home <?php if(is_home()): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/">Home 2</a></li>
                <li class="about <?php if(is_page('about')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/omnie">About</a></li>
                <li class="blog <?php if(is_category('www')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/www">Blog</a></li>
	       <li class="contact <?php if(is_page('kontakt')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/kontakt">Contact</a></li>
            </ul>
        </div>
	</div>

CSS:

#menu {height:102px; width:65%;  float:right} 

#menu .nav {height:98px; right:0; top:0; } 

#menu .nav ul {margin:40px 50px 0 0; padding:0; } 

#menu .nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

#menu .nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

#menu .nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#menu .nav {background-position:right -1px; }
#menu .nav li.home a {width:49px; }
#menu .nav li.home a:hover {background-position:0 -43px;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#menu .nav li.home span {background-position:0 -86px; }

#menu .nav li.current_page_item {background-position:0 -86px; }

and link to image is on my second post from top…

still not 🙁

i probably give up this idea (current page only) because it doesnt work and i dont know why…

what you think?