jquery实现简单的二级导航下拉菜单效果_jquery
程序员文章站
2022-04-02 21:36:38
...
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下：
').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length\n'
+mainmenuid+', '+mainmenuid+' ul li a {background:'+setting.customtheme[0]+';}\n'
+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
+'')
}
jQuery(document).ready(function($){ //override default menu colors (default/hover) with custom set?
if (typeof setting.contentsource=="object"){ //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else{ //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
})
}
} //end ddsmoothmenu variable
//Initialize Menu instance(s):
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
customtheme: [], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
jQuery代码实现的二级导航菜单效果，非常简洁，喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级，CSS的配合也是挺重要的，不多说了，要代码的就直接复制吧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/
具体代码如下：
jquery二级导航菜单