该导航菜单代码是适合任何企业网站的导航菜单代码,风格简单,便于修改,使用DIV+CSS实现,并使用JS实现当前位置的标注效果。96看吧推荐使用。
该导航菜单的style样式代码部分:
- #header { MARGIN: 0px; WIDTH: 100% }
- #mainNav { BACKGROUND: url(menu_bg.gif) 0px 0px; MARGIN: 1em auto; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 43px }
- #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; }
- #mainNav A:hover { BACKGROUND: url(menu_hover.gif) no-repeat 0px -50px; COLOR: #fff; TEXT-DECORATION: none }
- #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 }
- #mainNav .unhover { BACKGROUND: url(menu_hover.gif) no-repeat 0px -50px; COLOR: #fff; TEXT-DECORATION: none }
该导航菜单的js代码部分(该js代码主要用于标注当前位置的效果实现):
- <script>
- function setmenu(id)
- {
- document.getElementById(id).className="hoveron";
- }
- </script>