<div id="wrapper">
<div id="box1" class="box">
<div id="menu1" class="menubar mright">1</div>
<div id="content1" class="show"></div>
</div>
<div id="box2" class="box">
<div id="menu2" class="menubar mleft">2</div>
<div id="content2" class="show"></div>
</div>
<div id="box3" class="box">
<div id="menu3" class="menubar mleft">3</div>
<div id="content3" class="show"></div>
</div>
<div id="box4" class="box">
<div id="menu4" class="menubar mleft">4</div>
<div id="content4" class="show"></div>
</div>
<div id="box5" class="box">
<div id="menu5" class="menubar mleft">5</div>
<div id="content5" class="show"></div>
</div>
</div>
@charset "utf-8";
html {
-webkit-text-size-adjust: none;
overflow-x:hidden;
-webkit-tap-highlight-color:rgba(255,255,255,0);
font-size:20px;
}
input {
-webkit-appearance:none;
border-radius: 0;
outline: none;
}
* {
margin: 0;
padding: 0;
border:none;
}
a {
text-decoration: none;
}
body {
font-family: 黑体, arial, helvetica;
overflow-x:hidden;
}
ul, li {
list-style: none;
}
img {
border: none;
max-width: 100%;
height: auto;
width: auto\9;/*ie8*/
}
.clear {
clear: both;
}
.none {
display: none;
}
#wrapper{
width: 100%;
height: 550px;
text-align: center;
position: relative;
}
.box{
height: 500px;
border: 1px solid #000;
float: left;
}
.menubar{
height: 100%;
width: 50px;
border-left: 1px solid;
border-right: 1px solid;
}
.menubar{
cursor: pointer;
}
.mright{
float: left;
position: relative;
}
.mleft{
float: left;
position: relative;
}
.show{
width: 450px;
height: 100%;
position: relative;
float: left;
background-color: #ccc;
}
#box1{
left: 0;
top: 0;
}
#box2{
left: 50px;
top: 0;
width: auto;
}
#box3{
left: 100px;
top: 0;
width: auto;
}
#box4{
left: 150px;
top: 0;
width: auto;
}
#box5{
left: 200px;
top: 0;
width: auto;
}
#content2,#content3,#content4,#content5{
width: 0;
}
$(function() {
$('.menubar').click(function(event) {
$('.show').animate({
width: '0'},
500);
$(this).siblings('.show').animate({
width: '450px'},
500);
});
});