jQuery+css實現(xiàn)的藍(lán)色水平二級導(dǎo)航菜單效果代碼

更新時間：2015年09月11日 16:39:54 作者：企鵝

這篇文章主要介紹了jQuery+css實現(xiàn)的藍(lán)色水平二級導(dǎo)航菜單效果代碼,通過簡單的jQuery操作鼠標(biāo)事件實現(xiàn)頁面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下

本文實例講述了jQuery+css實現(xiàn)的藍(lán)色水平二級導(dǎo)航菜單效果。分享給大家供大家參考。具體如下：

這是一款藍(lán)色經(jīng)典的jQuery+CSS實現(xiàn)水平二級導(dǎo)航菜單，相信你會喜歡的，藍(lán)色，超級經(jīng)典的一種風(fēng)格，從其它網(wǎng)站上扣下來的，我認(rèn)為很不錯，趕緊分享給大家吧。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-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=gb2312" />
<title>藍(lán)色水平二級導(dǎo)航菜單</title>
<style>
*{
 font-size:12px; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
body{
 margin:0; padding:0; background:white;
}
img{
 border:0;
}
a:link,a:visited,a:active{
 text-decoration:none;
}
a:hover{
 text-decoration:underline;
}
/********** header **********/
.header{
 width:100%; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; text-align:center;
}
.header .padder{
 width:910px; margin:0 auto; background:url(images/header_bg.gif) #ffffff repeat-x 0 0; padding-bottom:4px; text-align:left;
}
.header .padder .nav{
 background:url(images/vertical.gif) repeat-x 0 -36px; height:36px;
}
.header .padder .navLeftBg{
 background:urlvertical.gif) no-repeat 0 0; height:36px;
}
.header .padder .navRightBg{
 background:url(images/icons.gif) no-repeat right -146px; height:36px;
}
.header .padder .nav .mainNav{
 padding-left:24px; position:absolute;
}
.header .padder .nav .mainNav a:link,.header .padder .nav .mainNav a:visited,.header .padder .nav .mainNav a:active{
 width:90px; height:36px; display:inline-block; text-align:center; color:#ffffff; font-weight:bold; font-size:14px; line-height:36px; margin-left:11px;
}
.header .padder .nav .mainNav a:hover{
 text-decoration:none;
}
.header .padder .nav .mainNav a.actived:link,.header .padder .nav .mainNav a.actived:visited,.header .padder .nav .mainNav a.actived:hover,.header .padder .nav .mainNav a.actived:active{
 background:url(images/icons.gif) no-repeat 0 -27px; color:#000000;
}
.header .padder .secondNav{
 line-height:21px; text-align:left;
}
.header .padder .secondNav a{
 color:#266392; display:inline-block; padding:0 8px; margin-right:19px;
}
.header .padder .secondNav a.actived{
 font-weight:bold;
}
.header .padder .secondNav .subNav1{
 display:none;
}
.header .padder .secondNav .subNav2{
 padding-left:150px;display:none;
}
.header .padder .secondNav .subNav3{
 padding-left:250px;display:none;
}
.header .padder .secondNav .subNav4{
 padding-left:350px;display:none;
}
.header .padder .secondNav .subNav5{
 padding-left:450px;display:none;
}
.header .padder .secondNav .subNav6{
 padding-left:550px;display:none;
}
.header .padder .secondNav .subNav7{
 padding-left:650px;display:none;
}
</style>
<script language="javascript" type="text/javascript" src="jquery1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
 $(".mainNav a").mouseover(function(){
  $(".mainNav a").attr("class","");
  $("#"+this.id).attr("class","actived");
  var currentMenuNo = parseInt(this.id.substring(1));
  $(".secondNav div").each(function(){
   $(this).hide();
   $("#subNav"+currentMenuNo).show();
  });
 });
});
</script>
</head>
<body>
<div class="header">
 <div class="padder">
  <div class="nav">
   <div class="navLaftBg">
    <div class="navRightBg">
     <div class="mainNav">
      <a href="#" id="n1" class="actived">首頁</a>
      <a href="#" id="n2">ASP源碼</a>
      <a href="#" id="n3">PHP源碼</a>
      <a href="#" id="n4">.NET源碼</a>
      <a href="#" id="n5">HTML源碼</a>
      <a href="#" id="n6">工具軟件</a>
      <a href="#" id="n7">腳本源碼</a>
     </div>
    </div>
   </div>
  </div>
  <div class="secondNav">
   <div id="subNav2" class="subNav2">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
   <div id="subNav3" class="subNav3">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
   <div id="subNav4" class="subNav4">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
   <div id="subNav5" class="subNav5">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
   <div id="subNav6" class="subNav6">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
   <div id="subNav7" class="subNav7">
    <a href="#" class="actived">社區(qū)論壇</a>
    <a href="#">全站CMS</a>
    <a href="#">企業(yè)網(wǎng)站</a>
   </div>
  </div>
 </div>
</div>
</body>
</html>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章: