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

快乐打工仔 分类:实例代码

很多网站在顶部有需要导航功能,特别是内容比较丰富的站点。

下面分享一个淘宝网站顶部的导航菜单,当然淘宝网站的版本也会经常改变的。

代码实例如下:

<!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',\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>

网页顶部导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于网页顶部导航菜单代码实例就介绍到这了。

网页顶部导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容