简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    JS实现移动端可折叠导航菜单

    内容摘要:!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' titleindex/title link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='external nofollow'......

      <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>index</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="external nofollow" >

    <link rel="stylesheet" href="css/style.css" rel="external nofollow" >

    </head>


    <body>


    <div class="htmleaf-container">

    <div id="wrapper">


    <!-- 菜单 -->

    <div class="menu">

    <img id="menu-bg" src="images/golden-gate-lights.jpg" />

    <ul>

    <li><a href="">About</a></li>

    <li><a href="">Share</a></li>

    <li><a href="">Activity</a></li>

    <li><a href="">Settings</a></li>

    <li><a href="">Contact</a></li>

    </ul>

    </div>


    <div class="screen">

    <div class="navbar"></div>

    <div class="list">

    <div class="item">

    <div class="img"></div>

    <span></span>

    <span></span>

    <span></span>

    </div>

    <div class="item">

    <div class="img"></div>

    <span></span>

    <span></span>

    <span></span>

    </div>

    <div class="item">

    <div class="img"></div>

    <span></span>

    <span></span>

    <span></span>

    </div>

    <div class="item">

    <div class="img"></div>

    <span></span>

    <span></span>

    <span></span>

    </div>

    </div>

    <div class="burger">

    <div class="x"></div>

    <div class="y"></div>

    <div class="z"></div>

    </div>

    </div>


    </div>

    </div>


    <script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>

    <script src='js/script.js'></script>

    </body>

    </html>

    CSS

    /*basic*/

    @import "https://fonts.googleapis.com/css?family=Raleway:200,500,700,800";

    @font-face {

    font-family:icomoon;

    src:url(../fonts/icomoon.eot?rretjt);

    src:url(../fonts/icomoon.eot?#iefixrretjt) format('embedded-opentype'),

    url(../fonts/icomoon.woff?rretjt) format('woff'),

    url(../fonts/icomoon.ttf?rretjt) format('truetype'),

    url(../fonts/icomoon.svg?rretjt#icomoon) format('svg');

    font-weight:400;

    font-style:normal

    }

    [class^=icon-],[class*=" icon-"] {

    font-family:icomoon;

    speak:none;

    font-style:normal;

    font-weight:400;

    font-variant:normal;

    text-transform:none;

    line-height:1;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale

    }

    body,html {

    font-size:100%;

    padding:0;

    margin:0

    }

    *,*:after,*:before {

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box

    }

    .clearfix:before,.clearfix:after {

    content:" ";

    display:table

    }

    .clearfix:after {

    clear:both

    }

    body {

    background:#f9f7f6;

    color:#404d5b;

    font-weight:500;

    font-size:1.05em;

    font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

    }

    a {

    color:#2fa0ec;

    text-decoration:none;

    outline:none

    }

    a:hover,a:focus {

    color:#74777b

    }

    .htmleaf-container {

    margin:0 auto;

    text-align:center;

    overflow:hidden

    }

    .htmleaf-content {

    font-size:150%;

    padding:1em 0

    }

    .htmleaf-content h2 {

    margin:0 0 2em;

    opacity:.1

    }

    .htmleaf-content p {

    margin:1em 0;

    padding:5em 0 0;

    font-size:.65em

    }

    .bgcolor-1 {

    background:#f0efee

    }

    .bgcolor-2 {

    background:#f9f9f9

    }

    .bgcolor-3 {

    background:#e8e8e8

    }

    .bgcolor-4 {

    background:#2f3238;

    color:#fff

    }

    .bgcolor-5 {

    background:#df6659;

    color:#521e18

    }

    .bgcolor-6 {

    background:#2fa8ec

    }

    .bgcolor-7 {

    background:#d0d6d6

    }

    .bgcolor-8 {

    background:#3d4444;

    color:#fff

    }

    .bgcolor-9 {

    background:#ef3f52;

    color:#fff

    }

    .bgcolor-10 {

    background:#64448f;

    color:#fff

    }

    .bgcolor-11 {

    background:#3755ad;

    color:#fff

    }

    .bgcolor-12 {

    background:#3498db;

    color:#fff

    }

    .htmleaf-header {

    padding:1em 190px;

    letter-spacing:-1px;

    text-align:center

    }

    .htmleaf-header h1 {

    color:#fff;

    font-weight:600;

    font-size:2em;

    line-height:1;

    margin-bottom:0;

    font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

    }

    .htmleaf-header h1 span {

    font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif;

    display:block;

    font-size:60%;

    font-weight:400;

    padding:.8em 0 .5em;

    color:#c3c8cd

    }

    .htmleaf-demo a {

    color:#1d7db1;

    text-decoration:none

    }

    .htmleaf-demo {

    width:100%;

    padding-bottom:1.2em

    }

    .htmleaf-demo a {

    display:inline-block;

    margin:.5em;

    padding:.6em 1em;

    border:3px solid #1d7db1;

    font-weight:700

    }

    .htmleaf-demo a:hover {

    opacity:.6

    }

    .htmleaf-demo a.current {

    background:#1d7db1;

    color:#fff

    }

    .htmleaf-links {

    position:relative;

    display:inline-block;

    white-space:nowrap;

    font-size:1.5em;

    text-align:center

    }

    .htmleaf-links::after {

    position:absolute;

    top:0;

    left:50%;

    margin-left:-1px;

    width:2px;

    height:100%;

    background:#dbdbdb;

    content:'';

    -webkit-transform:rotate3d(0,0,1,22.5deg);

    transform:rotate3d(0,0,1,22.5deg)

    }

    .htmleaf-icon {

    display:inline-block;

    margin:.5em;

    padding:0 0;

    width:1.5em;

    text-decoration:none

    }

    .htmleaf-icon span {

    display:none

    }

    .htmleaf-icon:before {

    margin:0 5px;

    text-transform:none;

    font-weight:400;

    font-style:normal;

    font-variant:normal;

    font-family:icomoon;

    line-height:1;

    speak:none;

    -webkit-font-smoothing:antialiased

    }

    .htmleaf-footer {

    width:100%;

    padding-top:10px

    }

    .htmleaf-small {

    font-size:.8em

    }

    .center {

    text-align:center

    }

    .related {

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    color:#fff;

    background:#333;

    text-align:center;

    font-size:1.25em;

    padding:.5em 0;

    overflow:hidden

    }

    .related>a {

    vertical-align:top;

    width:calc(100% - 20px);

    max-width:340px;

    display:inline-block;

    text-align:center;

    margin:20px 10px;

    padding:25px;

    font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif

    }

    .related a {

    display:inline-block;

    text-align:left;

    margin:20px auto;

    padding:10px 20px;

    opacity:.8;

    -webkit-transition:opacity .3s;

    transition:opacity .3s;

    -webkit-backface-visibility:hidden

    }

    .related a:hover,.related a:active {

    opacity:1

    }

    .related a img {

    max-width:100%;

    opacity:.8;

    border-radius:4px

    }

    .related a:hover img,.related a:active img {

    opacity:1

    }

    .related h3 {

    font-family:microsoft yahei,sans-serif

    }

    .related a h3 {

    font-weight:300;

    margin-top:.15em;

    color:#fff

    }

    .icon-htmleaf-home-outline:before {

    content:"\e5000"

    }

    .icon-htmleaf-arrow-forward-outline:before {

    content:"\e5001"

    }

    @media screen and (max-width:50em) {

    .htmleaf-header {

    padding:3em 10% 4em

    }

    .htmleaf-header h1 {

    font-size:2em

    }

    }@media screen and (max-width:40em) {

    .htmleaf-header h1 {

    font-size:1.5em

    }

    }@media screen and (max-width:30em) {

    .htmleaf-header h1 {

    font-size:1.2em

    }

    }


    /*demo1*/

    * {

    margin:0;

    padding:0

    }

    body {

    background:#383c55;

    width:100%;

    height:100%;

    font:12px open sans,sans-serif

    }

    #wrapper {

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: absolute;

    background: #111;

    }

    div.screen {

    width: 100%;

    height: 100%;

    overflow:hidden;

    position:absolute;

    top:0;

    left:0;

    background:#31558a;

    -webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 500ms cubic-bezier(0,.995,.99,1);

    transition:all 500ms cubic-bezier(0,.995,.99,1)

    }

    div.screen.animate {

    left:80%;

    -webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 500ms cubic-bezier(0,.995,.99,1);

    transition:all 500ms cubic-bezier(0,.995,.99,1)

    }

    .list {

    margin-top: 100px;

    text-align: left;

    }

    .item {

    height: 328px;

    padding-left: 182px;

    clear: both;

    }

    .item .img,.item span {

    background:#214273;

    border-radius:3px

    }

    .item .img {

    float: left;

    width: 200px;

    height: 200px;

    margin-left: -93px;

    }

    .item span {

    height: 30px;

    width: 62%;

    margin-bottom: 48px;

    margin-left: 9%;

    float: left;

    }

    .item span:nth-of-type(3) {

    width:75px;

    margin-botom:0

    }

    div.burger {

    height: 100px;

    width: 100px;

    position: absolute;

    top: 11px;

    left: 50px;

    cursor: pointer;

    }

    div.x,div.y,div.z {

    position:absolute;

    margin:auto;

    top:0;

    bottom:0;

    background:#fff;

    border-radius:2px;

    -webkit-transition:all 200ms ease-out;

    -moz-transition:all 200ms ease-out;

    -ms-transition:all 200ms ease-out;

    -o-transition:all 200ms ease-out;

    transition:all 200ms ease-out

    }

    div.x,div.y,div.z {

    height: 10px;

    width: 60px;

    -webkit-transition:all 100ms ease-out;

    -moz-transition:all 100ms ease-out;

    -ms-transition:all 100ms ease-out;

    -o-transition:all 100ms ease-out;

    transition:all 100ms ease-out

    }

    div.y.squize {

    width:0;

    -webkit-transition:all 100ms ease-out;

    -moz-transition:all 100ms ease-out;

    -ms-transition:all 100ms ease-out;

    -o-transition:all 100ms ease-out;

    transition:all 100ms ease-out

    }

    div.y {

    top:39px;

    }

    div.z {

    top:80px;

    }

    div.open div.x,div.open div.z {

    top:19px;

    -webkit-transition:all 70ms ease-out;

    -moz-transition:all 70ms ease-out;

    -ms-transition:all 70ms ease-out;

    -o-transition:all 70ms ease-out;

    transition:all 70ms ease-out

    }

    div.rotate30 {

    -ms-transform:rotate(30deg);

    -webkit-transform:rotate(30deg);

    transform:rotate(30deg);

    -webkit-transition:all 70ms ease-out;

    -moz-transition:all 70ms ease-out;

    -ms-transition:all 70ms ease-out;

    -o-transition:all 70ms ease-out;

    transition:all 70ms ease-out

    }

    div.rotate150 {

    -ms-transform:rotate(150deg);

    -webkit-transform:rotate(150deg);

    transform:rotate(150deg);

    -webkit-transition:all 70ms ease-out;

    -moz-transition:all 70ms ease-out;

    -ms-transition:all 70ms ease-out;

    -o-transition:all 70ms ease-out;

    transition:all 70ms ease-out

    }

    div.rotate45 {

    -ms-transform:rotate(45deg);

    -webkit-transform:rotate(45deg);

    transform:rotate(45deg);

    -webkit-transition:all 100ms ease-out;

    -moz-transition:all 100ms ease-out;

    -ms-transition:all 100ms ease-out;

    -o-transition:all 100ms ease-out;

    transition:all 100ms ease-out

    }

    div.rotate135 {

    -ms-transform:rotate(135deg);

    -webkit-transform:rotate(135deg);

    transform:rotate(135deg);

    -webkit-transition:all 100ms ease-out;

    -moz-transition:all 100ms ease-out;

    -ms-transition:all 100ms ease-out;

    -o-transition:all 100ms ease-out;

    transition:all 100ms ease-out

    }

    div.navbar {

    height:200px;

    background:#385e97

    }

    div.menu {

    height:568px;

    width:320px;

    margin-left:-190px;

    opacity:0;

    position:relative;

    -webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 500ms cubic-bezier(0,.995,.99,1);

    transition:all 500ms cubic-bezier(0,.995,.99,1)

    }

    #menu-bg {

    position:absolute;

    left:-10px;

    top:-120px;

    opacity:.3;

    -webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 500ms cubic-bezier(0,.995,.99,1);

    transition:all 500ms cubic-bezier(0,.995,.99,1)

    }

    div.menu.animate #menu-bg {

    width: 350%;

    left: -143px;

    -webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 500ms cubic-bezier(0,.995,.99,1);

    transition:all 500ms cubic-bezier(0,.995,.99,1)

    }

    div.menu.animate {

    width:100%;

    margin-left: -110px;

    opacity: 1;

    -webkit-transition: all 500ms cubic-bezier(0,.995,.99,1);

    -moz-transition: all 500ms cubic-bezier(0,.995,.99,1);

    -ms-transition: all 500ms cubic-bezier(0,.995,.99,1);

    -o-transition: all 500ms cubic-bezier(0,.995,.99,1);

    transition: all 500ms cubic-bezier(0,.995,.99,1);

    }

    div.menu ul {

    position: relative;

    padding-top: 200px;

    }

    div.menu ul li {

    list-style: none;

    width: 100%;

    margin-top: 120px;

    text-align: left;

    padding-left: 300px;

    font-size: 50px;

    }

    div.menu ul li a {

    color:#fff;

    text-decoration:none;

    letter-spacing:1px

    }

    div.menu.animate ul li {

    margin-left: 80px;

    -webkit-transition:all 800ms cubic-bezier(0,.995,.99,1);

    -moz-transition:all 800ms cubic-bezier(0,.995,.99,1);

    -ms-transition:all 800ms cubic-bezier(0,.995,.99,1);

    -o-transition:all 800ms cubic-bezier(0,.995,.99,1);

    transition:all 800ms cubic-bezier(0,.995,.99,1)

    }

    div.menu.animate li:nth-of-type(1) {

    transition-delay:0s

    }

    div.menu.animate li:nth-of-type(2) {

    transition-delay:.06s

    }

    div.menu.animate li:nth-of-type(3) {

    transition-delay:.12s

    }

    div.menu.animate li:nth-of-type(4) {

    transition-delay:.18s

    }

    div.menu.animate li:nth-of-type(5) {

    transition-delay:.24s

    }


    js

    $(document).ready(function() {

    if ('ontouchstart' in window) {

    var click = 'touchstart';

    } else {

    var click = 'click';

    }

    $('div.burger').on(click, function () {

    if (!$(this).hasClass('open')) {

    openMenu();

    } else {

    closeMenu();

    }

    });

    $('div.menu ul li a').on(click, function (e) {

    e.preventDefault();

    closeMenu();

    });

    function openMenu() {

    $('div.burger').addClass('open');

    $('div.y').fadeOut(100);

    $('div.screen').addClass('animate');

    setTimeout(function () {

    $('div.x').addClass('rotate30');

    $('div.z').addClass('rotate150');

    $('.menu').addClass('animate');

    setTimeout(function () {

    $('div.x').addClass('rotate45');

    $('div.z').addClass('rotate135');

    }, 100);

    }, 10);

    }

    function closeMenu() {

    $('div.screen, .menu').removeClass('animate');

    $('div.y').fadeIn(150);

    $('div.burger').removeClass('open');

    $('div.x').removeClass('rotate45').addClass('rotate30');

    $('div.z').removeClass('rotate135').addClass('rotate150');

    setTimeout(function () {

    $('div.x').removeClass('rotate30');

    $('div.z').removeClass('rotate150');

    }, 50);

    setTimeout(function () {

    $('div.x, div.z').removeClass('collapse');

    }, 70);

    }

    });

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/7/7 发布时间:16:27:34 点击:323 
  • 上一篇:基于HTML代码实现图片碎片化加载功能
  • 下一篇:JS+CSS实现简单的二级下拉导航菜单效果
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.33 Build 20.7.30(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020