jquery实现平滑的二级下拉菜单效果


Posted in Javascript onAugust 26, 2015

本文实例讲述了jquery实现平滑的二级下拉菜单效果。分享给大家供大家参考。具体如下:

这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢。

运行效果截图如下:

jquery实现平滑的二级下拉菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<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="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><a class="first" href="#">Home</a></li>
  <li><a href="#">ASP源码下载</a>
   <ul class="sub_nav">
    <li><a href="#">新闻类</a></li>
    <li><a href="#">论坛类</a></li>
    <li><a href="#">企业类</a></li>
   </ul>
  </li>
  <li><a href="#">技术文章</a>
   <ul class="sub_nav">
    <li><a href="#">ASP</a></li>
    <li><a href="#">php</a></li>
    <li><a href="#">jquery</a></li>
    <li><a href="#">Ajax</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
  </li>
  <li><a class="last" href="#">网页特效</a>
   <ul class="sub_nav">
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">CSS布局</a></li>
    <li><a href="#">鼠标特效</a></li>
   </ul>
  </li>
 </ul><br />
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Vue.use源码学习小结
Jun 20 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 #Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
CI框架中zip类应用示例
2014/06/17 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Python中Class类用法实例分析
2015/11/12 Python
常用python编程模板汇总
2016/02/12 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Python字符串及文本模式方法详解
2020/09/10 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
经管应届生求职信
2013/11/17 职场文书
入党思想汇报
2014/01/05 职场文书
项目计划书范文
2014/01/09 职场文书
《守株待兔》教学反思
2014/03/01 职场文书