网页顶部导航菜单代码实例

快乐打工仔发布于 2年前分类：实例代码
很多网站在顶部有需要导航功能，特别是内容比较丰富的站点。
下面分享一个淘宝网站顶部的导航菜单，当然淘宝网站的版本也会经常改变的。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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',b8bf53,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>
网页顶部导航菜单代码实例，这样的场景在实际项目中还是用的比较多的，关于网页顶部导航菜单代码实例就介绍到这了。
网页顶部导航菜单代码实例属于前端实例代码，有关更多实例代码大家可以查看。
我来回复
暂无回复内容