Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)

Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)

发布时间:2015-02-06   编辑:www.jquerycn.cn
本文分享一个jquery实现的下拉菜单效果代码,使用一个名为名为Sexy Drop Down Menu的下拉菜单插件来完成。有需要的朋友参考下。

介绍一个下拉菜单插件,名为Sexy Drop Down Menu。
不过由于此下拉菜单是在每个一级菜单的<li></li>之间插入了一个<span></span>,然后插入一个向下的箭头,点击箭头之后显示菜单。

如下图:
jquery下拉菜单
 
jquery 下拉菜单插件的演示地址:www.sohtanaka.com/web-design/examples/drop-down-menu/。

不过,很多时候,需要在鼠标滑过一级菜单的时候就显示他的二级菜单,因此要进行下改造。

将JS代码改为如下内容即可:

$(document).ready(function(){   
    $("ul.topnav li").hover(function() {        
        $(this).find("ul.subnav").slideDown('fast').show(); 
        $(this).addClass("subhover");
 
    },function(){
        $(this).find("ul.subnav").slideUp('slow');
        $(this).removeClass("subhover");
        
    });
 
});

修改完之后浏览效果,发现一个问题,就是鼠标不停的在两个下拉菜单之间移动,鼠标在两个下拉菜单之间不停的来回移动,当停止移动鼠标时,两个下拉菜单不停的上下移动。

利用JQuery提供的stop()方法,可以轻松解决这个问题,修改后的代码如下:

$(document).ready(function(){
     $("ul.topnav li").hover(function() {       
          $(".subnav").stop(false,true);
          $(this).find("ul.subnav").slideDown('fast').show(); 
          $(this).addClass("subhover");
     },function(){
          $(this).find("ul.subnav").slideUp('slow');
          $(this).removeClass("subhover");      
     });
});

您可能感兴趣的文章:
jQuery下拉菜单插件 jQuery Simple Drop Down Menu
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
来自国外的30个基于jquery的Web下拉菜单
jQuery Drop Line Menu
Mega Drop Down Menus
jQuery菜单插件 Smooth Navigational Menu
Click Menu
jQuery组合框插件 Sexy Combo
jQuery Multi Level horizontal CSS Menu
用jquery实现下拉菜单效果的代码

[关闭]