網頁頂部導航選單程式碼例項
很多網站在頂部有需要導航功能,特別是內容比較豐富的站點。
下面分享一個淘寶網站頂部的導航選單,當然淘寶網站的版本也會經常改變的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> /* reset start */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; *line-height: 1.5; -ms-overflow-style: scrollbar; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: courier new,courier,monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; } a:visited { color: #000; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } /* reset end */ .left { float: left; } .right { float: right; } .inline { display: inline-block; } .clear { *zoom: 1; } .clear:after { display: block; content: "clear"; height: 0; clear: both; overflow: hidden; visibility: hidden; } .main { width: 1190px; min-width: 990px; margin: 0 auto; } /*頭*/ #header { background-color: #F5F5F5; } #header span { height: 35px; line-height: 35px; padding: 0 6px; } #header span a { font-size: 12px; color: #6c6c6c; margin-right: 7px; } #header a:hover { color: #F22E00; } #header ul li { display: inline-block; } #header .menu-panel { position: absolute; text-align: center; display: none; } #header .menu-user-panel { width: 248px; padding: 8px; } #header .menu-bd-panel { padding: 8px 0; } #header .menu-bd-panel li { display: block; line-height: 28px; text-align: left; } #header b { color: red; font-weight: 700; } #header .menu-user-panel .right { width: 149px; } #header .menu-user-panel .right p { text-align: left; background-color: transparent; margin: 0; } #header .menu-user-panel .left { margin-right: 10px; margin-left: 9px; line-height: 12px; } #header .menu-user-panel .left img { border-radius: 50%; } #header .menu-user-panel p { background-color: #e9fecf; padding: 2px; line-height: 15px; margin: 5px 9px; } #header .menu-user-panel ul { margin-bottom: -20px; margin-top: 10px; padding-top: 10px; height: 60px; } #header .menu-user-panel ul img { width: 36px; height: 36px; } #header .menu-user-panel ul li { display: inline-block; line-height: 12px; } #header .menu-user-panel ul li p { background-color: transparent; margin: 0; color: #999; } #header .menu-user-panel ul li p:hover { color: #F22E00; } </style> </head> <body> <div id="header"> <div class="main"> <ul class="left"> <li> <span class="triangle"> <a href="">XXX</a> <div class="menu-user-panel menu-panel"> <a href="" class="left"><img src="header.jpg" alt="" width="80px" height="80px"></a> <div class="right"> <img src="" alt=""> <p>我可尊享<b>15</b>項特權</p> </div> <div class="clear"></div> <p>距離<b>會員日</b>開始還剩<b>18</b>天!</p> <ul> <li><a href=""><img src="1.png" alt=""><p>會員日</p></a></li> <li><a href=""><img src="2.png" alt=""><p>週年紀念日</p></a></li> <li><a href=""><img src="3.png" alt=""><p>生日特權</p></a></li> <li><a href=""><img src="4.png" alt=""><p>中信淘寶</p></a></li> </ul> </div> </span> </li> <li><span><a href="">訊息</a></span></li> <li><span><a href="">手機逛淘寶</a></span></li> </ul> <div class="right"> <ul> <li> <span class="triangle"> <a href="">我的淘寶</a> <ul class="menu-panel menu-bd-panel"> <li><a href="">以買到的寶貝</a></li> <li><a href="">我的足跡</a></li> <li><a href="">愛逛街</a></li> <li><a href="">淘寶達人</a></li> <li><a href="">新歡</a></li> </ul> </span> </li> <li><span class="triangle"><a href="">購物車</a></span></li> <li><span class="triangle"><a href="">收藏夾</a></span></li> <li><span><a href="">商品分類</a></span></li> <li> <span class="triangle"> <a href="">賣家中心</a> <ul class="menu-panel menu-bd-panel"> <li><a href="">以買到的寶貝</a></li> <li><a href="">我的足跡</a></li> <li><a href="">愛逛街</a></li> <li><a href="">淘寶達人</a></li> <li><a href="">新歡</a></li> </ul> </span> </li> <li><span class="triangle"><a href="">聯絡客服</a></span></li> <li><span class="triangle"><a href="">網站導航</a></span></li> </ul> </div> </div> <div class="clear"></div> </div> <div id="main"> </div> <div id="footer"></div> <script> var oHeader = document.getElementById("header"); var aLi = oHeader.getElementsByTagName("li"); window.onload = function () { for (var i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function () { var oMenu = this.getElementsByClassName("menu-panel"); if (oMenu[0]) { oMenu[0].style.display = "block"; } else { return false } } aLi[i].onmouseout = function () { var oMenu = this.getElementsByClassName("menu-panel"); if (oMenu[0]) { oMenu[0].style.display = "none"; } else { return false } } } } </script> </body> </html>
相關文章
- 可以固定的頂部的導航選單簡單例項程式碼單例
- js點選返回網頁頂部程式碼例項詳解JS網頁
- 蜂巢式導航選單程式碼例項
- css簡單水平導航選單程式碼例項CSS
- javascript樹形導航選單例項程式碼JavaScript單例
- css樹形導航選單程式碼例項CSS
- 響應式導航選單程式碼例項
- 固定在頂部的導航選單
- 自定義右鍵導航選單程式碼例項
- 垂直手風琴導航選單程式碼例項
- CSS3 扇形導航選單程式碼例項CSSS3
- 多功能PC端頂部導航選單
- CSS3立體導航選單程式碼例項CSSS3
- 垂直樹形多級導航選單程式碼例項
- 垂直可伸縮的導航選單例項程式碼單例
- CSS製作橫向導航選單例項程式碼CSS單例
- 側欄能夠定位的導航選單程式碼例項
- jquery點選返回網頁頂部程式碼jQuery網頁
- js橫向滑動摺疊導航選單程式碼例項JS
- 點選頂部彈出提示層程式碼例項
- js頂部可以伸縮的導航選單效果JS
- css水平下拉導航選單程式碼例項CSS
- 純CSS實現的二級導航選單效果程式碼例項CSS
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- css3實現的立體導航選單效果程式碼例項CSSS3
- css三級下拉導航選單程式碼例項CSS
- 具有彈性的點選返回網頁頂部程式碼網頁
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- 導航欄背景切換程式碼例項
- html 仿百度百科導航下拉選單功能例項程式碼介紹HTML
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- js選項卡簡單程式碼例項JS
- 網頁變灰色程式碼例項網頁
- 純css實現固定在網頁底部選單導航CSS網頁
- 點選返回上一頁程式碼例項
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- css實現網頁”回到頂部“的程式碼效果CSS網頁