首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现向下滑出的二级菜单效果实例

Posted in Javascript onAugust 22, 2015

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

这里用jQuery实现向下滑出的二级菜单代码，滑出菜单，鼠标放在主菜单的任意一项上，就会向下滑出二级的子菜单。当然本代码只是一个演示，有些菜单是随便弄的，经过测试，兼容IE8、火狐和Chrome等浏览器，有兴趣的你可以自己试下。

运行效果截图如下：

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>
<title>jQuery缓慢弹出下拉导航</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{ font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; background-color: #E8E8E8; }
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
/* nav_menu */
.nav_menu{ height: 42px; background-color: #333333; }
.nav{width:1006px;height:41px;position:relative;margin:0 auto;}
.nav .list li{float:left;}
.nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微软雅黑";color:#fff;}
.nav .list a:hover{color:#FFA304;}
.nav .list a:hover,.nav .list .now{color:#F00;background:#fff;}
.nav .box{position:absolute;left:-5px;top:42px;width:1006px;background:#FFF;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;border-bottom:2px solid #074c52;}
.nav .cont{position:relative;padding:25px 0 0px 24px;}
/* sublist */
.sublist li{float:left;width:168px;padding-right:24px;padding-bottom:24px;}
.sublist li h3.mcate-item-hd{font-family:'微软雅黑';padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;}
.sublist li p.mcate-item-bd{padding-left:2px;}
.sublist li p.mcate-item-bd a{height:26px;line-height:26px;margin-right:5px;font-size:12px;color:#666666;text-decoration:none;display:inline-block;}
.sublist li p.mcate-item-bd a:hover{color:#6c5143;text-decoration:underline;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div class="nav_menu">
 <div class="nav">
  <div class="list" id="navlist">
   <ul id="navfouce">
    <li><a href="#">公司概况</a></li> 
    <li><a href="#">产品展示</a></li> 
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">营销网络</a></li>
    <li><a href="#">照明知识</a></li> 
    <li><a href="#">人力资源</a></li> 
    <li><a href="#">客服中心</a></li> 
    <li><a href="#">联系我们</a></li>
   </ul>
  </div>
  <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
   <div class="cont" style="display:none;">
    <ul class="sublist clearfix">
     <li>
      <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女装</a>
       <a href="#">男装</a>
       <a href="#">内衣</a>
       <a href="#">家居服</a>
       <a href="#">配件</a>
       <a href="#">羽绒</a>
       <a href="#">呢大衣</a>
       <a href="#">毛衣</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女鞋</a>
       <a href="#">男鞋</a>
       <a href="#">箱包</a>
       <a href="#">女包</a>
       <a href="#">男包</a>
       <a href="#">旅行箱</a>
       <a href="#">钱包 </a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
      <p class="mcate-item-bd">
       <a href="#">饰品</a>
       <a href="#">项链</a>
       <a href="#">珠宝</a>
       <a href="#">钻石</a>
       <a href="#">手表</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>化妆品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">护肤</a>
       <a href="#">彩妆</a>
       <a href="#">香水</a>
       <a href="#">男士</a>
       <a href="#">精油</a>
       <a href="#">假发</a>
       <a href="#">美体</a>
       <a href="#">试用服务</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
      <p class="mcate-item-bd">
       <a href="#">运动鞋</a>
       <a href="#">运动服</a>
       <a href="#">运动用品</a>
       <a href="#">户外</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>手机 数码</span></h3>
      <p class="mcate-item-bd">
       <a href="#">手机</a>
       <a href="#">笔记本</a>
       <a href="#">相机</a>
       <a href="#">平板电脑</a>
       <a href="#">配件</a>
       <a href="#">电脑硬件</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家用电器</span></h3>
      <p class="mcate-item-bd">
       <a href="#">大家电</a>
       <a href="#">影音电器</a>
       <a href="#">生活电器</a>
       <a href="#">厨房电器</a>
       <a href="#">健康护理</a>
       <a href="#">剃须刀</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家具 建材</span></h3>
      <p class="mcate-item-bd">
       <a href="#">家具</a>
       <a href="#">卫浴</a>
       <a href="#">地板</a>
       <a href="#">灯具</a>
       <a href="#">五金</a>
       <a href="#">开关</a>
       <a href="#">装修设计</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
      <p class="mcate-item-bd">
       <a href="#">家纺</a>
       <a href="#">磨毛套件</a>
       <a href="#">羽绒被</a>
       <a href="#">枕头</a>
       <a href="#">软饰</a>
       <a href="#">居家</a>
       <a href="#">厨房</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>食品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">零食</a>
       <a href="#">进口</a>
       <a href="#">茶叶</a>
       <a href="#">冲饮</a>
       <a href="#">酒水</a>
       <a href="#">粮油</a>
       <a href="#">干货</a>
       <a href="#">生鲜</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>医药保健</span></h3>
      <p class="mcate-item-bd">
       <a href="#">保健</a>
       <a href="#">滋补</a>
       <a href="#">蛋白粉</a>
       <a href="#">阿胶</a>
       <a href="#">药品</a>
       <a href="#">血压仪</a>
       <a href="#">计生</a>
       <a href="#">体检</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>母婴用品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">玩具</a>
       <a href="#">宝宝食品</a>
       <a href="#">用品</a>
       <a href="#">童装</a>
       <a href="#">孕装</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>汽车 配件</span></h3>
      <p class="mcate-item-bd">
       <a href="#">新车</a>
       <a href="#">座垫</a>
       <a href="#">脚垫</a>
       <a href="#">GPS</a>
       <a href="#">车衣</a>
       <a href="#">洗车机</a>
       <a href="#">水枪</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>文化 玩乐</span></h3>
      <p class="mcate-item-bd">
       <a href="#">电子凭证</a>
       <a href="#">图书</a>
       <a href="#">乐器</a>
       <a href="#">旅游</a>
       <a href="#">鲜花</a>
      </p>
     </li>
    </ul>
   </div>
   <div class="cont" style="display:none;">
    <ul class="sublist clearfix">
     <li>
      <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女装</a>
       <a href="#">男装</a>
       <a href="#">内衣</a>
       <a href="#">家居服</a>
       <a href="#">配件</a>
       <a href="#">羽绒</a>
       <a href="#">呢大衣</a>
       <a href="#">毛衣</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女鞋</a>
       <a href="#">男鞋</a>
       <a href="#">箱包</a>
       <a href="#">女包</a>
       <a href="#">男包</a>
       <a href="#">旅行箱</a>
       <a href="#">钱包 </a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
      <p class="mcate-item-bd">
       <a href="#">饰品</a>
       <a href="#">项链</a>
       <a href="#">珠宝</a>
       <a href="#">钻石</a>
       <a href="#">手表</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>化妆品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">护肤</a>
       <a href="#">彩妆</a>
       <a href="#">香水</a>
       <a href="#">男士</a>
       <a href="#">精油</a>
       <a href="#">假发</a>
       <a href="#">美体</a>
       <a href="#">试用服务</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
      <p class="mcate-item-bd">
       <a href="#">运动鞋</a>
       <a href="#">运动服</a>
       <a href="#">运动用品</a>
       <a href="#">户外</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>手机 数码</span></h3>
      <p class="mcate-item-bd">
       <a href="#">手机</a>
       <a href="#">笔记本</a>
       <a href="#">相机</a>
       <a href="#">平板电脑</a>
       <a href="#">配件</a>
       <a href="#">电脑硬件</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家用电器</span></h3>
      <p class="mcate-item-bd">
       <a href="#">大家电</a>
       <a href="#">影音电器</a>
       <a href="#">生活电器</a>
       <a href="#">厨房电器</a>
       <a href="#">健康护理</a>
       <a href="#">剃须刀</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家具 建材</span></h3>
      <p class="mcate-item-bd">
       <a href="#">家具</a>
       <a href="#">卫浴</a>
       <a href="#">地板</a>
       <a href="#">灯具</a>
       <a href="#">五金</a>
       <a href="#">开关</a>
       <a href="#">装修设计</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
      <p class="mcate-item-bd">
       <a href="#">家纺</a>
       <a href="#">磨毛套件</a>
       <a href="#">羽绒被</a>
       <a href="#">枕头</a>
       <a href="#">软饰</a>
       <a href="#">居家</a>
       <a href="#">厨房</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>食品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">零食</a>
       <a href="#">进口</a>
       <a href="#">茶叶</a>
       <a href="#">冲饮</a>
       <a href="#">酒水</a>
       <a href="#">粮油</a>
       <a href="#">干货</a>
       <a href="#">生鲜</a>
      </p>
     </li>
    </ul>
   </div>
   <div class="cont" style="display:none;">
    <ul class="sublist clearfix">
     <li>
      <h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女装</a>
       <a href="#">男装</a>
       <a href="#">内衣</a>
       <a href="#">家居服</a>
       <a href="#">配件</a>
       <a href="#">羽绒</a>
       <a href="#">呢大衣</a>
       <a href="#">毛衣</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
      <p class="mcate-item-bd">
       <a href="#">女鞋</a>
       <a href="#">男鞋</a>
       <a href="#">箱包</a>
       <a href="#">女包</a>
       <a href="#">男包</a>
       <a href="#">旅行箱</a>
       <a href="#">钱包 </a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
      <p class="mcate-item-bd">
       <a href="#">饰品</a>
       <a href="#">项链</a>
       <a href="#">珠宝</a>
       <a href="#">钻石</a>
       <a href="#">手表</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>化妆品</span></h3>
      <p class="mcate-item-bd">
       <a href="#">护肤</a>
       <a href="#">彩妆</a>
       <a href="#">香水</a>
       <a href="#">男士</a>
       <a href="#">精油</a>
       <a href="#">假发</a>
       <a href="#">美体</a>
       <a href="#">试用服务</a>
      </p>
     </li>
     <li>
      <h3 class="mcate-item-hd"><span>运动 户外</span></h3>
      <p class="mcate-item-bd">
       <a href="#">运动鞋</a>
       <a href="#">运动服</a>
       <a href="#">运动用品</a>
       <a href="#">户外</a>
      </p>
     </li>
    </ul>
   </div>
   <div class="cont" style="display:none;">3<br />3</div>
   <div class="cont" style="display:none;">4<br />3<br />4</div>
   <div class="cont" style="display:none;">5</div>
   <div class="cont" style="display:none;">6<br />3<br />3</div>
   <div class="cont" style="display:none;">7<br />3<br />3<br />3</div>
  </div>
 </div>
</div>
<script type="text/javascript">
(function(){
 var time = null;
 var list = $("#navlist");
 var box = $("#navbox");
 var lista = list.find("a");
 for(var i=0,j=lista.length;i<j;i++){
  if(lista[i].className == "now"){
   var olda = i;
  }
 }
 var box_show = function(hei){
  box.stop().animate({
   height:hei,
   opacity:1
  },400);
 }
 var box_hide = function(){
  box.stop().animate({
   height:0,
   opacity:0
  },400);
 }
 lista.hover(function(){
  lista.removeClass("now");
  $(this).addClass("now");
  clearTimeout(time);
  var index = list.find("a").index($(this));
  box.find(".cont").hide().eq(index).show();
  var _height = box.find(".cont").eq(index).height()+54;
  box_show(_height)
 },function(){
  time = setTimeout(function(){ 
   box.find(".cont").hide();
   box_hide();
  },50);
  lista.removeClass("now");
  lista.eq(olda).addClass("now");
 });
 box.find(".cont").hover(function(){
  var _index = box.find(".cont").index($(this));
  lista.removeClass("now");
  lista.eq(_index).addClass("now");
  clearTimeout(time);
  $(this).show();
  var _height = $(this).height()+54;
  box_show(_height);
 },function(){
  time = setTimeout(function(){  
   $(this).hide();
   box_hide();
  },50);
  lista.removeClass("now");
  lista.eq(olda).addClass("now");
 });
})();
</script>
</body>
</html>

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

jQuery实现向下滑出的二级菜单效果实例

- Author -

企鹅

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

Javascript 相关文章推荐
拉动滚动条加载数据的jquery代码
May 03 Javascript
JavaScript高级程序设计 阅读笔记（二十） js错误处理
Aug 14 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
RequireJS使用注意细节
May 15 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
JS获取本周周一，周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 #Javascript
EventBus(1) muduo(1) 多线程(6) TcpServer(1) Spring-Retry(1) Spring Boot(5) pt-archiver(1) ICF-5900W(2) Fragment(1) 忘记密码(1)
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
2007/05/03 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue element 中的table动态渲染实现（动态表头）
2019/11/21 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
使用python实现rsa算法代码
2016/02/17 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python模块之paramiko实例代码
2018/01/31 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python进行OpenCV实战之画图（直线、矩形、圆形）
2020/08/27 Python
如何安装ruby on rails
2014/02/09 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
小学生教师节广播稿
2015/08/19 职场文书
师德师风心得体会（2016精选篇）
2016/01/12 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
linux目录管理方法介绍
2022/06/01 Servers