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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
List the Codec Files on a Computer
Jun 11 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 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&amp;&amp;mysql)四
2006/10/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
医院检讨书范文
2014/02/01 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
学校课外活动总结
2014/05/08 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
小学大队委竞选口号
2015/12/25 职场文书
创业计划书之废品回收
2019/09/26 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL