欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-22 11:56:27
效果图 index.html index

效果图

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

 

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

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

上一篇： jQuery的clone()方法和data()方法

下一篇： 广东最出名的凉茶有哪些?广东的美食有哪些?

推荐阅读