js實(shí)現(xiàn)仿京東2級(jí)菜單效果(帶延時(shí)功能)
更新時(shí)間：2015年08月27日 11:12:50 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)仿京東2級(jí)菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性及延時(shí)顯示的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)仿京東2級(jí)菜單效果。分享給大家供大家參考。具體如下：
這里介紹js實(shí)現(xiàn)仿京東2級(jí)菜單效果代碼，帶有延時(shí)功能，操作上更加舒適自然。
先來(lái)看看運(yùn)行效果截圖：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/
具體代碼如下：
<!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>仿京東網(wǎng)站的2級(jí)菜單導(dǎo)航</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");//導(dǎo)航模塊區(qū)
menu();//執(zhí)行展開(kāi)二級(jí)菜單函
//setTimeout(menu(),1000)
}
var menu=function()
{
menuItem=$(".menu-item li");//選擇導(dǎo)航列表
menuItem.each(menu_each);/*導(dǎo)航菜單菜單*/
menuItem.mouseleave(menu1_leave);/*導(dǎo)航菜單菜單*/
$(".mod-menu").mouseleave(menu2_mouse_leave);
}//展開(kāi)二級(jí)菜單
var menu_each=function()
{
var _index=$(this).index();//獲取當(dāng)前選擇菜單列表的索引
$(this).mouseenter(menu_mouse_enter);
}
var menu_mouse_enter=function()
{
l = $(this);//獲取當(dāng)前鼠標(biāo)滑過(guò)的列表的頂部坐標(biāo)
t=setTimeout("menu_mouse_enter_show()", 300)
}
function menu_mouse_enter_show()
{
// alert(y1);
var y = l.position().top+1;//獲取當(dāng)前鼠標(biāo)滑過(guò)的列表的頂部坐標(biāo)
$(".menu-cont").show();
$(".menu-cont").css("top",y);//需要顯示的對(duì)應(yīng)索引內(nèi)容
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>簡(jiǎn)單的2級(jí)菜單導(dǎo)航</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><!--一級(jí)菜單列表-->
<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><!--二級(jí)菜單內(nèi)容-->
</div>
若提示有錯(cuò)誤，請(qǐng)刷新網(wǎng)頁(yè)
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 純js仿淘寶京東商品放大鏡功能
- Javascript仿京東放大鏡的效果
- js仿京東輪播效果 選項(xiàng)卡套選項(xiàng)卡使用
- js實(shí)現(xiàn)京東輪播圖效果
- JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
- 利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
- javascript仿京東導(dǎo)航左側(cè)分類(lèi)導(dǎo)航下拉菜單效果
- 基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
- 原生js仿淘寶網(wǎng)商品放大鏡效果
- JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法分析
相關(guān)文章
JQuery獲取樣式中的background-color顏色值的問(wèn)題
用JQuery獲取樣式中的background-color的值時(shí)發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，經(jīng)搜索找到了下段代碼可解決此問(wèn)題，感興趣的朋友可以參考下2013-08-08
jQuery+HTML5加入購(gòu)物車(chē)代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery+HTML5加入購(gòu)物車(chē)的實(shí)現(xiàn)代碼，功能很齊全，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧，其實(shí)實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
Jquery為a標(biāo)簽的href賦值實(shí)現(xiàn)代碼
Jquery為a標(biāo)簽的href賦值實(shí)現(xiàn)思路如下：先獲取選中項(xiàng)的值在使用attr屬性為href賦值,有類(lèi)似需求的朋友可以參考下哈，希望可以幫助到你2013-05-05
基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞
這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法示例
這篇文章主要介紹了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained用法,結(jié)合實(shí)例形式分析了jQuery多級(jí)聯(lián)動(dòng)下拉插件chained的功能與基本使用技巧,需要的朋友可以參考下2016-08-08
jQueryUI寫(xiě)一個(gè)調(diào)整分類(lèi)的拖放效果實(shí)現(xiàn)代碼
最近，想用jQuery做一個(gè)網(wǎng)頁(yè)的樹(shù)目錄結(jié)構(gòu)，并且可以使用鼠標(biāo)拖動(dòng)調(diào)整選項(xiàng)的位置。我在網(wǎng)上找了一下插件，基本上看了好幾款比較著名的，都覺(jué)得代碼太復(fù)雜了或者界面太丑了等各種不符合我的要求2012-05-05
jQuey將序列化對(duì)象在前臺(tái)顯示地實(shí)現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對(duì)象在前臺(tái)顯示地的幾種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2016-12-12
如何從jQuery的ajax請(qǐng)求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請(qǐng)求，ajax請(qǐng)求中刪除X-Requested-With的方法如下，感興趣的朋友可以參考下2013-12-12
使用jquery動(dòng)態(tài)加載javascript以減少服務(wù)器壓力
如果您要?jiǎng)?chuàng)建一個(gè)web2.0的應(yīng)用程序，那么你的網(wǎng)頁(yè)會(huì)包括大量的JavaScript文件，這些可能會(huì)拖慢您的網(wǎng)頁(yè)。因此，動(dòng)態(tài)加載JavaScript代碼到您的網(wǎng)頁(yè)是一個(gè)好主意，即只有當(dāng)實(shí)用他們的時(shí)候加載它們。這種策略可以幫助你減少你的網(wǎng)頁(yè)的加載時(shí)間2012-10-10