移动端侧边栏基于jquery
可前往本人发布资源《移动端侧边菜单栏-Jquery》 免费下载/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="/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");}
