效果
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>index</link rel="stylesheet" href="css/reset.css"="css/style.css"bodydiv class="wrapper" id="wrapper"> ="bg-white"></divheader ="header"> ="container"> h1 ="logo"><a href="#"ah1<!-- 一级导航 --> ul ="nav white"> li ="nav-item">MZUI商城li="nav-item" data-subNav="nav_iphone">MZUI手机="nav_subIphone">手机="nav_voice">MZUI声学="nav_parts">智能 · 配件>服务>专卖店>Flyme>社区ul 用户登录 ="user"="user-hover"="user-img"> img src="images/user.png" altspan ="arrow-bg"span="arrow-font"="user-info"> ="login">立即登录="register">没有账号?>立即注册>我的购物车>我的订单>M码通道header 二级导航 --> ="sub-nav"="sub-nav__wrap" data-link="images/cont/1-1.png">PRO 6 Plus="images/cont/1-2.png">PRO 6s="images/cont/1-3.png">MX6="images/cont/1-4.png">PRO6="images/cont/1-5.png">PRO5="images/cont/2-1.png">MZUI Note5="images/cont/2-2.png"="images/cont/2-3.png"="images/cont/2-4.png"="images/cont/2-5.png"="images/cont/2-6.png"="images/cont/2-7.png"="images/cont/3-1.png"="images/cont/3-2.png"="images/cont/3-3.png"="images/cont/4-1.png"="images/cont/4-2.png"="images/cont/4-3.png"="images/cont/4-4.png"="images/cont/4-5.png"="images/cont/4-6.png"> script ='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script="js/nav.js"html>
reset.css
html,body,div,span,h1,h2,h3,p,em,small,strong,dl,dt,dd,ol,ul,li { margin:0; padding: font-size:100% } em,i { font-style:normal } h1,h3 { font-weight:400 } body { line-height:1;14px; font-family:microsoft yahei; color:#333; background-color:#2d2d2d } ul,ol { list-style:none } a { display:block; text-decoration: input,button { border:none; outline: background:0 0 } img { vertical-align:top }
style.css
.white a{#fff; } .wrapper { position:relative; width:100%; height:760px; overflow:hidden } .bg-white {absolute; z-index:998;62px;#fff } .header {999; left: top:62px } .header .container {1240px;0 20px;0 auto } .header .logo { float:left; padding-top:30px } .header .logo a {115px;20px;url(../images/logo_blue.png) no-repeat } .nav { margin-left:256px } .nav-item {relative } .nav-item a {20px 20px 0;42px;42px } .nav-item a:hover {#31a5e7 } .sub-nav {hidden; .sub-nav__wrap { .sub-nav__wrap[data-link=nav_iphone] { padding-left:390px } .sub-nav__wrap[data-link=nav_subIphone] {306px } .sub-nav__wrap[data-link=nav_voice] {578px } .sub-nav__wrap[data-link=nav_parts] {445px } .sub-nav a {140px; text-align:center;#666 } .sub-nav a:hover {#111 } .sub-nav a img {inline-block;80px } .sub-nav a span {18px;12px } .user {right;60px; .user:hover .user-hover,.user:hover .user-info {block } .user-img {3;30px;13px } .user-img .arrow-bg,.user-img .arrow-font {38px;40px } .user-img .arrow-bg { border-width:6px; border-color:#999 transparent transparent transparent; border-style:solid dashed dashed } .user-img .arrow-font {41px;5px;#fff transparent transparent transparent; .user .user-hover {2; right:75px; border-left:1px solid #ccc; border-right: border-top:3px solid #1395e4; .user-info {77px;204px;#fff; .user-info ul {0 20px } .user-info li {112px; margin-top:20px } .user-info a {#515151 } .user-info a:hover { .user-info li.login { }.user-info li.login a {32px;#39f } .user-info li.register {#999 } .user-info li.register a {inline;#21a9e7 } .user-info li.register a:hover {underline } .slider-box { .slider {0 } .slider-item { cursor:default } .slider-box .btn-box { bottom:10px; .slider-box .btn-item {0 12px; border-radius:50%; .slider-box .btn-item__cur {12px; margin-bottom:-2px;1px solid #666;transparent } .btn,.slider-title,.btn-box {999 } .theme-white .header .logo a {url(../images/logo_white.png) no-repeat } .theme-white .nav-item a { .theme-white .nav-item a:hover { .theme-white .slider-box .btn-item { .theme-white .slider-box .btn-item__cur {transparent; .theme-nav .header .logo a {url(../images/logo_blue.png) no-repeat!important } .theme-nav .nav-item a {#333 } .theme-nav .nav-item a:hover {#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(() { 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'); },() { timer=setTimeout(() { outChange(); nav_theme('out'); }) sub_nav.hover(() { clearTimeout(timer); nav_theme('hover');}); hoverChange() { bg_white.fadeIn('fast'); sub_nav.animate( { height:139 } );}; outChange() { oNav.addClass("white"); bg_white.fadeOut('slow'); sub_nav.animate( { height:0 goodsShow(subNav_cur) { subNav_wrapper.hide(); subNav_cur.show(); } ; showImg(aImg) { var num=0; ; aImg.css( { opacity:0,marginLeft:30 } ); for(var i=0; i<aImg.length; i++) { aImg.eq(i).animate( { marginLeft:0,opacity:1 },500if(i===aImg.length-1) { clearInterval(timer); } }aImg.hover(() { $(this).css( { opacity:1 } ).siblings().css( { opacity:0.7 } );},1)">() { aImg.css( { opacity:1 } );});}; nav_theme(method) { if(method==='hover') { if(oWrapper.hasClass('theme-white')) { oWrapper.addClass('theme-nav'); } }else { oWrapper.removeClass('theme-nav'); } };});
图片素材如下