For a fullscreen three-column menu I've created three absolute-positioned div boxes and made each of them expand horizontally fullscreen with a JQuery selector and the toggle command. It works, but I'd like to have the animation smoothly. How could I do that?
Here's the JSFiddle code for it.
This is the HTML code:
<body>
<div id='controls' style="background-color: green;" onclick="fullscreen();">
</div>
<div id='controls_002' style="background-color: yellow;" onclick="fullscreen_002();">
</div>
<div id='controls_003' style="background-color: purple;" onclick="fullscreen_003();">
</div>
This is the JQuery code:
$(document).ready(function(){
$('.wrapper div').click(function() {
$(this).toggleClass('active');
$(this).siblings().not(this).toggleClass('hide');
});
});
And this is the CSS code:
.wrapper{
top: 0px;
left: 0px;
padding: 0px;
width: 100%;
height: 100%;
position: absolute;
}
.blue{
width: 33.33333333%;
height: 100%;
cursor: pointer;
background: blue;
}
.red{
width: 33.33333333%;
height: 100%;
cursor: pointer;
background: red;
}
.green{
width: 33.33333333%;
height: 100%;
cursor: pointer;
background: green;
}
div{
float: left;
}
.active{
height: 100%;
width: 100%;
}
.hide{
display: none;
}