当前位置: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
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门