教程集 > 脚本编程 > javascript > 正文基于jquery平滑二级下拉菜单效果

基于jquery平滑二级下拉菜单效果

发布时间：2016-10-12 编辑：jiaochengji.com

教程集为您提供基于jquery平滑二级下拉菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的基于jquery平滑二级下拉菜单效果资源

一款不错的平滑二级下拉菜单效果代码，比js的好看的多，同时这里是调用外部jquery加载时可能第一次无效，刷新即可解决，在实际应用中不会有问题。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <head> <title>jquery平滑二级下拉菜单</title> <style> h1, h2, h3, h4, p, li, li a{font-family: Arial, Sans-Serif;font-size: 15px;font-weight: bold;color: #525252;text-decoration: none;} h1, h2, h3, h4{font-size: 22px;} #dropdown_nav{width: 960px;padding: 0px;display: inline-block;list-style: none;-moz-box- shadow: inset 0px 0px 1px #fff;-webkit-box-shadow: inset 0px 0px 1px #fff;border: 1px solid #ccc;-moz-border-radius: 5px;-webkit-border-radius: 5px;background: #e2e2e2;background: - moz-linear-gradient(#f3f3f3, #e2e2e2);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));} #dropdown_nav li{padding: 10px 0px 10px 0px;float: left;position: relative;display: inline -block;} #dropdown_nav li a{padding: 10px 15px 10px 15px;text-shadow: -1px 1px 0px #f6f6f6;-moz-box -shadow: inset 0px 0px 1px #fff;-webkit-box-shadow: inset 0px 0px 1px #fff;border-right: 1px solid #ccc;} #dropdown_nav li a: hover{background: #f9f9f9;background: -moz-linear-gradient(#f9f9f9, #e8e8e8);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));} #dropdown_nav li a: active{background: #e2e2e2;background: -moz-linear-gradient(#e2e2e2, #f3f3f3);background: -webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));} #dropdown_nav li a.first{-moz-border-radius: 5px 0px 0px 5px;-webkit-border-radius: 5px 0px 0px 5px;} #dropdown_nav .sub_nav{width: 160px;padding: 0px;position: absolute;top: 38px;left: 0px;border: 1px solid #ccc;background: #e2e2e2;} #dropdown_nav .sub_nav li{width: 160px;padding: 0px;} #dropdown_nav .sub_nav li a{display: block;border-bottom: 1px solid #ccc;background: -moz- linear-gradient(#f3f3f3, #e2e2e2);background: -webkit-gradient(linear, 0 0, 0 100%, from (#f3f3f3), to(#e2e2e2));} #dropdown_nav .sub_nav li a: hover{background: #f9f9f9;background: -moz-linear-gradient (#f9f9f9, #e8e8e8);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to (#e8e8e8));} #dropdown_nav .sub_nav li a: active{background: #e2e2e2;background: -moz-linear-gradient (#e2e2e2, #f3f3f3);background: -webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to (#f3f3f3));} </style> <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery- 1.6.2.min.js"></script> <script type="text/javascript"> $(function() { //We initially hide the all dropdown menus $('#dropdown_nav li').find('.sub_nav').hide(); //When hovering over the main nav link we find the dropdown menu to the corresponding link. $('#dropdown_nav li').hover(function() { //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn. $(this).find('.sub_nav').fadeIn(100); }, function() { //Do the same again, only fadeOut this time. $(this).find('.sub_nav').fadeOut(50); }); }); </script> </head> <body> <h2>Creating an Awesome Drop-Down Nav with CSS3 & jQuery</h2> <ul id="dropdown_nav"> <li>Home</li> <li>ASP源码下载 <ul class="sub_nav"> <li>新闻类</li> <li>论坛类</li> <li>企业类</li> </ul> </li> <li>技术文章 <ul class="sub_nav"> <li>ASP</li> <li>php</li> <li>jquery</li> <li>Ajax</li> </ul> </li> <li>Freebies </li> <li>网页特效 <ul class="sub_nav"> <li>导航菜单</li> <li>CSS布局</li> <li>鼠标特效</li> </ul> </li> </ul>
</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery菜单插件 Smooth Navigational Menu
jQuery水平下拉菜单 jMenu
jquery无限层级下拉菜单实现代码
 7款风格新颖的jQuery/CSS3菜单导航分享
 Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
基于jquery平滑二级下拉菜单效果
 jQuery ul标签下拉菜单演示代码
 jQuery的效果集工具包 Glimmer
jquery下拉菜单 ul标签下拉菜单的例子
 在网站上应该用的30个jQuery插件整理

上一篇：一个不错的鼠标经过二级菜单效果代码下一篇：js选项卡式导航特效代码

[关闭]

基于jquery平滑二级下拉菜单效果

最近更新

浏览排行