jQuery怎么实现Nav导航菜单效果
导读：本文共1949.5字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 先看效果：鼠标悬浮时菜单项向上移动成蓝底白字，点击之后底部会有蓝条表示当前选中项。页面代码，菜单的每一项都是一个 div ，其中包括一个 ul 用来放置显示文字等，另一个 div 则是底部的蓝条，需要给第一项和最后一项设置不同的 class ，样式需要用到：<divid="nav"> <divclass="na... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。先看效果：
鼠标悬浮时菜单项向上移动成蓝底白字，点击之后底部会有蓝条表示当前选中项。
页面代码，菜单的每一项都是一个 div ，其中包括一个 ul 用来放置显示文字等，另一个 div 则是底部的蓝条，需要给第一项和最后一项设置不同的 class ，样式需要用到：
<divid="nav"> <divclass="navItemindexNavItem"> <ulclass="navUl"> <li>首页</li> <liclass="hoverLi">首页</li> </ul> <divclass="highlighterselectedNav"></div> </div> <divclass="navItem"> <ulclass="navUl"> <li>A</li> <liclass="hoverLi">A</li></ul> <divclass="highlighter"></div> </div> <divclass="navItemlastNavItem"> <ulclass="navUl"> <li>A</li> <liclass="hoverLi">A</li> </ul> <divclass="highlighter"></div> </div> <divid="logoutNavItem"class="navItemlogoutNavItemlastNavItem"> <ulclass="navUl"> <li>退出</li> <liclass="hoverLi">退出</li> </ul> <divclass="highlighter"></div> </div></div>
样式，主要就是每个菜单项的左右边框的设置以及 ul 和 li 的位置设置：
*{padding:0;margin:0;}body{background-color:#fffff3;font:12px/1.6emHelvetica,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:2pxsolidrgb(255,255,255);border-left:2pxsolidrgb(255,255,255);overflow:hidden;font-weight:bold;}.indexNavItem{border-left:4pxsolidrgb(255,255,255);margin-left:10px;}.lastNavItem{border-right:4pxsolidrgb(255,255,255);}.logoutNavItem{float:right;width:120px;margin-right:10px;border-left:4pxsolidrgb(255,255,255);}.navUl{position:relative;height:100px;width:100%;border-bottom:5pxsolidrgb(2,159,212);}.navUlli{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');});}) </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
jQuery怎么实现Nav导航菜单效果的详细内容，希望对您有所帮助，信息来源于网络。