jQuery实现的精美平滑二级下拉菜单效果代码


Posted in Javascript onMarch 28, 2016

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

这是一款jQurey实现的向下二级导航菜单效果。效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改!

运行效果截图如下:

jQuery实现的精美平滑二级下拉菜单效果代码

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现精美二级菜单——js特效大全</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/normal Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; }
a img { border:none; }
#content { width:800px; margin:30px auto; }
.main_nav { width:100%; height:30px; }
.main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; }
.main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; }
.main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; }
.main_nav ul li dl dd { height:31px; }
.main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; }
.main_nav ul li dl dd a:hover { background:#333; color:#ccc; }
.click { margin-top:200px; }
</style>
</head>
<body>
<div id="content">
 <div class="main_nav hover">
  <ul>
   <li><a href="#" title="js特效大全">网页特效</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效 </a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
    </dl>
   </li>
   <li><a href="#" title="js特效大全">网页设计</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网页制作</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作 </a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网站优化</a>
    <dl>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化 </a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
    </dl>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(".hover ul li").hover(function(){
  $(this).children("dl").slideDown(300)
}, function(){
  $(this).children("dl").slideUp(100)
});
</script>
</body>
</html>

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

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
详解JavaScript树结构
Jan 09 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 #Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 #Javascript
详解javascript跨浏览器事件处理程序
Mar 27 #Javascript
js事件处理程序跨浏览器解决方案
Mar 27 #Javascript
基于javascript实现九九乘法表
Mar 27 #Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 #Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 #Javascript
You might like
又一个php 分页类实现代码
2009/12/03 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
js实现抽奖功能
2020/11/24 Javascript
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Python中的变量和作用域详解
2016/07/13 Python
python制作小说爬虫实录
2017/08/14 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python cumsum函数的具体使用
2019/07/29 Python
python实现udp传输图片功能
2020/03/20 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
区级文明单位申报材料
2014/05/15 职场文书
2014年大学生工作总结
2014/11/20 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
Go语言grpc和protobuf
2022/04/13 Golang