当前位置:96看吧 > 实用代码 > 导航菜单 > 适合企业网站的导航菜单代码

适合企业网站的导航菜单代码

时间:2013/08/20
作者:96kb.com
来源:96看吧
查看:

企业网站导航菜单

导航菜单代码是适合任何企业网站的导航菜单代码,风格简单,便于修改,使用DIV+CSS实现,并使用JS实现当前位置的标注效果。96看吧推荐使用。

该导航菜单的style样式代码部分:

  1. #header { MARGIN: 0px; WIDTH: 100% }  
  2. #mainNav { BACKGROUND: url(menu_bg.gif) 0px 0px; MARGIN: 1em auto; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 43px }  
  3. #mainNav A { DISPLAY: block; FONT-SIZE: 15px; BACKGROUND: url(menu_hover.gif) no-repeat 0px 0px; FLOAT: left; WIDTH: 12.49%; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: "黑体"; HEIGHT: 43px; TEXT-ALIGN: center; }  
  4. #mainNav A:hover { BACKGROUND: url(menu_hover.gif) no-repeat 0px -50px; COLOR: #fff; TEXT-DECORATION: none }  
  5. #mainNav A.hoveron { DISPLAY: block; FONT-SIZE: 15px; BACKGROUND: url(menu_hover.gif) no-repeat 0px -50px; FLOAT: left; WIDTH: 12.49%; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: "黑体"; HEIGHT: 48px; TEXT-ALIGN: center }  
  6. #mainNav .unhover { BACKGROUND: url(menu_hover.gif) no-repeat 0px -50px; COLOR: #fff; TEXT-DECORATION: none } 

该导航菜单的js代码部分(该js代码主要用于标注当前位置的效果实现):

  1. <script>  
  2. function setmenu(id)  
  3. {  
  4.     document.getElementById(id).className="hoveron";  
  5. }  
  6. </script> 
上一篇:Apple网站风格的动感导航菜单
下一篇:仿jQuery特效的js下拉菜单
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门