码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2020-05-08 18:27:57      阅读：80      评论：0      收藏：0      [点我收藏+]

标签：roi   containe   delay   read   footer   nowrap   utf-8   lib   awesome   

效果图

技术图片

 

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

 

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

标签：roi   containe   delay   read   footer   nowrap   utf-8   lib   awesome   

原文地址：https://www.cnblogs.com/chenyingying0/p/12851759.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！