当前位置：A5下载 > 编程开发 > 网站开发 > js实现仿京东2级菜单效果(带延时功能)

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

时间：2015-08-27 16:09作者：yezheng人气：148

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

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

先来看看运行效果截图：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>仿京东网站的2级菜单导航</title>

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>

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>

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

<ul>

<li>

<h3><a href="#">Wedding Dresses</a></h3>

</li>

<li>

<h3><a href="#">Bridesmaid Dresses</a></h3>

</li>

<li>

<h3><a href="#">Wedding Party Dresses</a></h3>

<a title="" href="#">Mother of the Brides Dresses</a>

<a title="" href="#">Flower Girl Dresses</a>

<a title="" href="#">Wedding Guest Dresses</a>

</div>

</li>

<li>

<h3><a href="#">Wedding Accessories</a></h3>

<a title="" #">Fabric Swatch</a>

<a title="" href="#">Bridal Lingerie</a>

<a title="" href="#">Wedding Flowers</a>

<a title="" href="#">Wedding Petticoats</a>

</div>

</li>

</ul>

</div>

<ul>

<li>

<h3><a href="#">Prom Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Military Ball Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Evening Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Cocktail Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Ball Gowns</a></h3>

</div>

</li>

<li>

<h3><a href="#">Homecoming Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Little Black Dresses </a></h3>

</div>

</li>

<li>

<h3><a href="#">Quinceanera Dresses</a></h3>

</div>

</li>

</ul>

</div>

<ul>

<li>

<h3><a href="#">Dresses</a></h3>

</div>

</li>

<li>

<h3><a href="#">Clubwear</a></h3>

</div>

</li>

<li>

<h3><a href="#">Leggings</a></h3>

</div>

</li>

<li>

<h3><a href="#">Lingeries</a></h3>

<a title="" href="#">Babydolls</a>

<a title="" href="#">Panties</a>

<a title="" href="#">Hosiery</a>

</div>

</li>

<li>

<h3><a href="#">Swimwear</a></h3>

</div>

</li>

<li>

<h3><a href="#">Activewear</a></h3>

</div>

</li>

</ul>

</div>

<ul>

<li>

<h3><a href="#">Heels</a></h3>

</div>

</li>

<li>

<h3><a href="#">Pumps</a></h3>

</div>

</li>

<li>

<h3><a href="#">Boots</a></h3>

</div>

</li>

</ul>

</div>

<ul>

<li>

<h3><a href="#">Evening Bags</a></h3>

</div>

</li>

<li>

<h3><a href="#">Hats & Scarves</a></h3>

<a title="" href="#">Womens Hats</a>

<a title="" href="#">Womens Scarves</a>

</div>

</li>

<li>

<h3><a href="#">Jewelry</a></h3>

<a title="" href="#">Earrings</a>

<a title="" href="#">Necklaces</a>

<a title="" href="#">Rings</a>

</div>

</li>

<li>

<h3><a href="#">Watches</a></h3>

</div>

</li>

</ul>

</div>

<ul>

<li>

<h3><a href="#">Wigs & Hair extensions</a></h3>

</div>

</li>

<li>

<h3><a href="#">Fascinators</a></h3>

</div>

</li>

<li>

<h3><a href="#">Makeup Tools</a></h3>

</div>

</li>

<li>

<h3><a href="#">Spas & Massagers</a></h3>

</div>

</li>

<li>

<h3><a href="#">Health & Fitness</a></h3>

</div>

</li>

</ul>

</div>

</div>

</div>

若提示有错误，请刷新网页

</body>

</html>

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

标签实现,京东,2级,菜单,效果,延时,功能,本文,实例,讲述了

A5站长下载站

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

相关推荐

相关下载

网友评论

热门阅览

最新排行