本文实例讲述了jQuery实现简单漂亮的航行导航菜单效果。分享给大家供大家参考，具体如下：

自己写的一个简单的导航菜单，先看效果：

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

页面代码，菜单的每一项都是一个div，其中包括一个保险商实验所用来放置显示文字等，另一个差异则是底部的蓝条，需要给第一项和最后一项设置不同的同学们，样式需要用到：

div id=' nav ' div class=' navItem indexNavItem ' ul class=' navUl ' Li首页/Lili class=' HeaLTH Li '首页/Li/uldiv class='突出显示选定的nav '/div/div class=' Navi Tem ' ul class=' Navul ' LiA/Lili class=' HewLi ' a/Li/uldiv class='突出显示er '/div/div class=' naviTem last naviTem ' ul class=' Navul ' LiA/Lili class='突出显示er '/div/div id=' LogoutnaviTem ' class=' naviTem LogoutnaviTem最后一个naviTem ' ul class=' nav退出/Lili class=' HeaLTH Li '退出/Li/uldiv class=' highlight er '/div/div/div样式，主要就是每个菜单项的左右边框的设置以及保险商实验所和里的位置设置：

* { padd : 0；保证金： 0；}车身{底色： # fffff 3；Arial，font: 12px/1.6em Helvetica，无衬线字体；}ul、李{列表式：无；} # nav { text-align : center高度： 50pxfont-size : 10px线高： 30px背景-颜色： # F0E6DB边距-底部： 10px}.navItem { cursor:指针；相对位置：向左浮动：宽度： 100像素；高度： 50pxfont-size : 15px右边框： 2px纯色rgb(255，255，255)；边框-左侧： 2px纯色rgb(255，255，255)；飞越：隐藏；字体粗细：加粗；}.indexNavItem {边框-左侧： 4px纯色rgb(255，255，255)；左边距left: 10px}。lastNavItem {边框-右侧： 4px纯色rgb(255，255，255)；}.logoutNavItem{ float:右侧；宽度： 120像素；右边距： 10px边框-左侧： 4px纯色rgb(255，255，255)；}.navUl{ position:相对；高度： 100像素；宽度： 100%;边框-底部： 5px纯色rgb(2，159，212)；}.navUl li { height: 50px线高： 50px}.荧光笔{ position : absolutebotom : 0；高度： 5px宽度： 100%;}.所选nav {底色： # 029 fd4}.悬停李{底色： # 029 fd4color: # ffffff}接下来就是给菜单编写悬浮和单击事件的射流研究…代码了，悬浮时将保险商实验所上移里的高度，鼠标移开后再恢复，点击之后就是给蓝条的差异添加样式即可：

$(function() { $(').导航项目').悬停(function() { $(this)).儿童(' ul ').动画({ top: '-50px' }，100)；}，function() { $(this).儿童(' ul ').动画({ top: '0px' }，100)；});$('.导航项目').click(函数(事件)){ $(this).兄弟姐妹()。孩子们。荧光笔')。移除类(“选定的导航”)；$(这个)。孩子们。荧光笔')。添加类别(“选定的导航”)；});})更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。