1.HTML代码
<aside class="box" id="test">
<button id="btn">三</button>
<ul>
<li>
<h3>ZZES</h3>
</li>
<li><a href="#">MENU TITLE 1</a></li>
<li><a href="#">MENU TITLE 2</a></li>
<li><a href="#">MENU TITLE 3</a></li>
<li><a href="#">MENU TITLE 4</a></li>
<li><a href="#">MENU TITLE 5</a></li>
<li><a href="#">MENU TITLE 6</a></li>
<li><a href="#">MENU TITLE 7</a></li>
</ul>
</aside>
<section>
<h1>Main Content</h1>
</section>
2.CSS代码
* {
margin: 0;
padding: 0;
}
body {
max-width: 1920px;
}
#btn {
position: absolute;
top: 22%;
left: 298px;
height: 75px;
border: 0;
border-left: 1px solid rgb(23, 32, 43, 0.2);
background: #AA3344;
color: #fff;
cursor: pointer;
}
.box {
float: left;
position: relative;
left: 0;
height: 1000px;
width: 300px;
margin-left: 0;
display: block;
background-color: #a34;
-moz-transition: margin-left 2s;
transition: margin-left 2s;
}
aside ul li {
height: 40px;
line-height: 40px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
list-style-type: none;
text-align: center;
}
aside ul li a {
width: 100%;
height: 100%;
text-decoration-line: none;
color: #fff;
display: block;
}
aside ul li a:hover {
background: #d3d;
}
section {
width: 100%;
height: 100%;
background: #d4d4d4;
height: 1000px;
}
section h1 {
text-align: center;
border-bottom: 1px solid #fff;
}
3.JavaScript代码
var box = document.getElementById("test")
var btn = document.getElementById("btn")
btn.onclick = function() {
if (box.offsetLeft == 0) {
box.style['margin-left'] = -300 + "px"
} else {
box.style['margin-left'] = 0 + "px"
}
}
4.右侧侧边栏的问题
写右侧侧边栏的时候，使用margin-right,会发先页面右侧溢出
这是只要再body里加入
overflow-x:hidden;即可
5.另一个写法
使用定位的方式
1）HTML代码
<aside id="aside">
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</aside>
<position>
<button onclick="toggle()">
打开/关闭右侧侧边栏
</button>
</position>
2）CSS样式
body {
position: relative;
left: 0;
padding: 0;
margin: 0;
/*overflow-x:hidden;*/
}
aside {
width: 300px;
height: 100%;
position: fixed;
right: 0;
top: 0;
background: #d4d4d4;
transition: right 2s ease;
}
.open {
right: 0px;
}
.close {
right: -300px;
}
3）JS代码
var aside = document.getElementById("aside")
function toggle() {
if (aside.offsetLeft == 1066) {
aside.setAttribute("class", "close")
} else {
aside.setAttribute("class", "open")
console.log("not in")
}
}
6.侧边栏缩入，保留小图标
原理就是，将不要显示的display:none;掉，然后将侧边栏宽度减小，修改一些样式即可
演示地址：http://runjs.cn/detail/dopafak1
1）html代码
<body>
<aside>
<button class="btn" onclick="list()">三</button>
<ul>
<li class="first">
<div class="logo">
LOGO
</div>
</li>
<li>
<a href=""><span class="listtext"> and List</span></a>
</li>
<li>
<a href=""><span class="listtext"> and List</span></a>
</li>
<li>
<a href=""><span class="listtext"> and List</span></a>
</li>
<li>
<a href=""><span class="listtext"> and List</span></a>
</li>
<li>
<a href=""><span class="listtext"> and List</span></a>
</li>
</ul>
</aside>
</body>
2）JavaScript代码
<script>
var body = document.getElementsByTagName("body")[0]
var aside = document.getElementsByTagName("aside")[0]
function list() {
if (aside.clientWidth <= 40) {
body.className = ""
} else if (aside.clientWidth > 40) {
console.log("side")
body.className = "minibody"
}
}
</script>
3）CSS代码
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
position: absolute;
height: 100%;
width: 100%;
}
a {
text-decoration-line: none;
color: #fff;
}
aside {
height: 100%;
width: 300px;
position: relative;
left: 0;
top: 0;
background: #243747;
transition: width .5s;
}
aside .first {
height: 20px;
text-align: center;
padding-top: 20px;
padding-bottom: 35px;
}
aside .first .logo {
color: #243747;
font-size: 30px;
background: lightcyan;
border-radius: 20px;
transition: color 2s;
}
aside .first .logo:hover {
color: crimson;
}
aside ul li {
width: 100%;
list-style-type: none;
padding-top: 5px;
}
aside ul li a {
display: block;
padding-left: 20px;
text-align: left;
color: #fff;
transition: color 2s;
}
aside .listtext {
font-size: 30px;
display: inline-block;
}
aside ul li a:hover {
color: #000;
background: lightblue;
}
.icon-package {
width: 30px;
height: 30px;
}
.btn {
border-radius: 5px;
border: 0;
background: #243747;
color: #fff;
position: absolute;
top: 50%;
right: -12px;
height: 44px;
cursor: pointer;
}
/*mini*/
.minibody .listtext {
display: none;
}
.minibody aside {
width: 40px;
text-align: center;
}
.minibody aside ul li a {
padding-left: 0;
}
.minibody aside .first .logo {
font-size: 12px;
}
