Html代码
boby部分:
<nav class="navbar">
<span class="open-side">
<a href="#" onclick="openSideMenu()">
<!-- 绘制面包片 -->
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#fff" stroke-width="5"></path>
<path d="M0,14 30,14" stroke="#fff" stroke-width="5"></path>
<path d="M0,23 30,23" stroke="#fff" stroke-width="5"></path>
</svg>
</a>
</span>
<!-- 设置横向导航栏 -->
<ul class="navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- 侧边距构造 -->
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSideMenu()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<!-- 主体部分 -->
<div id="main">
<h1>南舍的折叠式侧边栏demo</h1>
</div>
<!--
简单的js代码说明:
1. 第一个函数的目的是当鼠标点击面包片的时候 使其side-menu增加宽度 main向右移
2.第二个函数的目的是当鼠标点击叉号时 将side-memu隐藏 main向左移
-->
<script>
function openSideMenu(){
document.getElementById('side-menu')
.style.width = '250px';
document.getElementById('main')
.style.marginLeft= '250px';
}
function closeSideMenu(){
document.getElementById('side-menu')
.style.width = '0';
document.getElementById('main')
.style.marginLeft= '0';
}
</script>
js部分:
代码过于简单我就将其写道html便签中
<script>
function openSideMenu(){
document.getElementById('side-menu')
.style.width = '250px';
document.getElementById('main')
.style.marginLeft= '250px';
}
function closeSideMenu(){
document.getElementById('side-menu')
.style.width = '0';
document.getElementById('main')
.style.marginLeft= '0';
}
</script>
css部分
/*去除浏览器的默认格式*/
*{
margin: 0;
padding: 0;
}
boby{
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f4;
}
.navbar{
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a{
float: left;/*通过设置浮动并就将a标签设置为块状元素达到横向排列*/
display: block;
text-align: center;/* 文本居中*/
text-decoration: none;/*去除下划线*/
font-size: 17px;
padding: 14px 16px;
color: white;
}
.navbar ul{
margin: 8px 0 0 0 ;
list-style: none;/* 将列表的点去除 */
}
.navbar a:hover{
background-color: #f4f4f4;
color: black;
}
/* 侧边栏css*/
.side-nav{
height: 100%;
width: 0;
position: fixed;/* 1.固定定位 2.因为设置了定位使其脱离文档流 所以在展开是main里面的字体并不会下移而是往右移*/
z-index: 1;/*设置层级为最高级*/
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;/* 通过宽度为零+overflow-x: hidden; 将其隐藏*/
padding-top: 60px;
transition: 0.5s;
}
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;/* 去除下划线 */
font-size: 22px;
color: #ccc;
display: block;/* 设置为块元素使其垂直分布*/
}
.side-nav a:hover{
color: orange;
}
.side-nav .btn-close{
position: absolute;/*设置绝对定位使其在右上角显示*/
top: 0;
right: 0;
font-size: 36px;
}
#main{
transition: margin-left 0.5s;/*设置平滑过渡*/
padding: 20px;
}
/*设置媒体查询,使其在窗口宽度小于560px 将横向nav隐藏*/
@media(max-width:568px){
.navbar-nav{
display: none;
}
}
注:
1.我已将关键内容及其注意事项写到注释里
2.本次涉及到一点点js代码但很容易理解,请不要担心