當前位置: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
版權信息:欄目內,站內會員所分享的全部“資源/素材/文章”,僅供學習與參考,版權為原作者所有。
下載提示:非注冊用戶每天可下載一個文件,已注冊會員不受限制。
相關最新
相關熱門
中国铝业股票行情