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 相关文章推荐
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
详解Vue slot插槽
Nov 20 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
php 无法载入mysql扩展
2010/03/12 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python多进程操作实例
2014/11/21 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
编写python代码实现简单抽奖器
2020/10/20 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技