CSS3实现侧边栏收缩

 

 

完整代码：

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
    padding:0px;
    margin:0px;
    text-align: center;
    font-family:'微软雅黑',Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
    background-color: #FAFAFA;
}
body.sideMenu{ 
margin:0; 
-webkit-transform:none; 
transform:none; 
}
#sideToggle{ 
display:none; 
}
#sideToggle:checked + aside{ 
left:0;
 }
#sideToggle:checked ~ #wrap{ 
padding-left:120px;
 }
aside{ 
position:absolute; top:0; bottom:0; left:-110px; 
width:110px; 
background:#005e99;
transition:0.2s ease-out; 
-webkit-transition:0.2s ease-out;
z-index:100;
 }
#wrap{
     margin-left:0px; padding:0px 0px 0px 0px;
      transition:0.25s ease-out; 
      -webkit-transition:0.25s ease-out; }
#wrap > label{ 
display:inline-block; 
}
#wrap > label{ 
      float:left;
      background:#005e99;
      border-radius:50px;
      color: #FFF;
      cursor: pointer;
      display: block;
      font-family: Courier New;
      font-size: 25px;
      font-weight: bold;
      width: 30px;
      height: 30px;
      line-height: 35px;
      text-align: center;
      text-shadow: 0 -4px;
    }
#wrap > label:hover{ 
background:#000; 
}
h2{
    color: #FFF;
}
</style>
</head>
<body>
<input type='checkbox' id='sideToggle'>
<aside>
<h2>Hello!</h2>
</aside>
<div id="wrap">
     <label id='sideMenuControl' for='sideToggle'>=</label>
  </div>
</body>
</html>

 

posted @ 2013-11-30 13:06  PiLee  阅读(2402)  评论(0)  编辑  收藏  举报