开发者

Tweak drop down menu so top level stays highlighted

开发者 https://www.devze.com 2023-02-14 16:32 出处:网络
I am using this drop down menu code: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ and I am trying (with no success) to keep the top level highlighted even when the mouse moves dow

I am using this drop down menu code: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ and I am trying (with no success) to keep the top level highlighted even when the mouse moves down to the lower links on a dropdown menu.

The html:

<ul id="jsddm">
    <li><a href="#">JavaScript</a>
        <ul>
            <li><a href="#">Drop Down Menu</a></li>
            <li><a href="#">jQuery Plugin</a></li>
            <li><a href开发者_StackOverflow社区="#">Ajax Navigation</a></li>
        </ul>
    </li>
    <li><a href="#">Effect</a>
        <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
        </ul>
    </li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">Help</a></li>
</ul>

The original Javascript:

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

P.S. Three cheers to the guy that wrote this, I love it, keeps my html super clean and easy to update.


Add

ul li:hover {
  background:...
}

In your stylesheet and you should get the desired effect. because your submenu is nested within your list item - whilst hovering over your sub-menu you a still effectively hovering over its parent (list item) also.

You can keep the hover on ul li a - if you like but this won't keep your styles as the submenu is not nested within it.

0

精彩评论

暂无评论...
验证码 换一张
取 消