現代都市風移動端可摺疊導航菜單

效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="https://fonts.googleap ...

效果圖

index.html

<!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">
    <link rel="stylesheet" href="css/style.css">
</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>

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

script.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);
    }
});

現代都市風 移動端可摺疊導航菜單

現代都市風移動端可摺疊導航菜單