首页
所有分类
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 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
JavaScript高级程序设计（第3版）学习笔记12 js正则表达式
Oct 11 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jquery动画效果学习笔记（8种效果）
Nov 13 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
DNS服务器(2) FTP服务器(1) 粒子对撞机(1) 国际空间站(1) 夸克(1) .NET Framework(2) IIS7(1) 磁盘分区(1) 对撞机(1) 界面设计(1)
You might like
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
img的onload的另类用法
2008/01/10 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Javascript动画效果（4）
2016/10/11 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JS中的多态实例详解
2017/10/15 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
JS实现选项卡插件的两种写法（jQuery和class）
2020/12/30 jQuery
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python的标准模块包json详解
2017/03/13 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Smashbox英国官网：美国知名彩妆品牌
2017/11/13 全球购物
毕业自荐信
2013/12/16 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
学生党员检讨书范文
2014/12/27 职场文书
停电调休通知
2015/04/16 职场文书
六年级数学教学反思
2016/02/16 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android