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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python中 map()函数的用法详解
2018/07/10 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python发送邮件实现基础解析
2020/08/14 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
共产党员承诺书
2014/03/25 职场文书
初三学生个人自我评定
2014/04/06 职场文书
2014年征兵标语
2014/06/20 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
大学生军训感言
2015/08/01 职场文书