本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可正常。你可点击菜单查看到整体的效果。点击后对应菜单项下移,可扩展成二级菜单,也可以改成TAB标签布局,感兴趣的朋友自己研究吧。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-codes/
具体代码如下:
jquery标签式导航菜单 body{margin:0;padding:0;} .menubox{position:absolute;width:100%;z-index:100;} .menucount{display:none;height:80px;overflow:hidden;background:#999999;} #boxOpen{height:80px;display:block;} .menubt{display:block;float:right;position:absolute;display:block;background:url(images/menubg23.gif);color:#FFFFFF;text-decoration:none;width:78px;height:21px;text-align:center;font-size:12px;} .menubtOpen{display:block;float:right;position:absolute;display:block;background:#0066FF;color:#FFFFFF;text-decoration:none;width:50px;} 菜单一 菜单二 菜单三 菜单四 若左下角有错误,请刷新本页面,点击菜单可查看效果。
希望本文所述对大家的jquery程序设计有所帮助。



