Show status of hidden hovor list when page is active
One day I hope not to be so new to this, but some of them sometimes seem so overwhelming!
OK. I have a navigation bar with hidden li elements that are visible when hovered over.
Here's a live site: http://www.rattletree.com
Here's the code for the navigator:
<ul id="navbar">
<li id="iex"><a href="index.php">About Rattletree</a></li>
<li id="upcomgshows"><a href="upcomingshows.php">Calendar</a></li>
<li id="sods"><a href="#">Sights & Sounds</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
<li class="innerlist"><a href="/playlist.m3u" target="_blank" onclick="javascript:BatmoAudioPop('Rattletree Marimba',this.href,'1'); return false">Listen</a></li>
<li class="innerlist"><a href="/new_pictures.php">Photos</a></li>
<li class="innerlist"><a href="/video.php">Video</a></li>
<li class="innerlist"><a href="/press.php">Press</a></li>
</ul>
</li>
<li id="bookin"><a href="#">Contact</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png" alt="" /></li>
<li class="innerlist"><a href="/booking.php">Booking Info</a></li>
<li class="innerlist"><a href="/media.php">Media Inquiries</a></li>
</ul>
</li>
<li id="ste"> <a href="/sounds.php">Store</a></li>
<li id="instrumes"><a href="/instruments.php">The Instruments</a></li>
<li id="classe"><a href="classes.php">Workshops</a></li>
</ul>
CSS
div#navbar2 {
background-color:#546F8B;
border-bottom:1px solid #546F8B;
border-top:1px solid #000000;
display:inline-block;
position:relative;
width:100%;
}
div#navbar2 ul#navbar {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
letter-spacing:1px;
margin:10px 0;
padding:0;
white-space:nowrap;
}
div#navbar2 ul#navbar li ul.innerlist {
color:#000000;
display:none;
position:relative;
z-index:20;
}
div#navbar2 ul#navbar li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
position:relative;
}
Now it's a little tricky what I want to do: If the user navigates to one of the pages of the inner list, I would like that inner list ul to remain visible (with a specific li showing the hovered state).
Now I think I could figure it out on my own, but you can see on the live page that if the user is on the page from an internal list and that list was visible, then if they hover over another nav tab, then these internal lists will be overlap. This is problem.
Hope that last sentence makes sense!
In short: I need to keep an internal list of the active page BUT if the user hovers over another nav button with its own internal list then the live internal list should disappear.
Remove like dirt?
a source to share
You will need to use Javascript for this. You cannot do this entirely with CSS.
What you need to do is create a Javascript function that will fire on the mouseover event of any of the ul # navbar elements. This function will cause all internal lists that are displayed to be hidden and will show the correct internal list for this menu item.
a source to share
I would suggest jQuery as it gives you a complete toolbox for this kind of thing. But basically, let's say you have the css you listed above.
$("ul#navbar li ul.innerlist").show()
or
$("ul#navbar li ul.innerlist").hide()
this will allow you to control the visibility state. You link them to their parents:
$("div#navbar2 ul#navbar li").hover(function() {
$("ul", this).show();
});
By input How do I get the children of the $ (this) selector?
a source to share
I suggest the following. On the page you are showing, give the li class active
.
Then with jQuery do this:
$('li.active > ul').show();
Also, you want to cancel the hover option for that li, since if you don't, whenever someone hovers over it, the submenu will hide after the user hovers.
So,
$('li.active').hover(function() {
$('li.active > ul').show();
});
This should take care of this, I think.
Good luck.
a source to share
Also can be done with CSS only: http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/
Be warned, you might run into performance issues on large sites by: hovering over elements that are noch anchors in IE -.-
Avoid the: hover pseudo-selector for unrelated elements for IE clients. If you are using: hover over non-anchor elements, check your page in IE7 and IE8 to make sure your page is usable. If you find: hover is causing performance problems, conditionally using a JavaScript onmouseover event handler for IE clients.
-> http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html
a source to share