滑动侧边栏实现-CSDN博客

本文详细介绍了如何使用HTML、CSS和JavaScript实现移动端滑动侧边栏效果，包括菜单的展开与折叠，以及页面响应式的处理。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<!-- saved from url=(0025)http://mobile.disney.cn/# -->
<html lang="zh-CN" style="font-size: 12.9375px;">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style class="vjs-styles-defaults">
	
	</style>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>滑动侧边栏</title>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<!--禁止IOS识别号码 -->
	<meta content="email=no" name="format-detection">
	<link href="./css/style.css" rel="stylesheet">
	<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
 <style>
	@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    border: none;
    font-family: "MicrosoftYaHei", "微软雅黑";
}
 
body {
    font-size: 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /*-webkit-transform: translate3d(25.6rem,0,0);*/
}
 
li {
    list-style: none;
}
 
header {
    width: 100%;
    padding: 2rem 0 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    background-color: #fff;
}
 
.d_content {
    margin-top: 7.8rem;
}
 
.content {
    padding: 0rem 1.5rem;
    background-color: #ffffff;
    overflow-x: hidden;
 
    position: relative;
}
.btn_menu {
    width: 1.6rem;
    height: 1.4rem;
    /*background: url("../images/daohang@2x.png") no-repeat;*/
    background: red;
    background-size: 100%;
    position: absolute;
    top: 3.5rem;
    left: 2rem;
}
 

 
/*菜单*/
.menu {
    width: 22rem;
    height: 70rem;
    position: absolute;
    top: 0;
    left: -25.6rem;
    z-index: 20;
    background-color: #f2f4f4;
    /*-webkit-transform: translate3d(-25.6rem,0,0);*/
    /*-webkit-transition: -webkit-transform 1s ease-in-out .1s;*/
}
 
.menu.transition_menu {
    -webkit-transform: translate3d(0rem, 0, 0);
}
 
.menu_logo {
    width: 11rem;
    height: 4.8rem;
    background: url("../images/logo.png") no-repeat;
    background-size: 100%;
    margin: 2rem;
}

.b_block {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
}
 
 
.menu_ul li:after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid #a1a1a1;
    border-right: 2px solid #a1a1a1;
    -webkit-transform: rotate(45deg);
    position: absolute;
    right: 2.2rem;
    top: 1.9rem;
}

 </style>
<body style="overflow: scroll;">
	<!--菜单-->
	<div class="menu">
		<ul class="menu_ul">
			<a href="javascript:;">
				<li class="menu_li menu_li1  menu_li11 ">首页</li>
			</a>
			<!-- menu_li11为选中样式，其他同此-->
			<a href="#">
				<li class="menu_li menu_li2 ">商店</li>
			</a>
			<a href="#">
				<li class="menu_li menu_li3 ">乐园</li>
			</a>
			<a href="#">
				<li class="menu_li menu_li4 ">影视</li>
			</a>
			<a href="javascript:;">
				<li class="menu_li menu_li5 ">数码</li>
			</a>
			<a href="#">
				<li class="menu_li menu_li7 ">迪士尼英语</li>
			</a>
		</ul>
	</div>
	<!-- 页首-->
	<header>
		<a href="#" class="btnMenu">
			<button class="btn_menu"></button>
		</a>
	</header>
 
	<div class="d_content">
		
	</div>
	<!--最大的一块 -->
	<div style="display: none;z-index: 12;" class="b_block"></div>
	<script type="text/javascript">
		jQuery(function(){
 
    jQuery('.btnMenu').click(function(){
 
        jQuery('.menu').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
        jQuery('.d_content').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
        jQuery('header').css({'-webkit-transform':'translateX(25.6rem)','-webkit-transition':'transform 0.5s'});
        jQuery('.b_block').css({'display':'block','z-index':'12'});
        jQuery('body').css('overflow','hidden');
        jQuery('.d_content').addClass('forbid');
        //禁止滑动
        document.addEventListener("touchmove",function(e){
            if(jQuery('.d_content').hasClass('forbid')){
                e.preventDefault();
                e.stopPropagation();
            }
        },false);
    });
    //点击灰层侧边栏收起
    jQuery('.b_block').click(function(){
        jQuery('.menu').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
        jQuery('.d_content').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
        jQuery('header').css({'-webkit-transform':'translateX(0)','-webkit-transition':'transform 0.5s'});
        jQuery('.b_block').css({'display':'none','z-index':'12'});
        jQuery('body').css('overflow','scroll');
        setTimeout(function(){
            jQuery('.d_content').attr('style','');
            jQuery('.d_content').removeClass('forbid');
            jQuery('.d_navwrap').css('position','fixed');
            jQuery('.b_block').css({'display':'none','z-index':'12'});
        },600);
    });
 
 });
 
	</script>
</body>
 
</html>
jq左侧滑动侧边栏
