jQuery實現簡單漂亮的Nav導覽功能表效果，

jQuery實現簡單漂亮的Nav導覽功能表效果，

本文執行個體講述了jQuery實現簡單漂亮的Nav導覽功能表效果。分享給大家供大家參考，具體如下：

自己寫的一個簡單的導覽功能表，先看效果：

滑鼠懸浮時功能表項目向上移動成藍底白字，點擊之後底部會有藍條表示當前選中項。

頁面代碼，菜單的每一項都是一個 div ，其中包括一個 ul 用來放置顯示文字等，另一個 div 則是底部的藍條，需要給第一項和最後一項設定不同的 class ，樣式需要用到：

<div id="nav">　　<div class="navItem indexNavItem">　　　　<ul class="navUl">　　　　　　<li>首頁</li>　　　　　　<li class="hoverLi">首頁</li>　　　　</ul>　　　　<div class="highlighter selectedNav"></div>　　</div>　　<div class="navItem">　　　　<ul class="navUl">　　　　　　<li>A</li>　　　　　　<li class="hoverLi">A</li>    </ul>　　　　<div class="highlighter"></div>　　</div>　　<div class="navItem lastNavItem">　　　　<ul class="navUl">　　　　　　<li>A</li>　　　　　　<li class="hoverLi">A</li>　　　　</ul>　　　　<div class="highlighter"></div>　　</div>　　<div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">　　　　<ul class="navUl">　　　　　　<li>退出</li>　　　　　　<li class="hoverLi">退出</li>　　　　</ul>　　　　<div class="highlighter"></div>  　　</div></div>

樣式，主要就是每個功能表項目的左右邊框的設定以及 ul 和 li 的位置設定：

*{  padding: 0;  margin: 0;}body{  background-color: #fffff3;  font: 12px/1.6em Helvetica, Arial, sans-serif;}ul,li{  list-style: none;}#nav{  text-align: center;  height: 50px;  font-size: 10px;  line-height: 30px;  background-color: #F0E6DB;  margin-bottom: 10px;}.navItem{  cursor: pointer;  position: relative;  float: left;  width: 100px;  height: 50px;  font-size: 15px;  border-right: 2px solid rgb(255,255,255);  border-left: 2px solid rgb(255,255,255);  overflow: hidden;  font-weight:bold;}.indexNavItem{  border-left: 4px solid rgb(255,255,255);  margin-left: 10px;}.lastNavItem{  border-right: 4px solid rgb(255,255,255);}.logoutNavItem{  float: right;  width: 120px;  margin-right: 10px;  border-left: 4px solid rgb(255,255,255);}.navUl{  position: relative;  height: 100px;  width: 100%;  border-bottom: 5px solid rgb(2,159,212);}.navUl li{  height: 50px;  line-height: 50px;}.highlighter{  position: absolute;  bottom: 0;  height: 5px;  width: 100%;}.selectedNav{  background-color: #029FD4;}.hoverLi{  background-color: #029FD4;  color: #ffffff;}

接下來就是給菜單編寫懸浮和單擊事件的 js 代碼了，懸浮時將 ul 上移 li 的高度，滑鼠移開後再恢複，點擊之後就是給藍條的 div 添加樣式即可：

$(function() {  $(".navItem").hover(function() {    $(this).children("ul").animate({      top: "-50px"    }, 100);  }, function() {    $(this).children("ul").animate({      top: "0px"    }, 100);  });  $(".navItem").click(function(event) {    $(this).siblings().children('.highlighter').removeClass('selectedNav');    $(this).children('.highlighter').addClass('selectedNav');  });})