Forum Moderators: not2easy
I have read through the forum this morning and there is an over abundance of information that isn't consistent and to be quite honest, it is confusing me.
<snip> is an example site which will have the active page tabs highlighted. How can I achieve this using CSS?
Thanks for any help that can be provided.
[edited by: swa66 at 7:46 pm (utc) on Feb. 22, 2009]
[edit reason] no urls [/edit]
e.g.
a:link {color:#00f;}
a:visited {color:#ccc;}
a:hover {color:#f00; background:#ff0;}
a:active {color:#0f0;}
If you used the pseudo-active class, wouldn't you have to assign it to the individual navigation tags per each page? More importantly, how would you do this?
Depending on your markup there are a couple of ways to do it. One is to set a class on the <body> and an id on each <li> in the menu. For instance, for a page under the "Support" tab, we might have
<body class="support">
<ul id="nav-menu">
<li id="nav-products"><a href="/products">Products</a></li>
<li id="nav-support><a href="/support">Support</a></li>
<li id="nav-contact"><a href="/contact">Contact Us</a></li>
</ul>
In the stylesheet then, highlight where the tab matches the body:
#nav-menu :link, #nav-menu:visited {background:#f00; color:#fff}
#nav-menu :hover, #nav-menu:active {background:#f90;}
.products #nav-products, .support #nav-support, .contact #nav-contact {background:#050;}
I prefer this method as it makes it easy to set styles not just for the menu, but for the whole page depending on the <body> class.
Some CMS menu systems generate a class on the menu item itself.
<body>
<ul id="nav-menu">
<li><a href="/products">Products</a></li>
<li class="active"><a href="/support">Support</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
In this case, the CSS is simpler:
#nav-menu .active :link, #nav-menu .active :visited {background:#050}
If my navigation buttons are images, how do you get those to appear when that page is active? The above CSS changes the background color.
