I need some help building my navigation for my website. I have it 90% complete but there is one part of the functionality that is not working. I am not completely sure that this is a css fix or javascript or what. What I am looking to do is have my hover/active state stay after clicking on the link (to indicate which page you are one). Right now, as soon as the next page loads the hover/activate state turns off until I hover over the link again. I don't know if it matters but I have my navigation/menu in a library(.lbi) file. The CSS and HTML code I am using is below CSS *{ list-style:none; margin:0px; padding:0px; } #menu4 { width: 108px; position:absolute; top:232px; left:220px; z-index:10; } #menu4 li a { background:url(images/normal.jpg); text-decoration: none; z-index:10; } #menu4 li a:link, #menu4 li a:visited { background:url(images/normal.jpg); color: #999999; display: block; z-index:10; } #menu4 li a:hover { color: #999999; background: url(images/over.jpg) ; z-index:10; } #menu4 li a:active { color: #999999; background: url(images/over.jpg) ; z-index:10; } Code (markup): HTML <div id="menu4"> <ul> <li><a href="../index.html" title="Home" class="style4" >Home</a></li> <li><a href="../about.html" title="About" class="style4" >About</a></li> <li><a href="../experience.html" title="Experience" class="style4" >Experience</a></li> <li><a href="../portfolio.html" title="Portfolio" class="style4">Portfolio</a></li> <li><a href="../contact.html" title="Contact" class="style4">Contact</a></li> </ul> </div> Code (markup): Thanks for your help in advance
The active state resets. What I like to do is give a class to my body tag and style the menu items accordingly. <body class="contactpage"> Code (markup): <li class="contact"><a href="#">Contact me</a></li> Code (markup): body.contactpage li.contact { } Code (markup): You then simply need to style the li.contact style which will only be applied when the body tag carries the contactpage class. [EDIT] I think I'll write a tutorial on this. It's been brought up a few times before.
Hmmm, good idea, I like having a page to link to when someone asks for similar stuff... this one, I've always just had to explain.
Thank you for your reply. Unfortunately I think I am making this more difficult than it really is. I understand what you did with the body class and also li class. I thought I understood what to do with body.contactpage li.contact { } but for some reason it's not working. Is there any way to explain it to someone who is a CSS newbie like me. Sorry for the confusion/frustration.
Not sure how else it could be better explained, but just to help you out further I'm posting how the code should look like: Here's the first approach: <div id="menu4"> <ul> <li class="home"><a href="../index.html" title="Home" class="style4" >Home</a></li> <li class="about"><a href="../about.html" title="About" class="style4" >About</a></li> <li class="experience"><a href="../experience.html" title="Experience" class="style4" >Experience</a></li> <li class="portfolio"><a href="../portfolio.html" title="Portfolio" class="style4">Portfolio</a></li> <li class="contact><a href="../contact.html" title="Contact" class="style4">Contact</a></li> </ul> </div> Code (markup): Look for the body tag and add an id (depending on which page it is, obviously home would be substituted with the proper id name corresponding to the page) <body id="home"> Code (markup): Then the css: #home li.contact a, #about li.about a, #experience li.about a, #portfolio li.portfolio a, #contact li.contact a, #menu4 li a:hover { color: #999999; background: url(images/over.jpg) ; z-index:10; } Code (markup): Another approach would be: Adding class="active" to li for each page, so if contact should be active then your code will look like this: <div id="menu4"> <ul> <li><a href="../index.html" title="Home" class="style4" >Home</a></li> <li><a href="../about.html" title="About" class="style4" >About</a></li> <li><a href="../experience.html" title="Experience" class="style4" >Experience</a></li> <li><a href="../portfolio.html" title="Portfolio" class="style4">Portfolio</a></li> <li class="active"><a href="../contact.html" title="Contact" class="style4">Contact</a></li> </ul> </div> Code (markup): and css would be this: #menu4 li.active a, #menu4 li a:hover { color: #999999; background: url(images/over.jpg) ; z-index:10; } Code (markup):