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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
chrome原生方法之数组
Nov 30 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
通过js随机函数Math.random实现乱序
May 19 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
纯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
一个程序下载的管理程序(三)
2006/10/09 PHP
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
Python常用算法学习基础教程
2017/04/13 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python pygame实现球球大作战
2019/11/25 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
查环查孕证明
2014/01/10 职场文书
自荐信写法介绍
2014/01/25 职场文书
教育技术职业规划范文
2014/03/04 职场文书
环境日宣传活动总结
2014/07/09 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
无故旷工检讨书
2015/08/15 职场文书