首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现移动端可折叠导航菜单（现代都市风）

Posted in Javascript onJuly 07, 2020

效果图

JS实现移动端可折叠导航菜单（现代都市风）

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

2.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
}

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

以上就是JS实现移动端可折叠导航菜单（现代都市风）的详细内容，更多关于JS实现折叠导航菜单的资料请关注三水点靠木其它相关文章！

JS实现移动端可折叠导航菜单（现代都市风）

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS中 用户登录系统的解决办法
Apr 15 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
深入理解JavaScript系列（28）：设计模式之工厂模式详解
Mar 03 Javascript
每天一篇javascript学习小结（Array数组）
Nov 11 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
Apr 30 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 #Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 #Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 #Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
vue-i18n实现中英文切换的方法
Jul 06 #Javascript
XPathParser(1) protocol(1) minio(1) ACID(1) 黑屏(2) sock(2) mysqldump(1) Windows server 2003(1) appdata(1) sentinel(1)
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
菜单效果
2006/10/14 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
seajs下require书写约定实例分析
2018/05/16 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
几款好用的python工具库(小结)
2020/10/20 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
车库门开启器、遥控器和零件：Chamberlain
2019/04/09 全球购物
李维斯牛仔裤荷兰官方网站：Levi’s NL
2020/08/23 全球购物
技校生自我鉴定
2013/12/08 职场文书
小学开学典礼主持词
2014/03/19 职场文书
静心口服夜广告词
2014/03/20 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
质检员工作总结2015
2015/04/25 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript