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 相关文章推荐
图片完美缩放
Sep 07 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
一道SQL面试题
2012/12/31 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
日语专业求职信
2014/07/04 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2016春季运动会前导词
2015/11/25 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
JVM之方法返回地址详解
2022/02/28 Java/Android
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
spring boot实现文件上传
2022/08/14 Java/Android
Redis主从复制操作和配置详情
2022/09/23 Redis