首页
所有分类
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 相关文章推荐
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
js获取页面description的方法
May 21 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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
软件测试工程师面试题(53) EJB面试题(46) UNIX面试题(27) Servlet面试题(20) 软件工程师面试题(40) Javascript面试题(44) J2EE面试题(19) MySQL面试题(19) PYTHON面试题(27) Ruby面试题(15)
You might like
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[02:31]2014DOTA2国际邀请赛2009专访：干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python可变参数函数用法实例
2015/07/07 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
使用Python封装excel操作指南
2021/01/29 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Tiqets英国：智能手机上的文化和娱乐门票
2019/07/10 全球购物
大型活动组织方案
2014/05/10 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
大连导游词
2015/02/12 职场文书
年会主持人开场白台词
2015/05/29 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
【海涛解说】史上最给力比赛，挑战DOTA极限
2022/04/01 DOTA
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL