本文實例講述了jquery+css實現的紅色線條橫向二級菜單效果。分享給大家供大家參考。具體如下：
這是一款帶導航的菜單，當前是哪一項菜單，會很個性的顯示出來，鼠標放上后會顯示菜單缺口，挺有意思的吧，希望大家喜歡。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-css-red-color-2row-nav-style-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><title>css+js紅色線條橫向二級菜單</title><style>body {font-family:/5B8B/4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}li{list-style-type:none;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;}#nav{ background:url('images/nav_li_bg.gif') repeat-x top; height:37px; position:relative;width:988px; margin:20px auto;}#nav .l{ background:url('images/nav_li_left.gif') no-repeat top; height:37px;width:78px; float:left}#nav .r{width:82px;background:url('images/nav_li_rights.gif') no-repeat right top;height:37px;float:left;}#nav li { float:left;}#nav li .v a{ width:138px;height:37px; line-height:32px; display:block; color:#FFF;float:left;font-weight:bold;text-decoration:none;text-align:center;}#nav li .v a:hover,#nav li .v .sele{width:138px;background:url('images/nav_li_hover.gif') no-repeat top;color:#fff;height:37px;line-height:37px;color:#d11515;}.kind_menu { height:30px;line-height:30px;vertical-align:middle; position:absolute;top:37px;left:0;text-align:left; display:none;color:#333;font-size:12px;}.kind_menu a {color:#333; background:url('images/sub_dot.gif') no-repeat left 14px;float:left; text-align:center;padding:0 10px;font-size:12px;text-decoration:none;}.kind_menu a:hover {color:#000;text-decoration:none;}#Layer1{width:400px;left:60px;}#Layer2{width:400px;left:200px;}#Layer3{width:500px;left:300px;}#Layer4{width:400px;left:400px;}#Layer5{width:400px;left:auto;right:120px;}#Layer6{width:560px;left:auto;right:60px;}</style><SCRIPT src="jquery-1.6.2.min.js" type="text/javascript"></SCRIPT></head><body><DIV id=nav><DIV class=l></DIV><UL class=c> <LI><SPAN class=v><A href="#" target="_blank">網站首頁</A></SPAN> <DIV class=kind_menu id="Layer1">歡迎訪問,我們為您提供最優質的網絡營銷服務! </DIV></LI> <LI><SPAN class=v><A href="#">武林網</A></SPAN> <DIV class=kind_menu id="Layer2"> <A href="#">腳本下載</A> <A href="#">腳本教程</A> </DIV></LI> <LI><SPAN class=v><A href="#">導航條</A></SPAN> <DIV class=kind_menu id="Layer3"> <A href="#">英文域名</A> <A href="#">中文域名</A> <A href="#">通用網址</A> <A href="#">源碼下載</A> <A href="#">域名交易</A> <A href="#">域名幫助</A> <A href="#">智能加速</A> </DIV></LI> <LI><SPAN class=v><A href="#">電子商務</A></SPAN> <DIV class=kind_menu id="Layer4"> <A href="#">網絡營銷</A> <A href="#">源碼下載</A> <A href="#">網絡營銷</A> <A href="#">網頁特效</A> </DIV></LI> <LI><SPAN class=v><A href="#">網絡營銷</A></SPAN> <DIV class=kind_menu id="Layer5"> <A href="#">網絡營銷</A> <A href="#">網絡營銷</A> <A href="#">網絡營銷</A> <A href="#">網頁特效代碼</A> </DIV></LI> <LI><SPAN class=v><A href="#">關于我們</A></SPAN> <DIV class=kind_menu id="Layer6"> <A href="#">網絡營銷</A> <A href="#">源碼下載</A> <A href="#">網絡營銷</A> <A href="#">網頁特效</A> </DIV></LI> </UL> <DIV class=r></DIV></DIV><!--nav--><SCRIPT type="text/javascript">var site_url = window.location.href.toLowerCase();switch (true) { default : $("#nav li").attr("class",""); $("#nav li").eq(0).attr("class","nav_lishw"); $(".nav_lishw .v a").attr("class","sele"); $(".nav_lishw .kind_menu").show();}$("#nav li").hover(function(){ clearTimeout(setTimeout("0")-1); $("#nav .kind_menu").hide(); $("#nav li .v .sele").attr("class","shutAhover"); $(this).attr("id","nav_hover") $("#nav_hover .v a").attr("class","sele"); $("#nav_hover .kind_menu").show(); },function(){ if($(this).attr("class") != "nav_lishw"){ $("#nav_hover .v .sele").attr("class",""); $("#nav_hover .kind_menu").hide(); } $(this).attr("id","") $("#nav li .v .shutAhover").attr("class","sele"); setTimeout(function(){ $(".nav_lishw .kind_menu").show(); $(".nav_lishw .v a").attr("class","sele"); },50); });</SCRIPT></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
