你的位置:首页 > Java教程

[Java教程]可控制导航下拉方向的jQuery下拉菜单代码


效果:http://hovertree.com/texiao/nav/1/

代码如下:

<!DOCTYPE html><html><head><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 = 1; // 默认值为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>

转自:http://hovertree.com/h/bjaf/kxl2s00m.htm

特效:http://www.cnblogs.com/roucheng/p/texiao.html