jQuery简单实用的隐藏全屏导航菜单插件

jQuery简单实用的隐藏全屏导航菜单插件

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
<style>

    .fat-nav, .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
        -moz-transition-duration: .4s;
        -o-transition-duration: .4s;
        -webkit-transition-duration: .4s
    }

    .hamburger {
        display: block;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        padding: 12px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        -ms-touch-action: manipulation;
        touch-action: manipulation
    }

    .hamburger__icon {
        position: relative;
        margin-top: 7px;
        margin-bottom: 7px
    }

    .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
        display: block;
        width: 25px;
        height: 2px;
        background-color: #222;
        -moz-transition-property: background-color, -moz-transform;
        -o-transition-property: background-color, -o-transform;
        -webkit-transition-property: background-color, -webkit-transform;
        transition-property: background-color, transform;
        transition-duration: .4s
    }

    .hamburger__icon:after, .hamburger__icon:before {
        position: absolute;
        content: ""
    }

    .hamburger__icon:before {
        top: -7px
    }

    .hamburger__icon:after {
        top: 7px
    }

    .hamburger.active .hamburger__icon {
        background-color: transparent
    }

    .hamburger.active .hamburger__icon:after, .hamburger.active .hamburger__icon:before {
        background-color: #fff
    }

    .hamburger.active .hamburger__icon:before {
        -moz-transform: translateY(7px) rotate(45deg);
        -ms-transform: translateY(7px) rotate(45deg);
        -webkit-transform: translateY(7px) rotate(45deg);
        transform: translateY(7px) rotate(45deg)
    }

    .hamburger.active .hamburger__icon:after {
        -moz-transform: translateY(-7px) rotate(-45deg);
        -ms-transform: translateY(-7px) rotate(-45deg);
        -webkit-transform: translateY(-7px) rotate(-45deg);
        transform: translateY(-7px) rotate(-45deg)
    }

    .fat-nav {
        top: 0;
        left: 0;
        z-index: 9999;
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .8);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
        transition-duration: .4s;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch
    }

    .fat-nav__wrapper {
        width: 100%;
        height: 100%;
        display: table;
        table-layout: fixed
    }

    .fat-nav.active {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .fat-nav ul {
        display: table-cell;
        vertical-align: middle;
        margin: 0;
        padding: 0
    }

    .fat-nav li {
        list-style-type: none;
        text-align: center;
        padding: 10px;
        font-size: 2em
    }

    .fat-nav li, .fat-nav li a {
        color: #fff
    }

    .fat-nav li a {
        text-decoration: none
    }






h1,
h2,
h3,
h4 {
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 {
    font-weight: 400;
    font-size: 60px;
}

h2 {
    font-weight: 300;
    font-size: 36px;
}

h3 {
    font-weight: 400;
    font-size: 28px;
}

h4 {
    font-weight: 400;
    font-size: 20px;
}


.cta {
    margin-top: 100px;
}



.avatar {
    margin-top: 40px;
}

.hamburger__icon, 
.hamburger__icon:before, 
.hamburger__icon:after {
    background-color: #666;
}

.text-center {
    text-align: center;
}
</style>
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="fat-nav">
        <div class="fat-nav__wrapper">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">PROJECT</a></li>
                <li><a href="#">SOURCE</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
    
     <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.fatNav.min.js"></script>
    <script type="text/javascript">
    (function() {
    
    $.fatNav();
    
              }());
    </script>
</body>
</html>

jQuery简单实用的隐藏全屏导航菜单插件

相关推荐