本文实例讲述了js实现的动画导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款简单的动画导航菜单效果，每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动，指明当前菜单的位置。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-animate-nav-menu-style-codes/
动画导航菜单 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{margin:0; padding:0;} body { font:12px "5B8B4F53",san-serif; color:#808080; padding-top:6px; } a { text-decoration:none; color:#808080 } a:hover { text-decoration:underline; color:#ba2636 } ul, li { list-style:none; } #nav{ padding:41px 0 0 0; height:27px;width:542px; overflow:hidden; float:right; margin-right:17px;position:relative ;} #nav ul{ height:27px; width:100%; background: url(i/naVbotBdr.gif) repeat-x 0 100%; } #nav ul li{ width:67px; height:24px; float:left; padding-right:28px; display:inline; cursor:pointer; overflow:hidden} #nav a{background:#999;width:100%; height:24px; display:block; float:left; outline:none; color:#fff; line-height:24px; text-align:center; font-size:16px; font-weight:bold; overflow:hidden} #navCur{ position:absolute; left:0; bottom:0; height:3px; color:#F00; width:67px; margin:0; padding:0; display: block; float:none; background:#FF0000; cursor:pointer; overflow:hidden}
- 1
- 2
- 3
- 4
- 5
- 6
希望本文所述对大家的Javascript程序设计有所帮助。
