jQuery实现类似标签风格的导航菜单效果代码

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款基于jquery实现的类似拉环标签样式的网站导航菜单，引入了jquery，若运行代码后左上角提示错误，刷新页面即可正常。你可点击菜单查看到整体的效果。点击后对应菜单项下移，可扩展成二级菜单，也可以改成拉环标签布局，感兴趣的朋友自己研究吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejquery标签式导航菜单/title脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(')).menubt ').单击(function(){ $(this)).blur()；if($(this).兄弟姐妹(' div ').CSS(' display ')==' none '){ $(。menucount :可见').slideUp(200，函数(){ $(this)).父项()。css('zIndex '，' 100 ')；});$(这个)。兄弟姐妹(' div ').slideDown(200，函数(){ $(this)).父项()。css('zIndex '，' 10 ')；});$(这个)。兄弟姐妹(' div ').attr('id '，' # BoxOpen ')；} else { $(this).兄弟姐妹(' div ').slideUp(200，函数(){ $(this)).父项()。css('zIndex '，' 100 ')；});} })})/脚本样式类型=' text/CSS '正文{ margin :0划水：0;}.menubox { position:absolute宽度：100%;z指数：100;}.menucount { display:none高度：80 px飞越：隐藏；背景技术： # 999999;} # boxOpen { height:80px显示：块；}.菜单项{ display:block右浮动：位置：绝对；显示：块；背景： URL(图片/menubg 23。gif)；color: # FFFFFF文本装饰：无；宽度：78 px高度：21px文本对齐：居中；font-size :12 px}.菜单项{ display:block右浮动：位置：绝对；显示：块；背景# 0066FFcolor: # FFFFFF文本装饰：无；宽度：50 px}/style/head dydiv class=' menubox ' div class=' menu count '/diva class=' menubt ' style=' right :240 px；href='# '菜单一/a/div div class=' menubox ' div class=' menu count '/diva class=' menubt ' style=' right :160 px；href='# '菜单二/a/div class=' menubox ' div class=' menu count '/diva class=' menubt ' style=' right :80 px；'href='# '菜单三/a/div div class=' menubox ' div class=' menu count '/diva class=' menubt ' style=' right :0；href='# '菜单四/a/divp若左下角有错误，请刷新本页面，点击菜单可查看效果/PP/PP/ptable width=' 728 ' border=' 0 ' align=' center '单元格填充=' 0 '单元格间距=' 0 ' tr TD p align=' center '/p p p align=' center '/p/TD/tr/tablep/p/body/html希望本文所述对大家的jquery程序设计有所帮助。