编程 Javascript

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

Posted in Javascript onMarch 28, 2016

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

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

运行效果截图如下：

具体代码如下：

<!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程序设计有所帮助。

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

- Author -

沧海小强

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 必填项判断表单是否为空的方法

Sep 14 Javascript

Jquery 组合form元素为json格式,asp.net反序列化

Jul 09 Javascript

js实现砖头在页面拖拉效果

Nov 20 Javascript

Vue.js组件tab实现选项卡切换

Mar 23 Javascript

基于react后端渲染模板引擎noox发布使用

Jan 11 Javascript

在vue中使用Autoprefixed的方法

Jul 27 Javascript

Vue中的vue-resource示例详解

Nov 02 Javascript

js实现拖动缓动效果

Jan 13 Javascript

基于Element封装一个表格组件tableList的使用方法

Jun 29 Javascript

解决vux 中popup 组件Mask 遮罩在最上层的问题

Nov 03 Javascript

原生JavaScript实现换肤

Feb 19 Javascript

利用uni-app生成微信小程序的踩坑记录

Apr 05 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