地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 菜单导航特效 > 正文：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实现的圆角效果的菜…