Forums

hoss9009

I found a horizontal, linear nav bar that I want to use that's ALL CSS.
Also, I'd love to integrate WP's nav classes and ids into it.

My biggest challenge... the ACTIVE STATE OF THE SUB NAV!!!

Here's a link to the demo:http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html

My question is, how do I have the sub nav stay "open" when on a sub-page? I know wp automatically throws in a class for the current page, but how do I style it so that way it does this?

jamy_za

Let's say that you have added a class of "contact" to the body of the contact page. <body class="contact"> and you have added the name of each page that has sub-pages as a class of the <li>'s. Like this:

<li class=\"dir contact\"><a href=\"./\">Contact Us</a>
	<ul class=\"rtl\">
		<li class=\"dir enquiry\"><a href=\"./\">Enquiry Form</a>
			<ul>
				<li><a href=\"./\">Sample 1</a></li>
				<li><a href=\"./\">Sample 2</a></li>
				<li><a href=\"./\">Sample 3</a></li>
				<li><a href=\"./\">Sample 4</a></li>
				<li><a href=\"./\">Sample 5</a></li>
			</ul>
		</li>
		<li><a href=\"./\">Map &amp; Driving Directions</a></li>
			<li><a href=\"./\">Your Feedback</a></li>
	</ul>
</li>

Add this to your css:

body.contact #nav li.contact {
	visibility:visible;
}

That way your sub-menu will be visible only when you are on the contact page.
Note: I'm not sure if this works in IE7 (I don't think it does) but I know this doesn't work in IE6.

hoss9009

WOW!
Thanks man... I'll give it a whirl and I WILL reply to let you know if it worked.

noahgelman

Would this work too?

body.contact #nav li.contact {
   display:block;
}

O do you have to use visibility?

treehouse : what would you like to learn today?

Forums

WP CSS nav:active