jQuery二级导航菜单插件2
2013-06-07 23:54
661 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery二级导航菜单插件</title>
<meta name="keywords" content="jQuery二级导航菜单插件" />
<meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程" />
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.1.4.2-min.js"></script>
</head>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/*--header--*/
.headerbg{height:42px;margin-bottom:12px;background:#efefef url(images/topbar.gif) repeat-x 0 0;border-top:solid 1px #ddd;margin:40px 0 0 0;}
#header{height:42px;width:620px;margin:0 auto;}
#header .logo{float:left;display:block;margin-top:2px;width:36px;height:36px;overflow:hidden;}
#nav{float:right;font-size:16px;font-family:"微软雅黑","宋体";}
#nav a:hover{text-decoration:none}
#nav .nav-item,#nav .nav-link{position:relative;float:left;display:block;color:#444;z-index:1000;}
#nav .nav-link{height:40px;margin-left:-1px;line-height:40px;font-weight:700;border:1px solid #dadada;border-top-color:#efefef;border-bottom:none;z-index:999;width: 59px;text-align:center;}
#nav .hover .nav-link{white-space:nowrap;border-bottom:1px solid #fff;color:#ca0000;background:#fbfbfb}
#nav .nav-dropdown{display:none;position:absolute;top:41px;left:-1px;width:480px;height:290px;border:1px solid #dadada;border-bottom:5px solid #c2c2c2;background:#fff;box-shadow:0 1px 6px rgba(0, 0, 0, 0.2);z-index:998}
#nav .nav-dropdown-align-right{left:auto;right:0;_right:-1px}
#nav .nav-dropdown-trending{float:left;width:380px;font-size:16px}
#nav .nav-dropdown-channel{float:right;width:100px;height:290px;font-size:14px;background:#f6f6f6}
#nav .nav-dropdown a:hover{color:#ca0000}
#nav .trending li{height:50px;line-height:50px;font-weight: 700;border-bottom:1px dashed #ccc;vertical-align:bottom;overflow:hidden}
#nav .trending li a{display:block;padding-left:25px;color:#1E1E1E;}
#nav .trending li a:hover{background:#f6f6f6}
#nav .nav-dropdown-entry{line-height:34px;margin-left:25px;font-size: 14px;}
#nav .nav-dropdown-entry a{display:inline-block;color:#b20000}
#nav .channel{margin-top:16px}
#nav .channel li{line-height:2em}
#nav .channel li a{height:30px;padding-left:24px;line-height:30px;color:#6d6d6d}
</style>
<div class="headerbg">
<div id="header">
<a class="logo" href="#"><img width="36" height="36" src="images/chinaz_logo.png" /></a>
<!--导航-->
<ul id="nav">
<li class="nav-item">
<a href="#" class="nav-link">新闻</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">军事</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">财经</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">娱乐</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">体育</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">科技</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">汽车</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">房产</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">游戏</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function($){
$.fn.dropdown = function(settings){
var defaults = {
dropdownEl: '.dropdown-menu',
openedClass: 'dropdown-open',
delayTime: 100
}
var opts = $.extend(defaults, settings);
return this.each(function(){
var curObj = null;
var preObj = null;
var openedTimer = null;
var closedTimer = null;
$(this).hover(function(){
if(openedTimer)
clearTimeout(openedTimer);
curObj = $(this);
openedTimer = setTimeout(function(){
curObj.addClass(opts.openedClass).find(opts.dropdownEl).show();
},opts.delayTime);
preObj = curObj;
},function(){
if(openedTimer)
clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
//点击事件关闭菜单
$(this).bind('click', function(){
if(openedTimer)
clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
});
};
})(jQuery);
//下拉菜单
$(document).ready(function(){
$('#nav .nav-item').dropdown({
dropdownEl:'.nav-dropdown',
openedClass:'hover'
});
});
</script>
<!--演示内容结束-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery二级导航菜单插件</title>
<meta name="keywords" content="jQuery二级导航菜单插件" />
<meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程" />
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.1.4.2-min.js"></script>
</head>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/*--header--*/
.headerbg{height:42px;margin-bottom:12px;background:#efefef url(images/topbar.gif) repeat-x 0 0;border-top:solid 1px #ddd;margin:40px 0 0 0;}
#header{height:42px;width:620px;margin:0 auto;}
#header .logo{float:left;display:block;margin-top:2px;width:36px;height:36px;overflow:hidden;}
#nav{float:right;font-size:16px;font-family:"微软雅黑","宋体";}
#nav a:hover{text-decoration:none}
#nav .nav-item,#nav .nav-link{position:relative;float:left;display:block;color:#444;z-index:1000;}
#nav .nav-link{height:40px;margin-left:-1px;line-height:40px;font-weight:700;border:1px solid #dadada;border-top-color:#efefef;border-bottom:none;z-index:999;width: 59px;text-align:center;}
#nav .hover .nav-link{white-space:nowrap;border-bottom:1px solid #fff;color:#ca0000;background:#fbfbfb}
#nav .nav-dropdown{display:none;position:absolute;top:41px;left:-1px;width:480px;height:290px;border:1px solid #dadada;border-bottom:5px solid #c2c2c2;background:#fff;box-shadow:0 1px 6px rgba(0, 0, 0, 0.2);z-index:998}
#nav .nav-dropdown-align-right{left:auto;right:0;_right:-1px}
#nav .nav-dropdown-trending{float:left;width:380px;font-size:16px}
#nav .nav-dropdown-channel{float:right;width:100px;height:290px;font-size:14px;background:#f6f6f6}
#nav .nav-dropdown a:hover{color:#ca0000}
#nav .trending li{height:50px;line-height:50px;font-weight: 700;border-bottom:1px dashed #ccc;vertical-align:bottom;overflow:hidden}
#nav .trending li a{display:block;padding-left:25px;color:#1E1E1E;}
#nav .trending li a:hover{background:#f6f6f6}
#nav .nav-dropdown-entry{line-height:34px;margin-left:25px;font-size: 14px;}
#nav .nav-dropdown-entry a{display:inline-block;color:#b20000}
#nav .channel{margin-top:16px}
#nav .channel li{line-height:2em}
#nav .channel li a{height:30px;padding-left:24px;line-height:30px;color:#6d6d6d}
</style>
<div class="headerbg">
<div id="header">
<a class="logo" href="#"><img width="36" height="36" src="images/chinaz_logo.png" /></a>
<!--导航-->
<ul id="nav">
<li class="nav-item">
<a href="#" class="nav-link">新闻</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">军事</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">财经</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">娱乐</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">体育</a>
<div class="nav-dropdown">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li>
<li><a href="#">河南在2010年“赵作海案”后翻错案释放116人</a></li>
<li><a href="#">全国留守流动儿童将近1亿 仍在逐年扩大</a></li>
<li><a href="#">学者：环保问题难解决因地方政将经济放环保之前</a></li>
<li><a href="#">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入新闻频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">历史</a></li>
<li><a href="#">评论</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">科技</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">汽车</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">房产</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">游戏</a>
<div class="nav-dropdown nav-dropdown-align-right">
<div class="nav-dropdown-trending">
<ul class="trending">
<li><a href="#">韩国23岁残疾电竞玩家Space去世 被誉意志亡灵</a></li>
<li><a href="#">《剑网3》“安史之乱”内测开启 九门派武学调整</a></li>
<li><a href="#">WCG2013比赛项目初定：LOL入选 DotA2出局</a></li>
<li><a href="#">EA 2013财报公开 《FIFA 13》销量达1450万</a></li>
<li><a href="#">日本大阪美发沙龙惊现杀马特西红柿等非主流发型</a></li>
</ul>
<p class="nav-dropdown-entry"><a href="#">进入游戏频道>></a></p>
</div>
<div class="nav-dropdown-channel">
<ul class="channel">
<li><a href="#">网络游戏</a></li>
<li><a href="#">单机游戏</a></li>
<li><a href="#">电视掌机</a></li>
<li><a href="#">动漫地带</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function($){
$.fn.dropdown = function(settings){
var defaults = {
dropdownEl: '.dropdown-menu',
openedClass: 'dropdown-open',
delayTime: 100
}
var opts = $.extend(defaults, settings);
return this.each(function(){
var curObj = null;
var preObj = null;
var openedTimer = null;
var closedTimer = null;
$(this).hover(function(){
if(openedTimer)
clearTimeout(openedTimer);
curObj = $(this);
openedTimer = setTimeout(function(){
curObj.addClass(opts.openedClass).find(opts.dropdownEl).show();
},opts.delayTime);
preObj = curObj;
},function(){
if(openedTimer)
clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
//点击事件关闭菜单
$(this).bind('click', function(){
if(openedTimer)
clearTimeout(openedTimer);
openedTimer = setTimeout(function(){
preObj.removeClass(opts.openedClass).find(opts.dropdownEl).hide();
},opts.delayTime);
});
});
};
})(jQuery);
//下拉菜单
$(document).ready(function(){
$('#nav .nav-item').dropdown({
dropdownEl:'.nav-dropdown',
openedClass:'hover'
});
});
</script>
<!--演示内容结束-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现向下滑出的二级导航下滑菜单效果
- 兼容IE6,IE7,IE8,FF的JQuery 垂直二级导航菜单
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
- 一款jquery编写图文下拉二级导航菜单特效
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- jquery顶部固定二级导航菜单
- jQuery插件PageSlide实现左右侧栏导航菜单
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- Jquery实现带动画效果的经典二级导航菜单
- JQUERY 插件开发——MENU（导航菜单）
- 分享14个很酷的jQuery导航菜单插件
- 10款最新CSS3 /jQuery菜单导航插件
- 用jquery插件写一个小米官网左侧二级菜单
- jQuery简单实用的隐藏全屏导航菜单插件
- 实列教程 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的响应式二级导航菜单
- jquery二级导航菜单--可弹出下拉层 UL/LI结构
- jquery实现带二级菜单的导航示例
- jQuery实现淡入淡出二级下拉导航菜单的方法
- jQuery鼠标经过显示二级导航菜单(用less写的)