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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
document.open() 与 document.write()的区别
Aug 13 Javascript
Ext 今日学习总结
Sep 19 Javascript
跟我学习javascript的this关键字
May 28 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
ztree实现权限横向显示功能
May 20 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php实现的递归提成方案实例
2015/11/14 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python抓取网页中的图片示例
2014/02/28 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
eclipse创建python项目步骤详解
2019/05/10 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
python数据归一化及三种方法详解
2019/08/06 Python
python 递归相关知识总结
2021/03/03 Python
荷兰家电销售网站:Welhof
2020/12/08 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
个人贷款担保书
2014/04/01 职场文书
社区矫正工作方案
2014/06/04 职场文书
2014年团委工作总结
2014/11/13 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
创业计划书之熟食店
2019/10/16 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python