侧滑动菜单在移动端的网站应用非常广泛，几乎每个站点都需要在顶部header的右侧角放置一个侧滑菜单按钮，用于收缩和展开站点的导航菜单，实现在任一个页面都能导航到站点的主要功能页面中，更加方便用户在流量了多级页面后能直接返回首页或者其他功能页面；
本文这里来用原生js+css实现右上角点击右侧划动菜单：
首先来看这个html的结构，顺序很重要，Id为menu_check的input元素，在这里用处很大，用来记住菜单是展开还是收缩起来的。它一定要写在<div class="main_header"> 之前，
因为css中有一个#menu_check:checked~.main_header .main_nav 是通过css的兄弟关系设置样式的；它的作用是当checkbox为checked=true 时，菜单收缩到最右侧不显示出来。
<header> <input id="menu_check" name="" type="checkbox"> <div class="main_header">
右上角的按钮js部分实现直接写在页面代码中，也可以单独放置到一个script标签内，写个function（）函数 这里就直接写在html页面中：
var now=document.getElementById('menu_check').checked;
document.getElementById('menu_check').checked =!!now;
if(!now){
this.setAttribute('class', 'menu_btn open')
}else{
this.setAttribute('class', 'menu_btn')
}完整的代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>这是一个侧滑菜单样例</title>
<style>
.menu_btn {
width: 30px;
height: 30px;
display: block;
position: absolute;
right: 20px;
top: 15px;
z-index: 9999;
}
.menu_btn span {
opacity: 0;
}
#menu_check {
opacity: 0;
position: absolute;
z-index: -2;
}
.main_header{}
.menu_btn::before {
content: "";
position: absolute;
height: 2px;
left: 3px;
width: 30px;
background-color: #1b3d05;
top: 0;
bottom: 0;
margin: auto;
box-shadow: 0 8px 0 #1b3d05, 0 -8px 0 #1b3d05;
-webkit-transition: .3s;
transition: all .3s ease;
}
.main_nav {
position: fixed;
right: -100%;
top: 0;
width: 100%;
height: calc(100%);
background-color: #f7f7f7;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: left;
justify-content: left;
-webkit-box-align: left;
align-items: left;
padding: 60px 25px 25px;
box-sizing: border-box;
z-index: 999;
-webkit-transition: .5s;
transition: .5s;
}
#menu_check:checked~.main_header .main_nav {
right: 0;
}
.menu_btn.open::before {
content: "";
position: absolute;
height: 2px;
left: 5px;
width: 30px;
background-color: #000;
top: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 0 0 0 #fff, 0 0 0 #fff;
}
.menu_btn.open::after {
content: "";
position: absolute;
height: 2px;
left: 5px;
width: 30px;
background-color: #000;
top: 0;
bottom: 0;
margin: auto;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.main_nav a {
display: block;
padding: 5px 0;
color: #000;
font-size: 16px;
text-decoration: none;
}
.navbar-dropdown .navbar-item {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.navbar-link, a.navbar-item {
cursor: pointer;
}
</style>
</head>
<body>
<header>
<input id="menu_check" name="" type="checkbox">
<div>
<div class="wrap wrap_1140">
<div>
<a href="index.html"> <h3>我的视频</h3></a>
</div>
<label onclick="var now=document.getElementById('menu_check').checked; document.getElementById('menu_check').checked =!!now;if(!now){this.setAttribute('class', 'menu_btn open')}else{this.setAttribute('class', 'menu_btn') } "><span>X</span></label>
<nav>
<a href="index.html" target="_blank">桌面版</a>
<a href="mobile.html" target="_blank">移动版</a>
<a href="#" target="_blank">帮 助</a>
<a href="#" target="_blank">社区</a>
<div class="navbar-item ">
<a href="about.html" class="" >
<i class="fas fa-globe"></i> 关于我们 <span></span> </a>
<div aria-labelledby="language-selector">
<a href="contact.html">联系我们</a>
<a href="history.html">历史版本</a>
</div>
</div>
<div class="navbar-item ">
<a href="about.html" >
<i class="fas fa-globe"></i> 中文简体 <span></span> </a>
<div aria-labelledby="language-selector">
<a data-lang="zh_TW" href="/about.html">繁體中文</a>
<a data-lang="en" href="/about.html">English</a>
</div>
</div>
<div>
<h3>联系我们</h3>
<ul>
<li>电话： -----------</li>
<li>邮箱: ---------------</li>
<li>Q Q : ---------------</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>本文全部内容结束，感谢您的阅读，希望能帮助到您；
实用工具： JSON字符串格式化 | js压缩代码格式化工具 | 异步XMLHttpRequests库axios.js文档 | vue-axios文档 | Go语言文档