本文實(shí)例講述了jquery實(shí)現(xiàn)仿京東2級(jí)菜單效果。分享給大家供大家參考。具體如下：
這里介紹js實(shí)現(xiàn)仿京東2級(jí)菜單效果代碼，帶有延時(shí)功能，操作上更加舒適自然。
先來(lái)看看運(yùn)行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
