地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
菜单导航特效
> 正文:
jQuery版感应鼠标显示的下拉二级菜单
菜单导航特效
jQuery版感应鼠标显示的下拉二级菜单
日期:2012-4-10 8:51:00 标签:
菜单特效
下拉菜单
二级菜单
jQuery
感应鼠标
∷
PC蛋蛋 赚积分 换Q币!>>>更多礼品兑换
一款向下滑动的jQuery多级菜单,jQuery下拉菜单特效代码,在网上比较常见的下拉导航菜单。鼠标放在任意的主菜单项上,就可以向下滑出二级子菜单,兼容性比较好。
<!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版感应鼠标显示的下拉二级菜单丨芯晴网页特效丨CsrCode.Cn</title> <script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".nav ul li").hover( function(){ jQuery(this).children(".drop_dwon").slideDown(200); }, function(){ jQuery(this).children(".drop_dwon").slideUp(100); }); }); </script> <style type="text/css"> * { margin:0; padding:0; } img { border:0; } ul, ol, li, dl { list-style-type:none; } a { color:#555; font-size:14px; text-decoration:none; } /* ===========###=========== 公用样式 ===========###=========== */ .nav { margin:0 auto; width:800px; height:30px; } .nav ul li { float:left; display:block; width:200px; height:30px; position:relative; } .nav ul li a { display:block; width:200px; height:30px; background:#666; color:#fff; line-height:30px; font-weight:bold; text-align:center; } .nav ul li a:hover { background:#F60; } .nav ul li a.title:visited { background:#F60; } .drop_dwon { width:330px; position:absolute; left:0; top:30px; display:none; } #drop a { width:330px; } /* 鼠标移动到下拉部分栏目的样式设置 */ #currlayout { background:#F60; } </style> </head> <body> <div class="nav"> <ul> <li><a class="title" href="/" target="blank">首页</a> <div class="drop_dwon" id="drop"> <div class="onemenulayout"><a href="http://www.CsrCode.cn/">网页特效</a></div> <div class="onemenulayout"><a href="http://www.7caidy.com/">七彩影视</a></div> <div class="onemenulayout"><a href="http://Changshi.CsrCode.Cn/">生活常识</a></div> <div class="onemenulayout"><a href="http://www.33567.cn/">珊珊影视</a></div> </div> </li> <li><a class="title" href="#" target="blank">网页特效①</a> <div class="drop_dwon" id="drop"> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/cddh/" title="">菜单导航特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/tcys/" title="">图层样式特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/ljwb/" title="">链接文本特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/txtx/" title="">图形图像特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/sbtx/" title="">鼠标特效代码</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/ymck/" title="">页面窗口特效</a></div> </div> </li> <li><a class="title" href="#" target="blank">网页特效②</a> <div class="drop_dwon" id="drop"> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/wybj/" title="">网页背景特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/rqsj/" title="">日期时间特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/ymss/" title="">页面搜索特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/bgtx/" title="">表格表单特效</a></div> <div class="onemenulayout"><a href="http://www.CsrCode.cn/html/txdm/qtdm/" title="">其他网页特效</a></div> </div> </li> <li><a class="title" href="http://changshi.csrcode.cn" target="blank">生活常识网</a> <div class="drop_dwon" id="drop"> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/shenghuochangshi/">生活常识</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/jiankangzhishi/">健康知识</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/">美容瘦身</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/jianfeishoushen/">减肥瘦身</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/meironghufu/">美容护肤</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/yinshichangshi/">饮食常识</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/yangshengzhidao/">养生之道</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/diannaozhishi/">电脑知识</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/touzilicai/">投资理财</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/fushichangshi/">服饰常识</a></div> <div class="onemenulayout"><a href="http://changshi.csrcode.cn/html_cs/shejiaoliyi/">社交礼仪</a></div> </div> </li> </ul> </div> </body> </html> <br><br><br><br><br><br>第一次运行本代码,请刷新一下页面先~<br>所需js文件:<a href="/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p>
提示:您可以先修改代码后再运行,复制和保存代码功能在Firefox下无效。
(
本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
)
(本文由
CsrCode.CN
|
芯晴网页特效
收集丨
www.CsrCode.cn
)
本文网址:
上一篇:
一款js生成的不错的页面上雪花飞舞效果
下一篇:
一组 New(新) gif 小图标素材
评论信息
抱歉,本文暂停评论留言。
栏目分类
·
菜单导航特效
·
图层样式特效
·
链接文本特效
·
网页图片特效
·
日期时间特效
·
页面窗口特效
·
鼠标特效代码
·
网页背景特效
·
表格表单特效
·
状态栏特效
·
页面搜索特效
·
其他特效代码
热门排行
一款非常不错的CSS横向二级导…
一款超级漂亮的蓝色风格的CS…
DIV+CSS布局实例:TAB滑动门…
jQuery实现的漂亮的滑动门式…
js+css精美二级导航菜单
几个tab、滑动门、选项卡和图…
JS横向布局二级菜单,鼠标滑…
很常用的漂亮的CSS下拉二级导…
jQuery版感应鼠标花式翻滚效…
Tab选项卡和滑动门同时布局在…
推荐信息
jQuery+CSS实现的滑动门滑动…
可以任意拖动位置的竖向二级…
CSS+JS实现的一个页面同时出…
很常用的一款CSS二级下拉菜单…
CSS+JS实现的一款类似TAB滑动…
纯CSS实现的红色风格横向导航…
JS打造的兼容好带缓冲的动感…
XHTML+CSS制作的下拉导航菜单…
JavaScript实现横向滑出的二…
一款纯CSS实现的圆角效果的菜…
相关信息
用jQuery实现的公告文字左右…
JS+css焦点图左右滚动切换效…
CSS+JS打造的仿flash动画效果…
目录式导航菜单
分享几个可以带锚文本链接的…
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间0.4063 s