商城类网站头部导航
程序员文章站
2022-08-09 16:22:34
效果 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'); } };});
图片素材如下