首页
所有分类
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 相关文章推荐
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
微信小程序 POST请求（网络请求）详解及实例代码
Nov 16 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
你或许不知道的一些npm实用技巧
Jul 04 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
二维码(2) 目录管理(1) plus.io(1) Post(1) 虚拟机(3) 日志(1) 条码(1) Get(1) html5+(1) 磁盘管理(1)
You might like
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
php写app用的框架整理
2019/09/29 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Jquery把获取到的input值转换成json
2017/05/15 jQuery
从setTimeout看js函数执行过程
2017/12/19 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Tesserocr库的正确安装方式
2018/10/19 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python实现吃苹果小游戏
2020/03/21 Python
荣耀商城：HIHONOR
2020/11/03 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js