首页
所有分类
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 相关文章推荐
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 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
绿林侠盗(1) 巫师(1) 暴雪(1) 我的世界(1) LOL(1) 战锤40K(1) 遗弃(1) 艾尔登法环(1) 小缇娜的奇幻之地(1) 东方异文石(1)
You might like
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JQuery自适应IFrame高度（支持嵌套 兼容IE,ff,safafi,chrome）
2011/03/28 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
玩转python selenium鼠标键盘操作（ActionChains）
2020/04/12 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
Nordgreen手表德国官方网站：丹麦极简主义手表
2019/10/31 全球购物
拉夫劳伦爱尔兰官方网站：Ralph Lauren爱尔兰
2020/04/10 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
目标责任书范本
2014/04/16 职场文书
教师见习报告范文
2014/11/03 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python