jQuery 简单漂亮的 Nav 导航菜单

来源:互联网 时间:1970-01-01

自己写的一个简单的导航菜单,先看效果:

鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。

页面代码,菜单的每一项都是一个 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');

});

})

 


相关阅读:
Top