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

js实现仿京东2级菜单效果(带延时功能)

Posted in Javascript onAugust 27, 2015

本文实例讲述了jquery实现仿京东2级菜单效果。分享给大家供大家参考。具体如下：

这里介绍js实现仿京东2级菜单效果代码，带有延时功能，操作上更加舒适自然。

先来看看运行效果截图：

js实现仿京东2级菜单效果(带延时功能)

在线演示地址如下：

具体代码如下：

<!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>仿京东网站的2级菜单导航</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a{ text-decoration:none;}
.mold_open_hover,.mold_open{background-image:url();background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
h1{margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url() no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 var l;
 var t;
 var menuItem;
 $(document).ready(menu_init);
 function menu_init()
 {
  var mod_menu=$(".mod-menu");//导航模块区
  menu();//执行展开二级菜单函
  //setTimeout(menu(),1000)
 }
 var menu=function()
 {
  menuItem=$(".menu-item li");//选择导航列表
  menuItem.each(menu_each);/*导航菜单菜单*/
  menuItem.mouseleave(menu1_leave);/*导航菜单菜单*/
  $(".mod-menu").mouseleave(menu2_mouse_leave);
 }//展开二级菜单 
 var menu_each=function()
 {
  var _index=$(this).index();//获取当前选择菜单列表的索引
  $(this).mouseenter(menu_mouse_enter);
 }
 var menu_mouse_enter=function()
 {
  l = $(this);//获取当前鼠标滑过的列表的顶部坐标
  t=setTimeout("menu_mouse_enter_show()", 300)
 }
 function menu_mouse_enter_show()
 {
//  alert(y1);
  var y = l.position().top+1;//获取当前鼠标滑过的列表的顶部坐标
  $(".menu-cont").show();
  $(".menu-cont").css("top",y);//需要显示的对应索引内容
  l.addClass("mouse-bg").siblings().removeClass("mouse-bg");
  $(".menu-cont>div").eq(_index).show().siblings().hide();
 }
 var menu1_leave=function()
 {
  clearTimeout(t);
 }
 var menu2_mouse_leave=function()
 {
  $(".menu-cont").hide();
  menuItem.removeClass("mouse-bg");
 }
</script>
</head>
<body>
 <h1>简单的2级菜单导航</h1>
 <div class="mod-menu f-l">
 <div id="column-left"> 
  <ul class="menu-item">
  <li class=""><a href="#">Wedding</a></li>
  <li class=""><a href="#">Women's Shoes</a></li>
  <li class=""><a href="#">Accessories</a></li>
  <li class=""><a href="#">Beauty & Health</a></li>
  </ul><!--一级菜单列表-->
  <div class="menu-cont hide" style="display: none; top: 241px;">
  <div class="menu-cont-list" style="display: none;">
  <ul>
   <li>
   <h3><a href="#">Wedding Dresses</a></h3>
   <div class="menu-list-link"></div>
   </li>
   <li>
   <h3><a href="#">Bridesmaid Dresses</a></h3>
   <div class="menu-list-link"></div>
   </li>
   <li>
   <h3><a href="#">Wedding Party Dresses</a></h3>
   <div class="menu-list-link">
   <a title="" href="#">Mother of the Brides Dresses</a>
   <span class="long-string">|</span>
   <a title="" href="#">Flower Girl Dresses</a>
   <span class="long-string">|</span>
   <a title="" href="#">Wedding Guest Dresses</a>
   </div>
   </li>
   <li>
   <h3><a href="#">Wedding Accessories</a></h3>
   <div class="menu-list-link">
    <a title="" #">Fabric Swatch</a>
    <span class="long-string">|</span>
    <a title="" href="#">Bridal Lingerie</a>
    <span class="long-string">|</span>
    <a title="" href="#">Wedding Flowers</a>
    <span class="long-string">|</span>
    <a title="" href="#">Wedding Petticoats</a>
   </div>
   </li>
   </ul>
  </div>
  <div class="menu-cont-list" style="display: none;">
   <ul>
   <li>
    <h3><a href="#">Prom Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Military Ball Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Evening Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Cocktail Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Ball Gowns</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Homecoming Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Little Black Dresses </a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Quinceanera Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   </ul>
  </div>
  <div class="menu-cont-list" style="display: none;">
   <ul>
   <li>
    <h3><a href="#">Dresses</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Clubwear</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Leggings</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Lingeries</a></h3>
    <div class="menu-list-link">
    <a title="" #">Bras</a>
    <span class="long-string">|</span>
    <a title="" href="#">Babydolls</a>
    <span class="long-string">|</span>
    <a title="" href="#">Panties</a>
    <span class="long-string">|</span>
    <a title="" href="#">Hosiery</a>
    </div>
   </li>
   <li>
    <h3><a href="#">Swimwear</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Activewear</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   </ul>
  </div>
  <div class="menu-cont-list" style="display: none;">
   <ul>
   <li>
    <h3><a href="#">Heels</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Pumps</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Boots</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   </ul>
  </div>
  <div class="menu-cont-list" style="display: none;">
   <ul>
   <li>
    <h3><a href="#">Evening Bags</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Hats & Scarves</a></h3>
    <div class="menu-list-link">
    <a title="" href="#">Womens Hats</a>
    <span class="long-string">|</span>
    <a title="" href="#">Womens Scarves</a>
    </div>
   </li>
   <li>
    <h3><a href="#">Jewelry</a></h3>
    <div class="menu-list-link">
    <a title="" href="#">Earrings</a>
    <span class="long-string">|</span>
    <a title="" href="#">Necklaces</a>
    <span class="long-string">|</span>
    <a title="" href="#">Rings</a>
    </div>
   </li>
   <li>
    <h3><a href="#">Watches</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   </ul>
  </div>
  <div class="menu-cont-list" style="display: block;">
   <ul>
   <li>
    <h3><a href="#">Wigs & Hair extensions</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Fascinators</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Makeup Tools</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Spas & Massagers</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   <li>
    <h3><a href="#">Health & Fitness</a></h3>
    <div class="menu-list-link">
    </div>
   </li>
   </ul>
  </div>
  </div>
 </div><!--二级菜单内容-->
 </div>
若提示有错误，请刷新网页
</body>
</html>

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

js实现仿京东2级菜单效果(带延时功能)

- Author -

企鹅

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

Javascript 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
jQuery cdn使用介绍
May 08 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
jQuery-1.9.1源码分析系列（十）事件系统之事件包装
Nov 20 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
js实现的早期滑动门菜单效果代码
Aug 27 #Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 #Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 #Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
Android Gradle(1) 动态权限(1) redis(3) Spring Security(2) Kotlin(1) AOP(2) 记事本(1) Navicat(1) maven(2) V Rising(1)
You might like
php使用qr生成二维码的示例分享
2014/01/20 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
HTTP状态代码以及定义（解释）
2007/02/02 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Blank NYC官网：夹克、牛仔裤等
2020/12/16 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
2014年政风行风工作总结
2014/11/22 职场文书
初中中等生评语
2014/12/29 职场文书
社团招新宣传语
2015/07/13 职场文书
导游词之唐山景点
2019/12/18 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
苹果发布了MagSafe固件更新，可以不外接电源实现最高7.5W充电
2022/04/21 数码科技