商城类网站头部导航
程序员文章站
2022-05-17 08:57:41
效果 index.html index
效果
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="bg-white"></div>
<header class="header">
<div class="container">
<h1 class="logo"><a href="#"></a></h1>
<!-- 一级导航 -->
<ul class="nav white">
<li class="nav-item"><a href="#">mzui商城</a></li>
<li class="nav-item" data-subnav="nav_iphone"><a href="#">mzui手机</a></li>
<li class="nav-item" data-subnav="nav_subiphone"><a href="#">手机</a></li>
<li class="nav-item" data-subnav="nav_voice"><a href="#">mzui声学</a></li>
<li class="nav-item" data-subnav="nav_parts"><a href="#">智能 · 配件</a></li>
<li class="nav-item"><a href="#">服务</a></li>
<li class="nav-item"><a href="#">专卖店</a></li>
<li class="nav-item"><a href="#">flyme</a></li>
<li class="nav-item"><a href="#">社区</a></li>
</ul>
<!-- 用户登录 -->
<div class="user">
<div class="user-hover"></div>
<div class="user-img">
<img src="images/user.png" alt="#">
<span class="arrow-bg"></span>
<span class="arrow-font"></span>
</div>
<div class="user-info">
<ul>
<li class="login"><a href="#">立即登录</a></li>
<li class="register">没有账号?<a href="#">立即注册</a></li>
<li><a href="#">我的购物车</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">m码通道</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- 二级导航 -->
<div class="sub-nav">
<div class="sub-nav__wrap" data-link="nav_iphone">
<a href="#">
<img src="images/cont/1-1.png" alt="#">
<span>pro 6 plus</span>
</a>
<a href="#">
<img src="images/cont/1-2.png" alt="#">
<span>pro 6s</span>
</a>
<a href="#">
<img src="images/cont/1-3.png" alt="#">
<span>mx6</span>
</a>
<a href="#">
<img src="images/cont/1-4.png" alt="#">
<span>pro6</span>
</a>
<a href="#">
<img src="images/cont/1-5.png" alt="#">
<span>pro5</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_subiphone">
<a href="#">
<img src="images/cont/2-1.png" alt="#">
<span>mzui note5</span>
</a>
<a href="#">
<img src="images/cont/2-2.png" alt="#">
<span>pro 6s</span>
</a>
<a href="#">
<img src="images/cont/2-3.png" alt="#">
<span>mx6</span>
</a>
<a href="#">
<img src="images/cont/2-4.png" alt="#">
<span>pro6</span>
</a>
<a href="#">
<img src="images/cont/2-5.png" alt="#">
<span>pro5</span>
</a>
<a href="#">
<img src="images/cont/2-6.png" alt="#">
<span>pro5</span>
</a>
<a href="#">
<img src="images/cont/2-7.png" alt="#">
<span>pro5</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_voice">
<a href="#">
<img src="images/cont/3-1.png" alt="#">
<span>pro 6 plus</span>
</a>
<a href="#">
<img src="images/cont/3-2.png" alt="#">
<span>pro 6s</span>
</a>
<a href="#">
<img src="images/cont/3-3.png" alt="#">
<span>mx6</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_parts">
<a href="#">
<img src="images/cont/4-1.png" alt="#">
<span>pro 6 plus</span>
</a>
<a href="#">
<img src="images/cont/4-2.png" alt="#">
<span>pro 6s</span>
</a>
<a href="#">
<img src="images/cont/4-3.png" alt="#">
<span>mx6</span>
</a>
<a href="#">
<img src="images/cont/4-4.png" alt="#">
<span>pro6</span>
</a>
<a href="#">
<img src="images/cont/4-5.png" alt="#">
<span>pro5</span>
</a>
<a href="#">
<img src="images/cont/4-6.png" alt="#">
<span>pro5</span>
</a>
</div>
</div>
</div>
<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src="js/nav.js"></script>
</body>
</html>
reset.css
html,body,div,span,h1,h2,h3,p,em,small,strong,dl,dt,dd,ol,ul,li {
margin:0;
padding:0;
font-size:100%
}
em,strong,i {
font-style:normal
}
h1,h2,h3 {
font-weight:400
}
body {
line-height:1;
font-size:14px;
font-family:microsoft yahei;
color:#333;
background-color:#2d2d2d
}
ul,ol {
list-style:none
}
a {
display:block;
color:#333;
text-decoration:none
}
input,button {
padding:0;
border:none;
outline:none;
background:0 0
}
img {
vertical-align:top
}
style.css
.white a{
color:#fff;
}
.wrapper {
position:relative;
width:100%;
height:760px;
overflow:hidden
}
.bg-white {
display:none;
position:absolute;
z-index:998;
width:100%;
height:62px;
background-color:#fff
}
.header {
position:relative;
z-index:999;
left:0;
top:0;
height:62px
}
.header .container {
width:1240px;
padding:0 20px;
margin:0 auto
}
.header .logo {
float:left;
padding-top:30px
}
.header .logo a {
width:115px;
height:20px;
background:url(../images/logo_blue.png) no-repeat
}
.nav {
float:left;
margin-left:256px
}
.nav-item {
float:left;
position:relative
}
.nav-item a {
padding:20px 20px 0;
height:42px;
line-height:42px
}
.nav-item a:hover {
color:#31a5e7
}
.sub-nav {
overflow:hidden;
position:absolute;
left:0;
top:62px;
z-index:999;
width:100%;
background-color:#fff
}
.sub-nav__wrap {
position:absolute;
left:0;
top:0;
display:none
}
.sub-nav__wrap[data-link=nav_iphone] {
padding-left:390px
}
.sub-nav__wrap[data-link=nav_subiphone] {
padding-left:306px
}
.sub-nav__wrap[data-link=nav_voice] {
padding-left:578px
}
.sub-nav__wrap[data-link=nav_parts] {
padding-left:445px
}
.sub-nav a {
float:left;
width:140px;
padding-top:14px;
text-align:center;
color:#666
}
.sub-nav a:hover {
color:#111
}
.sub-nav a img {
display:inline-block;
height:80px
}
.sub-nav a span {
display:block;
padding-top:18px;
font-size:12px
}
.user {
float:right;
position:relative;
width:60px;
height:62px
}
.user:hover .user-hover,.user:hover .user-info {
display:block
}
.user-img {
position:absolute;
z-index:3;
width:60px;
padding-top:30px;
padding-left:13px
}
.user-img .arrow-bg,.user-img .arrow-font {
position:absolute;
top:38px;
left:40px
}
.user-img .arrow-bg {
border-width:6px;
border-color:#999 transparent transparent transparent;
border-style:solid dashed dashed
}
.user-img .arrow-font {
left:41px;
border-width:5px;
border-color:#fff transparent transparent transparent;
border-style:solid dashed dashed
}
.user .user-hover {
display:none;
position:absolute;
z-index:2;
top:0;
right:0;
width:60px;
height:75px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:3px solid #1395e4;
background-color:#fff
}
.user-info {
display:none;
position:absolute;
z-index:1;
right:0;
top:77px;
height:204px;
border:1px solid #ccc;
background-color:#fff;
font-size:12px
}
.user-info ul {
padding:0 20px
}
.user-info li {
width:112px;
margin-top:20px
}
.user-info a {
color:#515151
}
.user-info a:hover {
color:#31a5e7
}
.user-info li.login {
}.user-info li.login a {
width:112px;
height:32px;
line-height:32px;
text-align:center;
color:#fff;
background-color:#39f
}
.user-info li.register {
color:#999
}
.user-info li.register a {
display:inline;
color:#21a9e7
}
.user-info li.register a:hover {
text-decoration:underline
}
.slider-box {
position:absolute;
z-index:1;
left:0;
top:0;
overflow:hidden
}
.slider {
position:absolute;
left:0;
top:0
}
.slider-item {
float:left;
cursor:default
}
.slider-box .btn-box {
position:absolute;
bottom:10px;
width:100%;
text-align:center;
font-size:0
}
.slider-box .btn-item {
display:inline-block;
width:10px;
height:10px;
margin:0 12px;
border-radius:50%;
background-color:#666
}
.slider-box .btn-item__cur {
width:12px;
height:12px;
margin-bottom:-2px;
border:1px solid #666;
background-color:transparent
}
.btn,.slider-title,.btn-box {
z-index:999
}
.theme-white .header .logo a {
background:url(../images/logo_white.png) no-repeat
}
.theme-white .nav-item a {
color:#fff
}
.theme-white .nav-item a:hover {
color:#31a5e7
}
.theme-white .slider-box .btn-item {
background-color:#fff
}
.theme-white .slider-box .btn-item__cur {
background-color:transparent;
border-color:#fff
}
.theme-nav .header .logo a {
background:url(../images/logo_blue.png) no-repeat!important
}
.theme-nav .nav-item a {
color:#333
}
.theme-nav .nav-item a:hover {
color:#31a5e7
}
nav.js
$(function() {
var owrapper=$('#wrapper');
var oheader=$('.header');
var onav=$('.nav');
var bg_white=owrapper.find('.bg-white');
var nav_item=owrapper.find('[data-subnav]');
var sub_nav=owrapper.find('.sub-nav');
var subnav_wrapper=sub_nav.find('.sub-nav__wrap');
var timer=null;
nav_item.hover(function() {
onav.removeclass("white");
cleartimeout(timer);
hoverchange();
var getval=$(this).attr('data-subnav');
var subnav_cur=$('.sub-nav__wrap[data-link='+getval+']');
var cur_imgs=subnav_cur.find('a');
goodsshow(subnav_cur);
showimg(cur_imgs);
nav_theme('hover');
}
,function() {
timer=settimeout(function() {
outchange();
nav_theme('out');
}
,100);
})
sub_nav.hover(function() {
cleartimeout(timer);
nav_theme('hover');
}
,function() {
timer=settimeout(function() {
outchange();
nav_theme('out');
}
,100);});
function hoverchange() {
bg_white.fadein('fast');
sub_nav.animate( {
height:139
}
);};
function outchange() {
onav.addclass("white");
bg_white.fadeout('slow');
sub_nav.animate( {
height:0
}
);};
function goodsshow(subnav_cur) {
subnav_wrapper.hide();
subnav_cur.show();
}
;function showimg(aimg) {
var num=0;
var timer=null;
aimg.css( {
opacity:0,marginleft:30
}
);
for(var i=0;
i<aimg.length;
i++) {
aimg.eq(i).animate( {
marginleft:0,opacity:1
}
,500);
if(i===aimg.length-1) {
clearinterval(timer);
}
}aimg.hover(function() {
$(this).css( {
opacity:1
}
).siblings().css( {
opacity:0.7
}
);},function() {
aimg.css( {
opacity:1
}
);});};
function nav_theme(method) {
if(method==='hover') {
if(owrapper.hasclass('theme-white')) {
owrapper.addclass('theme-nav');
}
}else {
owrapper.removeclass('theme-nav');
}
};});
图片素材如下