以下是 jquery可控制二级导航方向代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
.zzsc {
width: 700px;
height: 30px;
line-height: 30px;
margin: 200px auto;
}
.zzsc li a {
color: #fff;
text-decoration: none;
display: block;
float: left;
height: 30px;
line-height: 30px;
padding: 0px 15px;
font-size: 12px;
background: #636871;
}
.zzsc li a:hover {
background: #4b505a;
}
.zzsc li {
float: left;
position: relative;
height: 30px;
line-height: 30px;
}
.zzsc li .second {
position: absolute;
left: 0;
display: none;
}
</style>
</head>
<body>
<div class="zzsc">
<li>
<a href='http://www.baidu.com/'>首页</a>
<div class="second">
<a href='http://www.baidu.com/'>首页</a>
<a href='http://www.baidu.com/'>首页</a>
<a href='http://www.baidu.com/'>首页</a>
<a href='http://www.baidu.com/'>首页</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>菜单导航</a>
<div class="second">
<a href='http://www.baidu.com/'>菜单导航</a>
<a href='http://www.baidu.com/'>菜单导航</a>
<a href='http://www.baidu.com/'>菜单导航</a>
<a href='http://www.baidu.com/'>菜单导航</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>时间日期</a>
<div class="second">
<a href='http://www.baidu.com/'>时间日期</a>
<a href='http://www.baidu.com/'>时间日期</a>
<a href='http://www.baidu.com/'>时间日期</a>
<a href='http://www.baidu.com/'>时间日期</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>焦点图</a>
<div class="second">
<a href='http://www.baidu.com/'>焦点图</a>
<a href='http://www.baidu.com/'>焦点图</a>
<a href='http://www.baidu.com/'>焦点图</a>
<a href='http://www.baidu.com/'>焦点图</a>
</div>
</li>
<li>
<a href='http://www.baidu.com'>tab标签</a>
<div class="second">
<a href='http://www.baidu.com'>tab标签</a>
<a href='http://www.baidu.com'>tab标签</a>
<a href='http://www.baidu.com'>tab标签</a>
<a href='http://www.baidu.com'>tab标签</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>jquery特效</a>
<div class="second">
<a href='http://www.baidu.com/'>jquery特效</a>
<a href='http://www.baidu.com/'>jquery特效</a>
<a href='http://www.baidu.com/'>jquery特效</a>
<a href='http://www.baidu.com/'>jquery特效</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>在线客服</a>
<div class="second">
<a href='http://www.baidu.com/'>在线客服</a>
<a href='http://www.baidu.com/'>在线客服</a>
<a href='http://www.baidu.com/'>在线客服</a>
<a href='http://www.baidu.com/'>在线客服</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>广告代码</a>
<div class="second">
<a href='http://www.baidu.com/'>广告代码</a>
<a href='http://www.baidu.com/'>广告代码</a>
<a href='http://www.baidu.com/'>广告代码</a>
<a href='http://www.baidu.com/'>广告代码</a>
</div>
</li>
<li>
<a href='http://www.baidu.com/'>相册代码</a>
<div class="second">
<a href='http://www.baidu.com/'>相册代码</a>
<a href='http://www.baidu.com/'>相册代码</a>
<a href='http://www.baidu.com/'>相册代码</a>
<a href='http://www.baidu.com/'>相册代码</a>
</div>
</li>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
var zzsc = 1; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示
if (zzsc == 0) {
$('.zzsc li').hover(function () {
$('.second', this).css('top', '30px').show();
}, function () {
$('.second', this).hide();
});
} else if (zzsc == 1) {
$('.zzsc li').hover(function () {
$('.second', this).css('bottom', '30px').show();
}, function () {
$('.second', this).hide();
});
}
});
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
