移动端侧边菜单栏-Jquery

移动端侧边栏基于jquery

 可前往本人发布资源《移动端侧边菜单栏-Jquery》 免费下载https://download.csdn.net/download/weixin_44767530/21538023

- 目录

- 效果

- 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><title>Document</title>
</head>
<body><header> <div id="nav"><!--js引入 --></div><div class="m-nav" id="m-nav" style="display:none;"><!--js引入 --></div></header>
</body>
</html>

- CSS

img,div,*{margin: 0;padding: 0;}img{vertical-align:top;border:none;}li{list-style: none;}a{text-decoration: none;}header{background: skyblue;}#nav{width: 100%;height: 3.125rem;display: flex;justify-content: center;align-items: center;justify-content: space-evenly;}#nav img{width: 1.4rem;height: 1.4rem;position: absolute;left: 2%;}#nav span{font-size: 1rem;color: #292929;line-height: 1.3125rem;}.m-nav{display: none;position: absolute;top: 3.125rem;left: 0;right: 0;width: 13.875rem;height: 100%;background-color: #fff;background-repeat: no-repeat;background-size: 100% 100%;z-index: 99999;}.m-nav ul {margin: 0 0.9375rem;}.m-nav ul li {border-bottom: solid 1px #F6F72C;position: relative;line-height: 3.4375rem;}.m-nav ul li a {color: #333333;;font-size: .875rem;display: flex;align-items: center;white-space: nowrap;}.m-nav ul li a img{padding-right: 1rem;}.m-nav ul li .xia {position: absolute;top: -0.0625rem;right: 0;width: 0.4375rem;height: 3.5rem;margin-top: 0.25rem;display: flex;justify-content: center;align-items: center;transition: all 300ms;z-index: 999;}header .m-nav ul li .xia.zhuan {transform: rotate(90deg);}.m-nav ul li .xia img {width: 1.5625rem;height: 1.0625rem;}.m-nav ul li .erji {display: none;}.m-nav ul li .erji li a{color: #666666;}.erji li:last-child{border: none;}body{background: #292929;}

- JS

// rem响应式布局公式，375代表设计图纸是375宽(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=375){docEl.style.fontSize = '16px';}else{docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);recalc();})(document, window);
//图
var a=document.getElementById('nav')a.innerHTML+='<img class="header_menu" src="./img/nav.png" alt=""><span>有限有限公司</span>'
//导航栏
var b=document.getElementById('m-nav')b.innerHTML+='<ul><li><a href=""><img src="./img/shouyeicon.png" alt="">首页</a></li><li><a href="#"><img src="./img/shizi.png" alt="">教学</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">导师</a></li><li><a href="#">动作</a></li></ul></li><li><a href="#"><img src="./img/kaoji.png" alt="">考级</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">培训</a></li><li><a href="#">培训</a></li><li><a href="#">裁判</a></li><li><a href="#">等级</a></li></ul></li><li><a href="#"><img src="./img/saishi.png" alt="">赛事</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">赛事</a></li><li><a href="#">赛事</a></li></ul></li><li><a href="#"><img src="./img/chaxun.png" alt="">查</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">师资</a></li><li><a href="a></li><li><a href="#">合作</a></li></ul></li><li><a href="#"><img src="./img/guanyu.png" alt="">关于</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">中国体育</a></li><li><a href="#">中国体育</a></li></ul></li><li><a href="#"><img src="./img/shangwu.png" alt="">商务合作</a><div class="xia"><img src="./img/menu-xia.png" alt=""></div><ul class="erji"><li><a href="#">联系我们</a></li><li><a href="#">培训</a></li></ul></li></ul>'// 移动端侧边菜单$('.header_menu').click(function () {$(this).toggleClass('check')$('.m-nav').animate({width:'toggle'},350)$('html, body').toggleClass('lock-back');var a = $(this).attr('class')if( a == "header_menu check"){unScroll()}else{removeUnScroll()}});$('.m-nav').click(function () {$('header .m-icon').removeClass('check')$(this).slideUp(300)});$('.m-nav li').click(function () {stopBubble();});$('.m-nav li .xia').click(function () {$(this).toggleClass('zhuan')$(this).next('.erji').slideToggle(300);$(this).next('.erjityd').slideToggle(300);});// 阻止冒泡function stopBubble(e) {if (e && e.stopPropagation) {e.stopPropagation()} else {window.event.cancelBubble = true}}// 禁止滚动function unScroll() {var top = $(document).scrollTop();$(document).on('scroll.unable',function (e) {$(document).scrollTop(top);})}// 允许滚动function removeUnScroll() {$(document).unbind("scroll.unable");}

移动端侧边菜单栏-Jquery相关推荐

响应式多级菜单侧边菜单栏_使用纯HTML和OmniFaces构建动态响应的多级菜单
响应式多级菜单侧边菜单栏最近,我不得不使用JSF 2.2创建一个响应式多级菜单. 要求:菜单应: 从后端使用动态结构创建 React灵敏,例如对桌面和移动设备友好有带有导航链接的子菜单项支持触 ...
响应式多级菜单侧边菜单栏_大菜单，小屏幕：响应式，多级导航
响应式多级菜单侧边菜单栏如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航. 对于简单的导航,解决方案可以很简单. 但是,如果您要处理的事情比较复杂,可能有 ...
iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实 ...
侧边菜单栏 android-menudrawer
这是github上的一款开源项目,类似于人人网可滑动的侧边菜单栏-----android-menudrawer. 使用方法也很简单. 1.将下载的包解压放入你的工作目录下 2.利用Eclipse通过n ...
vue菜单点击html,基于vue.js实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的自己手写了一个下面是效果图下面就说一下实现的过程还是比较简单的首先导入一下需要的文件接下来就是我的html 主页系统用户管理权限设置操作日志设 ...
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
一.简单的导航栏首先通过一个入门级的导航栏来练习一下 1.先布局好html的结构 2.通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理,在不同过js的情况下,就可以轻松 ...
vue 手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码
编程之家收集整理的这篇文章主要介绍了Vue实现侧边菜单栏手风琴效果实例代码,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 效果图如下所示: {{item.name}} { // 判断如 ...
如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
前言在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏 ...
【DIY小记】Ubuntu22.04去掉侧边菜单栏Floppy Disk图标的方法
近期装Ubuntu22.04虚拟机,发现侧边菜单栏多了个Floppy Disk图标.软驱这东西毕竟是上世纪的了,2022年也没什么用,但就是找不到入口去掉这个冗余的图标. 今天偶然之间发现去掉图标的方 ...

移动端侧边菜单栏-Jquery

移动端侧边栏基于jquery

- 目录

- 效果

- 代码

- CSS

- JS

移动端侧边菜单栏-Jquery相关推荐

最新文章

热门文章