Making hovor state of hidden list visible when page is active

Question

Hi guys,

One day I hope to not be such a newbie on this stuff, but some of this feels so insurmountable sometimes!

OK. I have a nav bar with hidden li items that are visible when hovered over.

Here's the live site: http://www.rattletree.com

Here's the code for the nav:

<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 &amp; 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 bit tricky what I want to do: If a user navigates to one of the innerlist pages, I'd like that innerlist ul to remain visible (with the specific li displaying the hovered state).

Now I think I could figure that out on my own, but you can see on the live page that if the user is on a page from the innerlist and that list was visible, then if they hovered over the other nav tab, then those innerlists would overlap. This is a problem.

Hopefully that last sentence makes sense!

In short: I need to keep the inner list of the active page displaying, BUT if the user hovers over another nav button WITH it's own inner list, then the live innerlist needs to disappear.

Clear as mud?

Answer 1

You will need to use Javascript to handle this. You won't be able to do this entirely with CSS.

What you will want to do is create a Javascript function that will be triggered on the "mouseover" event of any of the elements of ul#navbar. This function will make any inner lists that are showing be hidden, and show the proper inner list for that menu element.

Answer 2

I would suggest jQuery as it gives you a complete tool set for this sort of thing. But basically let us assume that you have the css you declared above.

$("ul#navbar li ul.innerlist").show()

or

$("ul#navbar li ul.innerlist").hide()

these are going to allow you to control your visibility state. You bind these to the parents:

$("div#navbar2 ul#navbar li").hover(function() {
  $("ul", this).show();
});

With some input from http://stackoverflow.com/questions/306583/jquery-this-selector-and-children

Answer 3

I suggest the following. On the page that you are showing, give the li a class of active.

Then with jQuery, do the following:

$('li.active > ul').show();

Also, you'd want to cancel the hovering possibility for that li, since if you don't, whenever someone hovers on it, the submenu will hide after the user hovers off.

So,

$('li.active').hover(function() {
  $('li.active > ul').show();
});

That should take care of it, me thinks.

Good luck.

Answer 4

Could also be done with CSS only, see: http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/

Be careful, you can run into performance problems on big sites with :hover on elements, which are noch anchors in IE -.-

Avoid the :hover pseudo-selector for non-link elements for IE clients. If you use :hover on non-anchor elements, test the page in IE7 and IE8 to be sure your page is usable. If you find that :hover is causing performance issues, consider conditionally using a JavaScript onmouseover event handler for IE clients.

-> http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html