Hi Everyone,
I’m trying to figure out a good way to apply a different link class in my menu for the current/active page as a way of making it easier on page viewers of knowing where they are. I’ve stumbled on several similar requests and people are often suggesting Wayfinder, but this seems to be overly complicated for the menu I’m trying to implement. Additionally, the class attributes in Wayfinder apply to the "li" tag and not the "a" tag, which is where I desire to make the class changes. My menu is an extremely simple, top-level (no submenus), horizontal list of 6 links. It’s also quite static, which is another reason I believe Wayfinder might be overkill.
I’m applying a class called "hover1" to all links and wish to apply a different class, "hover2" to the active page.
Here’s what the HTML looks like:
<div id="navigations">
<ul id="nav">
<li><a class="hover1" href="#">Home</a></li>
<li><a class="hover1" href="#">Cartoons</a></li>
<li><a class="hover1" href="#">Videos</a></li>
<li><a class="hover1" href="#">Rants</a></li>
<li><a class="hover1" href="#">Archives</a></li>
<li><a class="hover1" href="#">About</a></li>
</ul>
</div>
Here’s the CSS for "hover1" and "hover2":
a.hover1:link, a.hover1:visited, a.hover1:active {color:black; text-decoration:none; }
a.hover1:hover {color:red; text-decoration:underline; }
a.hover2:link, a.hover2:visited, a.hover2:active {color:red; text-decoration:none; }
a.hover2:hover {color:red; text-decoration:underline; }
And the CSS for the "nav" ul:
#nav {margin:0; padding:0;}
#nav li {list-style: none; display: inline; padding: 40px;}
I’ve accomplished this the live, pre-CMS, version of my site using a rather messy PHP hack, but I’d like to avoid having to put anything other than "content" in these particular resources. Any guidance would be greatly appreciated.
Thanks!
Swill
