jQuery实现了一个简单而漂亮的导航导航菜单效果。
这篇文章演示了jQuery的简单而漂亮的导航导航菜单的效果：我写的一个简单的导航菜单，先看看效果：
鼠标暂停菜单项移动到蓝色和白色，然后点击底部将有一个蓝色代表当前选定的项目。
页面代码，每个菜单项都是div，其中包括一个显示文本的UL等，另一个div是底部的蓝色条。它需要为第一个和最后一个项目设置不同的类。
U3000 U3000
U3000 U3000 U3000 U3000
首页
首页
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000
U3000 U3000
U3000 U3000 U3000 U3000
一
一
U3000 U3000 U3000 U3000
U3000 U3000
U3000 U3000
U3000 U3000 U3000 U3000
一
一
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000
U3000 U3000
U3000 U3000 U3000 U3000
出口
出口
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000
样式，主要是设置每个菜单项的左右两侧，以及UL和李的位置：
*
{
填充：0；
保证金：0；
}
体
{
背景颜色：# fffff 3；
字体：12px / 1.6em Helvetica，Arial，无衬线字体；
}
UL
列表样式：无；
}
#资产净值
{
文本对齐：中心；
身高：50px；
字体大小：10px；
行高：30px；
背景颜色：# f0e6db；
边距：10px；
}
navitem。
{
光标：指针；
职位：相对；
浮点数：左；
宽度：100px；
身高：50px；
字体大小：15px；
边境：2px固体RGB（255255255）；
左边界：2px固体RGB（255255255）；
溢出：隐藏；
字体粗细：粗体；
}
indexnavitem。
{
左边界：4px固体RGB（255255255）；
左：10px保证金；
}
lastnavitem。
{
边境：4px固体RGB（255255255）；
}
logoutnavitem。
{
浮子：右边；
宽度：120px；
右边距：10px；
左边界：4px固体RGB（255255255）；
}
navul。
{
职位：相对；
身高：100px；
宽度：100%；
底部边框：5px固体RGB（2159212）；
}
navUl Li。
{
身高：50px；
行高：50px；
}
高亮。
{
位置：绝对；
底部：0；
身高：5px；
宽度：100%；
}
selectednav。
{
背景颜色：# 029fd4；
}
hoverli。
{
背景颜色：# 029fd4；
颜色：# ffffff；
}
下一步是编写用于挂起并单击事件到菜单的js代码。当UL被解除时，李的高度被移动，鼠标被移除。然后单击后将它添加到蓝色条的div中。
$（函数（）{（））
$（。navitem）。Hover（function（）{）
$（this）。
上图：50px
}，100）；
}函数（）{（）
$（this）。
上图：0px
}，100）；
}）；
$（。navitem）。Click（函数（事件）{
$（这），兄弟姐妹（）。孩子（'笔'），RemoveClass（'selectednav）；
$（这）。儿童（'笔'），AddClass（'selectednav）；
}）；
}）
关于jQuery相关内容的更多读者感兴趣的读者可以看到特别站：jQuery切换效果和技巧摘要
希望本文能对jQuery程序设计有所帮助。