1.給div設置定位。
復習一下——
css中position有五種屬性：
static:默認值，沒有定位
absolute:絕對定位，相對於父級元素進行定位
relative:相對定位
fixed:固定定位,相對於瀏覽器窗口進行定位
inherit:從父元素繼承定位信息
除了默認值static和inherit之外，添加其他三種都可以實現窗口自適應。
在做管控類的項目的時候總會遇到右側的導航欄的折疊和打開問題，不使用js實現，純粹的css實現，更准確的說應該是使用css3的checked實現的。
主要屬性是：
menu :checked + .menu-item-list { max-height: 500px; }
效果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
menu {
width: 180px;
max-height: 100%;
overflow: auto;
background-color: #15f5f5;
}
menu .menu-item {
position: relative;
}
menu .menu-item > input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
opacity: 0;
cursor: pointer;
}
.menu-parent:hover{
background-color: rgba(0, 0, 0, 0.06);
}
.menu-parent:visited{
color: #fff;
background-color: #5375f1;
}
menu span {
display: block;
padding: 5px 10px;
font-size: 16px;
line-height: 36px;
cursor: pointer;
}
menu span:hover {
background-color: rgba(0, 0, 0, 0.06);
}
menu span:active{
color: #fff;
background-color: #5375f1;
}
menu span.menu-child {
font-size: 14px;
text-indent: 20px;
}
menu .menu-item-list {
max-height: 0;
overflow: hidden;
transition: all .3s ease;
}
menu :checked + .menu-item-list {
max-height: 500px;
}
</style>
</head>
<body>
<div class="box">
<menu>
<div class="menu-item">
<span class="menu-parent">菜單1</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
<div class="menu-item">
<span class="menu-parent">菜單2</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
<div class="menu-item">
<span class="menu-parent">菜單3</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
</menu>
</div>
</body>
</html>
升級版
例如要實現這樣的：左側的底部長度不會隨着下拉而拉高。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 50px;
background: #1A2940;
color: #fff;
}
.box{
width: 180px;
height: 100%;
background-color: #6a8bbc;
}
menu {
width: 180px;
/*height: calc(height-50);*/
/*max-height: 100%;*/
overflow: auto;
background-color: #6a8bbc;
}
menu .menu-item {
position: relative;
}
menu .menu-item > input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
opacity: 0;
cursor: pointer;
}
menu .menu-parent:hover{
background: #1A2940;
}
menu .menu-parent:active{
color: #fff;
background-color: #5375f1;
}
menu .menu-parent:visited{
color: #fff;
background-color: #5375f1;
}
menu span {
display: block;
padding: 5px 10px;
font-size: 16px;
line-height: 36px;
cursor: pointer;
}
menu span:hover {
background: #1A2940;
color: #fff;
}
menu span:active{
color: #fff;
background-color: #5375f1;
}
menu span.menu-child {
font-size: 14px;
text-indent: 20px;
}
menu .menu-item-list {
max-height: 0;
overflow: hidden;
transition: all .3s ease;
}
menu :checked + .menu-item-list {
max-height: 500px;
}
.tdcolor { color:red }
</style>
<script type="text/javascript">
var menu = document.getElementsByTagName('menu-parent');
window.onload = function(){
for(var i=0;i<menu.length;i++){
menu[i].onclick = function(){
menuOnclick(this);
}
}
}
function menuOnclick(obj){
for(var j=0;j<menu.length;j++){
if(menu[j]==obj){
menu[j].className = 'tdcolor';
}
}
}
</script>
</head>
<body>
<header>
<img src="/" />aliyun
</header>
<div class="box">
<menu>
<div class="menu-item">
<span class="menu-parent active">概覽</span>
</div>
<div class="menu-item">
<span class="menu-parent">軟件服務</span>
</div>
<div class="menu-item">
<span class="menu-parent">菜單1</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
<div class="menu-item">
<span class="menu-parent">菜單2</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
<div class="menu-item">
<span class="menu-parent">菜單3</span>
<input type="checkbox" name="" value="">
<div class="menu-item-list">
<span class="menu-child">子菜單1</span>
<span class="menu-child">子菜單2</span>
<span class="menu-child">子菜單3</span>
<span class="menu-child">子菜單4</span>
</div>
</div>
</menu>
</div>
</body>
</html>