1.HTML代码

三

• ZZES

• MENU TITLE 1
• MENU TITLE 2
• MENU TITLE 3
• MENU TITLE 4
• MENU TITLE 5
• MENU TITLE 6
• MENU TITLE 7

Main Content

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代码

• list
• list
• list
• list
• list
• list

打开/关闭右侧侧边栏

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代码

三

• LOGO

•  and List

•  and List

•  and List

•  and List

•  and List

2)JavaScript代码

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"

}

}

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;

}