zoukankan html css js c++ java

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

效果图

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-50em) {
  .htmleaf-header {
  padding:3em 10% 4em
}
.htmleaf-header h1 {
  font-size:2em
}
}@media screen and (max-40em) {
  .htmleaf-header h1 {
  font-size:1.5em
}
}@media screen and (max-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);
    }
});

查看全文

相关阅读:
如何使用SAP Intelligent Robotic Process Automation自动操作Excel
OpenSAML 使用引导 IV: 安全特性
 Spring Cloud Zuul 网关使用与 OAuth2.0 认证授权服务
 微服务架构集大成者—Spring Cloud (转载)
Spring Cloud Eureka 服务注册列表显示 IP 配置问题
 使用 Notification API 开启浏览器桌面提醒
 SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能
 配置 Nginx 的目录浏览功能
 关于 Nginx 配置 WebSocket 400 问题
 Migrate from ASP.NET Core 2.0 to 2.1

原文地址：https://www.cnblogs.com/chenyingying0/p/12851759.html

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

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