jquery导航菜单上下都行，可以上弹也可以下拉，方便配置使用 

<!DOCTYPE html>
<html>
<head>
<!-- 效果：http://hovertree.com/texiao/nav/1/  -->
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title>
<base target="_blank" />
<style>
.nav * {
margin: 0;
padding: 0;
list-style: none;
}
 
.nav {
width: 700px;
height: 30px;
line-height: 30px;
margin: 2px auto;
}
 
.nav li a {
color: #fff;
text-decoration: none;
display: block;
float: left;
height: 30px;
line-height: 30px;
padding: 0px 15px;
font-size: 12px;
background: #636871;
}
 
.nav li a:hover {
background: #4b505a;
}
 
.nav li {
float: left;
position: relative;
height: 30px;
line-height: 30px;
}
 
.nav li .second {
position: absolute;
left: 0;
display: none;
}
 
.hovertreeinfo {
width: 100%;
height: 234px;
text-align: center;
}
 
.hovertreeinfo a {
color: blue;
}
</style>
 
</head>
<body>
<div class="hovertreeinfo">
<h1>jQuery上弹菜单</h1>
<a href="http://hovertree.com/h/bjaf/kxl2s00m.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">推荐</a>
<a href="http://hovertree.com/texiao/nav/1/1.htm">Demo 2</a>
</div>
<ul class="nav">
<li>
<a href='http://hovertree.com/'>首页</a>
<div class="second">
<a href='http://hovertree.com/texiao/'>特效</a>
<a href='http://hovertree.com/map/'>导航</a>
<a href='http://hovertree.com/hvtart/bjae/5w5svpu4.htm'>菜单</a>
<a href='http://hovertree.com/h/bjae/0st5ww13.htm'>磨砂</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/qufo9d03.htm'>菜单导航</a>
<div class="second">
<a href='http://keleyi.com/'>柯乐义</a>
<a href='http://hovertree.com/code/css/uofyn8bc.htm'>何问起</a>
<a href='http://hovertree.com/texiao/jeasyui/2/'>EasyUI</a>
<a href='http://hovertree.com/texiao/keleyi/'>Keleyi</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/citydate.htm'>时间日期</a>
<div class="second">
<a href='http://hovertree.com/h/bjaf/jshour.htm'>时间日期</a>
<a href='http://hovertree.com/code/javascript/sqchrhfe.htm'>时间日期</a>
<a href='http://hovertree.com/h/bjaf/p49wvx4e.htm'>时间日期</a>
<a href='http://hovertree.com/h/bjaf/46xrokmy.htm'>时间日期</a>
</div>
</li>
<li>
<a href='http://hovertree.com/hvtart/bjae/yqhu1ug9.htm'>焦点图</a>
<div class="second">
<a href='http://hovertree.com/h/bjaf/8c5uhche.htm'>焦点图</a>
<a href='http://hovertree.com/hvtart/bjae/f03e85410878db53.htm'>焦点图</a>
<a href='http://hovertree.com/code/jquery/smjv6d0n.htm'>焦点图</a>
<a href='http://hovertree.com/h/bjaf/a6598spx.htm'>焦点图</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/sk1tputv.htm'>tab标签</a>
<div class="second">
<a href='http://hovertree.com/hvtart/bjae/wokffp10.htm'>tab标签</a>
<a href='http://hovertree.com/h/bjae/9glhm7lv.htm'>tab标签</a>
<a href='http://hovertree.com/h/bjaf/uoarumwr.htm'>tab标签</a>
<a href='http://hovertree.com/h/bjaf/s6y2vlsx.htm'>tab标签</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/gundong.htm'>jquery特效</a>
<div class="second">
<a href='http://hovertree.com/h/bjaf/picqiehuan.htm'>jquery特效</a>
<a href='http://hovertree.com/h/bjaf/41eyinh2.htm'>jquery特效</a>
<a href='http://hovertree.com/h/bjaf/vc8993j8.htm'>jquery特效</a>
<a href='http://hovertree.com/h/bjaf/6sm1esjw.htm'>jquery特效</a>
</div>
</li>
<li>
<a href='http://hovertree.com/hvtart/bjae/yjm6v683.htm'>在线客服</a>
<div class="second">
<a href='http://hovertree.com/h/bjaf/mbrpxe4o.htm'>在线客服</a>
<a href='http://hovertree.com/h/bjaf/tishiceng.htm'>在线客服</a>
<a href='http://hovertree.com/h/bjaf/1kquypy7.htm'>在线客服</a>
<a href='http://hovertree.com/h/bjaf/5mkg51yt.htm'>在线客服</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/3dxfknkj.htm'>广告代码</a>
<div class="second">
<a href='http://hovertree.com/h/bjaf/c03itibx.htm'>广告代码</a>
<a href='http://hovertree.com/h/bjaf/kqud99m6.htm'>广告代码</a>
<a href='http://hovertree.com/h/bjaf/ajw4dsfb.htm'>广告代码</a>
<a href='http://hovertree.com/h/bjaf/ws50ueia.htm'>广告代码</a>
</div>
</li>
<li>
<a href='http://hovertree.com/h/bjaf/l3c6nm7b.htm'>相册代码</a>
<div class="second">
<a href='http://hovertree.com/hvtart/bjae/upnrkt1d.htm'>相册代码</a>
<a href='http://hovertree.com/h/bjaf/gk8mko69.htm'>相册代码</a>
<a href='http://hovertree.com/texiao/css/23/'>相册代码</a>
<a href='http://hovertree.com/texiao/html5/30/'>相册代码</a>
</div>
</li>
</ul>
<div class="hovertreeinfo"></div>
 
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
var nav = 0; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示
if (nav == 0) {
$('.nav li').hover(function () {
$('.second', this).css('top', '30px').show();
}, function () {
$('.second', this).hide();
});
} else if (nav == 1) {
$('.nav li').hover(function () {
$('.second', this).css('bottom', '30px').show();
}, function () {
$('.second', this).hide();
});
}
});
</script>
</body>
</html>


posted @   离。  阅读(52)  评论(0)  编辑  收藏  举报
相关博文：
· layui之动态添加下拉菜单
· 基于layui的管理后台简单导航，简单框架布局。左侧菜单栏以及动态操作tab项
· jquery动感漂浮导航菜单代码分享
· 网页设计_导航条_下拉菜单
· jQuery动画_动画版下拉菜单/使用slideDown和slideUp
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示