burakbbbHi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad.
My menu image consists of 4 sections and 3 layers which looks like this:
http://img26.imageshack.us/img26/1268/menux.gif
1.home 2.archives 3.news 4.about - (layer 1 unvistided link)
1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over)
1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer.
I created the pages via admin panel but give the links in the header.php manually myself without using codes.
home=index.php
archives=http://mysite.com/?page_id=2
news=http://mysite.com/?page_id=35
about=http://mysite.com/?page_id=31
You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to geti it worked so please please change my wrong codes.
PHP code:
<ul id="nav">
<li id="home"><a href="http://localhost/wordpress/">home</a></li>
<li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li>
<li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li>
<li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li>
</ul>CSS Code:
#nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }The main problem i can understand from the earlier discussion with stvwlf (thank you) on here http://wordpress.org/support/topic/269986?replies=15 is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code accordingly. Can someone please help?
