jQuery實現(xiàn)仿美橙互聯(lián)兩級導航菜單的方法
來源：易賢網 閱讀：815 次 日期：2015-03-11 15:02:00
溫馨提示：易賢網小編為您整理了“jQuery實現(xiàn)仿美橙互聯(lián)兩級導航菜單的方法”,方便廣大網友查閱！

這篇文章主要介紹了jQuery實現(xiàn)仿美橙互聯(lián)兩級導航菜單的方法,實例分析了jQuery操作css及setTimeout等實現(xiàn)導航菜單的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)仿美橙互聯(lián)兩級導航菜單的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

代碼如下:

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

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>仿美橙互聯(lián)導航菜單</title>

<style>

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

#nav_wrap{margin:20px auto;}

#nav li{ text-align:center;font-size:12px;}

#nav_wrap { width:960px; overflow:hidden; }

#nav{ background:url(/jscss/demoimg/201011/nav_bg.gif) repeat-x; height:39px; position:relative; width:950px; margin:0 auto; }

#nav .l{ background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat 0px 0px; height:39px; width:2px; float:left}

#nav .r{ background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat -4px 0px; height:39px; width:2px; float:right}

#nav .bt_qnav { float:right; }

#nav .bt_qnav a{ width:31px; height:29px; line-height:39px;display:block;padding:9px 2px 0 0;}

#nav .c{ float:left;margin:0;padding:0}

#nav li { float:left; list-style:none; }

#nav li .v a{ width:83px;height:39px; line-height:33px; display:block; color:#FFF; background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat -87px 6px; float:left; font-family:"Microsoft Yahei";}

#nav li .v a:hover,#nav li .v .sele{background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat 0px -47px; color:#116406; line-height:42px; font-size:14px}

#nav .kind_menu { height:30px;*height:29px; line-height:30px;vertical-align:middle; position:absolute; top:37px;*top:39px; left:70px; width:880px; text-align:left; display:none; background:url(/jscss/demoimg/201011/nav_bg1.gif) repeat-x bottom; color:#656565; }

#nav .kind_menu a {color:#656565; float:left; text-align:center; width:90px; font-family:Arial, Helvetica, sans-serif;}

#nav .kind_menu a:hover { color:#ff4300; background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat 1px -91px;*background:url(/jscss/demoimg/201011/navnbg.gif) no-repeat 1px -93px;}

#nav .kind_menu span { font-size:10px; color:#cecece; line-height:30px; *line-height:26px; float:left }

#tmenu{ background:url(/jscss/demoimg/201011/nav_bg1.gif) repeat-x bottom; height:28px; border-bottom:1px solid #eee; }

</style>

<SCRIPT src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></SCRIPT>

</head>

<body style="text-align:center">

<DIV id=nav_wrap>

<DIV id=nav>

<DIV class=l></DIV>

<UL class=c>

<LI><SPAN class=v><A href="#" target="_blank">首頁</A></SPAN>

<DIV class=kind_menu style="LEFT: 20px">歡迎訪問美橙互聯(lián)! </DIV></LI>

<LI><SPAN class=v><A href="#">特惠套餐</A></SPAN>

<DIV class=kind_menu style="LEFT: 40px"><A

href="#">電信套餐</A> <SPAN>|</SPAN> <A

href="#">雙線套餐</A> </DIV></LI>

<LI><SPAN class=v><A href="#">域名頻道</A></SPAN>

<DIV class=kind_menu><A href="#">英文域名</A>

<SPAN>|</SPAN> <A href="#">中文域名</A>

<SPAN>|</SPAN> <A href="#">通用網址</A> <SPAN>|</SPAN>

<A href="#">價格列表</A>

<SPAN>|</SPAN> <A href="#" target=_blank>域名交易</A>

<SPAN>|</SPAN> <A href="#">相關幫助</A>

<SPAN>|</SPAN> <A href="#">智能加速</A> </DIV></LI>

</UL>

<DIV class=r></DIV>

</DIV><!--nav-->

<DIV id=tmenu></DIV>

</DIV><!--nav_wrap-->

<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程序設計有所幫助。

更多信息請查看IT技術專欄

更多信息請查看腳本欄目

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權所有:易賢網