<!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>
<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, "新宋体";background: url(images/body_bg.png) repeat-x;}
.container{width:960px;padding:0;margin:0 auto;}
/* topnav */
ul#topnav{margin:179px 0 0 0;padding:0;float:left;width:100%;list-style:none;font-size:1.1em;}
ul#topnav li{float:left;margin:0;padding:0;position:relative;}
ul#topnav li a{float:left;text-indent:-9999px;height:44px;}
ul#topnav li:hover a, ul#topnav li a:hover{ background-position:left bottom;}
ul#topnav a.home{background:url(images/nav_home.png) no-repeat;width:78px;}
ul#topnav a.products{background:url(images/nav_products.png) no-repeat;width:117px;}
ul#topnav a.sale{background:url(images/nav_sale.png) no-repeat;width:124px;}
ul#topnav a.community{background:url(images/nav_community.png) no-repeat;width:124px;}
ul#topnav a.store{background:url(images/nav_store.png) no-repeat;width:141px;}
ul#topnav li .sub{
display:none;position:absolute;top:44px;left:0;background:#344c00 url(images/sub_bg.png) repeat-x;padding:20px 20px 20px;float:left;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright:5px;
-khtml-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
}
ul#topnav li .row{clear:both;float:left;width:100%;margin-bottom:10px;}
ul#topnav li .sub ul{list-style:none;margin:0;padding:0;width:150px;float:left;}
ul#topnav .sub ul li{width:100%;color:#fff;}
ul#topnav .sub ul li h2{padding:0; margin:0;font-size:1.3em;font-weight:normal;}
ul#topnav .sub ul li h2 a{padding:5px 0;background-image:none;color:#e8e000;}
ul#topnav .sub ul li a{float:none;text-indent:0;height:auto;background:url(images/navlist_arrow.png) no-repeat 5px 12px;padding:7px 5px 7px 15px;display:block;text-decoration:none;color:#fff;}
ul#topnav .sub ul li a:hover{color:#ddd;background-position:5px 12px;}
</style>
</head>
<body>
<div class="container">
<ul id="topnav">
<li><a href="http://www.moobnn.com/" class="home">Home</a></li>
<li>
<a href="http://www.moobnn.com/" class="products">Products</a>
<div class="sub">
<ul>
<li><h2><a href="http://www.zcool.com.cn/">网页模板</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="http://www.zcool.com.cn/works/">原创作品</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="http://www.moobnn.com/">Accessories</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="http://www.moobnn.com/">Accessories</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
</div>
</li>
<li>
<a href="http://www.moobnn.com/" class="sale">Sale</a>
<div class="sub">
<div class="row">
<ul style="width:225px;">
<li><h2><a href="http://www.moobnn.com/">Deal of the
Week</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
</ul>
<ul style="width:225px;">
<li><h2><a href="http://www.moobnn.com/">Clearance
Items</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link -
2 Column</a></li>
</ul>
</div>
<div class="row">
<ul>
<li><h2><a href="http://www.moobnn.com/">Deal of the
Week</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="http://www.moobnn.com/">Clearance
Items</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="http://www.moobnn.com/">Open Box Items</a></h2></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
<li><a href="http://www.moobnn.com/">Navigation Link</a></li>
</ul>
</div>
</div>
</li>
<li><a href="http://www.moobnn.com/" class="community">Community</a></li>
<li><a href="http://www.moobnn.com/" class="store">Store Locator</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//计算宽度的ul的
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//计算行
$(this).find("ul").each(function(){
rowWidth += $(this).width();
});
};
})(jQuery);
if($(this).find(".row").length > 0){
jQuery触发式二级导航.zip
版权申诉
128 浏览量
2022-11-20
22:07:35
上传
评论
收藏 102KB ZIP 举报
jQuery触发式二级导航.zip （12个子文件） 
jQuery触发式二级导航 jiaoben1272 images 
nav_community.png 3KB nav_sale.png 4KB navlist_arrow.png 183B sub_bg.png 140B nav_store.png 4KB body_bg.png 304B nav_products.png 3KB nav_home.png 3KB
index.html 9KB js 
jquery.min.js 56KB jquery.hoverIntent.minified.js 2KB
jQuery触发式二级导航.jpg 75KB资源评论
