现代都市风移动端可折叠导航菜单

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"="css/style.css">

bodydiv class="htmleaf-container"id="wrapper">

    <!-- 菜单 -->    
    ="menu">
        img ="menu-bg" src="images/golden-gate-lights.jpg" />
        ul>
            li><a href="">Abouta></>Share>Activity>Settings>Contactdiv="screen"="navbar"="list"="item">
                ="img"span="burger"="x"="y"="z"script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'html>

style.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);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-"] {
  speak:none;normal;
  font-variant:
  text-transform:
  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:
  box-sizing:border-box
}
.clearfix:before,.clearfix:after {
  content:" ";
  display:table
}
.clearfix:after {
  clear:both
}
body {
  background:#f9f7f6;
  color:#404d5b;500;1.05em;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 {#2fa0ec;
  text-decoration:
  outline:none
}
a:hover,a:focus {#74777b
}
.htmleaf-container {0 auto;
  text-align:center;
  overflow:hidden
}
.htmleaf-content {150%;1em 0
}
.htmleaf-content h2 {0 0 2em;
  opacity:.1
}
.htmleaf-content p {1em 0;5em 0 0;.65em
}
.bgcolor-1 {#f0efee
}
.bgcolor-2 {#f9f9f9
}
.bgcolor-3 {#e8e8e8
}
.bgcolor-4 {#2f3238;#fff
}
.bgcolor-5 {#df6659;#521e18
}
.bgcolor-6 {#2fa8ec
}
.bgcolor-7 {#d0d6d6
}
.bgcolor-8 {#3d4444;
.bgcolor-9 {#ef3f52;
.bgcolor-10 {#64448f;
.bgcolor-11 {#3755ad;
.bgcolor-12 {#3498db;
.htmleaf-header {1em 190px;
  letter-spacing:-1px;center
}
.htmleaf-header h1 {#fff;600;2em;
  margin-bottom:
.htmleaf-header h1 span {block;60%;.8em 0 .5em;#c3c8cd
}
.htmleaf-demo a {#1d7db1;
.htmleaf-demo {
  width:
  padding-bottom:1.2em
}inline-block;.5em;.6em 1em;
  border:3px solid #1d7db1;700
}
.htmleaf-demo a:hover {.6
}
.htmleaf-demo a.current {
.htmleaf-links {
  position:relative;
  white-space:nowrap;1.5em;
.htmleaf-links::after {absolute;
  top:
  left:50%;
  margin-left:2px;
  height:#dbdbdb;'';
  -webkit-transform:rotate3d(0,1,22.5deg);
  transform:
.htmleaf-icon {0 0;
.htmleaf-icon span {
.htmleaf-icon:before {0 5px;antialiased
}
.htmleaf-footer {
  padding-top:10px
}
.htmleaf-small {.8em
}
.center {
.related {#333;1.25em;.5em 0;
.related>a {
  vertical-align:top;calc(100% - 20px);
  max-width:340px;20px 10px;25px;
.related a {left;20px auto;10px 20px;.8;
  -webkit-transition:opacity .3s;
  transition:
  -webkit-backface-visibility:
.related a:hover,.related a:active {1
}
.related a img {
  border-radius:4px
}
.related a:hover img,.related a:active img {
.related h3 {microsoft yahei,1)">
.related a h3 {300;
  margin-top:.15em;
.icon-htmleaf-home-outline:before {"\e5000"
}
.icon-htmleaf-arrow-forward-outline:before {"\e5001"
}
@media screen and (max-width:50em) {
  .htmleaf-header {
  padding:3em 10% 4em
}2em
}
}@media screen and (max-width:40em) {
  .htmleaf-header h1 {
  font-size:1.5em
}
}@media screen and (max-width:30em) {
}

demo1
* {#383c55;
  font:12px open sans,1)">
#wrapper { 100%; hidden; absolute; #111;
}
div.screen {hidden;#31558a;all 500ms cubic-bezier(0,.995,.99,1);
  -moz-transition:
  -ms-transition:
  -o-transition:
div.screen.animate {80%;
.list { 100px; left;
}
.item { 328px;
  padding-left: 182px; both;
}
.item .img,.item span {#214273;3px
}
.item .img {
  float: left; 200px; -93px;
}
.item span { 30px; 62%; 48px; 9%;
.item span:nth-of-type(3) {75px;
  margin-botom:
div.burger { 11px; 50px;
  cursor: pointer;
}
div.x,div.y,div.z {auto;
  bottom:all 200ms ease-out;all 200ms ease-out
} 10px; 60px;all 100ms ease-out;all 100ms ease-out
}
div.y.squize {
div.y {39px;
}
div.z {80px;
}
div.open div.x,div.open div.z {19px;all 70ms ease-out;all 70ms ease-out
}
div.rotate30 {
  -ms-transform:rotate(30deg);
div.rotate150 {rotate(150deg);
div.rotate45 {rotate(45deg);
div.rotate135 {rotate(135deg);
div.navbar {200px;#385e97
}
div.menu {568px;320px;-190px;
#menu-bg {-10px;-120px;.3;
div.menu.animate #menu-bg { 350%; -143px;
div.menu.animate { -110px; 1; all 500ms cubic-bezier(0,1);
}
div.menu ul { relative; 200px;
}
div.menu ul li {
  list-style: none; 120px; 300px; 50px;
}
div.menu ul li a {1px
}
div.menu.animate ul li { 80px;all 800ms cubic-bezier(0,1)">
div.menu.animate li:nth-of-type(1) {
  transition-delay:0s
}
div.menu.animate li:nth-of-type(2) {.06s
}
div.menu.animate li:nth-of-type(3) {.12s
}
div.menu.animate li:nth-of-type(4) {.18s
}
div.menu.animate li:nth-of-type(5) {.24s
}

script.js

$(document).ready(function() {
    if ('ontouchstart' in window) {
        var click = 'touchstart';
    } else {
        var click = 'click';
    }
    $('div.burger').on(click, () {
        if (!$(this).hasClass('open')) {
            openMenu();
        }  {
            closeMenu();
        }
    });
    $('div.menu ul li a').on(click,1)"> (e) {
        e.preventDefault();
        closeMenu();
    });
     openMenu() {
        $('div.burger').addClass('open');
        $('div.y').fadeOut(100);
        $('div.screen').addClass('animate');
        setTimeout( () {
            $('div.x').addClass('rotate30');
            $('div.z').addClass('rotate150');
            $('.menu').addClass('animate');
            setTimeout( () {
                $('div.x').addClass('rotate45');
                $('div.z').addClass('rotate135');
            },100);
        },10);
    }
     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' () {
            $('div.x').removeClass('rotate30');
            $('div.z').removeClass('rotate150' () {
            $('div.x,div.z').removeClass('collapse');
    }
});

现代都市风 移动端可折叠导航菜单

相关文章

现代都市风移动端可折叠导航菜单