CSS menu selected item colour

For help and advice about coding

Moderator: Tech Moderators

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

CSS menu selected item colour

Postby DJ » Thu Aug 06, 2009 9:09 pm

Howdy!

I have a horizontal menu, thus:

Code: Select all

<div id="menu">
   <ul>
      <li><a href="1.html" accesskey="1" title="">1</a></li>
      <li><a href="2.html" accesskey="2" title="">2</a></li>
      <li><a href="3.html" accesskey="3" title="">3</a></li>
   </ul>
</div>


which has rollover colours set in the css, like so (let me know if I can streamline this, my css is still pretty basic and I muddle through):

Code: Select all

#menu {
   background-color:#000000;
   width: 896px;
   height: 28px;
   margin: 0px auto;
   font-size:10px;
}

#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   display: block;
   float: left;
   width: 112px;
   padding: 7px 0px;
   text-align: center;
   text-decoration: none;
   text-transform:capitalize;
   font-weight: bold;
   background: #cfa64d;
        color:#000;
}

#menu a:hover {
   background: #f3de99;
   color:#000000;
}


What I'd like is for the rollover colour to remain on the page that the user is on. Can I do that with css with a simple line of code?
There must be a simple way of doing it.
Can anyone help please?

User avatar
Blak
Tech Moderator
Posts: 1759
Joined: Mon Mar 19, 2007 12:07 pm
Tag: Hasn't realised that there are custom ranks yet
Contact:

Re: CSS menu selected item colour

Postby Blak » Thu Aug 06, 2009 10:26 pm

Only way to do it is to add an additional class to the current menu link:

Code: Select all

<li class="menucurrent"><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>


Code: Select all

#menu .menucurrent a { background: #f3de99; }

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

Re: CSS menu selected item colour

Postby DJ » Fri Aug 07, 2009 12:12 am

Jesus that was piss easy.
Thanks Blak, sorted!


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 2 guests

cron