商城类网站头部导航

效果

 

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');
    }
};});

图片素材如下

 

 

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...