How can I optimize this menu?
Here's a jsfiddle !
I am trying to create a user page where he can switch between pages by clicking on a div. The problem is I will need more than 3 divs and this is already very messy ...
<div id="dviOverdivWraper">
<div class="containterBox">
<div id="leftOver" style="background-color:blue">
</div>
<div id="rightOver" style="background-color:red">
</div>
<div id="thirdOver" style="background-color:yellow">
</div>
</div>
</div>
#dviOverdivWraper {
width: 800px;
height: 400px;
margin: 0px auto;
top: 200px;
text-align:center;
}
#dviOverdivWraper .containerBox{
width: 800px;
height: 400px;
margin: 0px auto;
text-align:center;
}
#leftOver{
width: 400px;
height: 200px;
float: left;
}
#rightOver, #thirdOver{
width: 50px;
height: 200px;
float: left;
}
$("#rightOver").click(function () {
$("#leftOver").animate({
width: "50px"
}, 500, null);
$("#rightOver").animate({
width: "400px"
}, 500, null);
$("#thirdOver").animate({
width: "50px"
}, 500, null);
});
$("#leftOver").click(function () {
$("#rightOver").animate({
width: "50px"
}, 500, null);
$("#leftOver").animate({
width: "400px"
}, 500, null);
$("#thirdOver").animate({
width: "50px"
}, 500, null);
});
$("#thirdOver").click(function () {
$("#rightOver").animate({
width: "50px"
}, 500, null);
$("#leftOver").animate({
width: "50px"
}, 500, null);
$("#thirdOver").animate({
width: "400px"
}, 500, null);
});
How can I optimize it because I will need more than three divs?
source to share
jsFiddle DEMO
// SET MIN WIDTH:
var minW = 50;
// SET MAX WIDTH:
var maxW = 400;
// SET INITIALLY OPENED BOX:
var openBox = 1;
// SET ANIMATION SPEED (in milliseconds)
var speed = 400;
//////////////////////
$('.box').eq(openBox-1).width(maxW).siblings().width(minW); // initial setup
function animate(){
$('.box').eq(openBox).stop().animate({width: maxW},speed).siblings().animate({width: minW},speed);
}
$('.box').on('click', function(){
openBox = $(this).index();
animate();
});
PS: I just added a class .box
to your elements.
source to share
Add class="over"
in each of the three sections and then you can use this code:
$(document).ready(function () {
$("#dviOverdivWraper .over").click(function() {
if ($(this).width() == 50) {
$("#dviOverdivWraper .over").not(this).animate({width: "50px"}, 500);
$(this).animate({width: "400px"}, 500);
}
});
});
You can see how it works here: http://jsfiddle.net/jfriend00/5UbQM/ .
What follows is the DRY principle of non-repeating code, and it automatically maintains all sections you have without changing your code.
source to share
It will work. You can try in this jsfiddle . It doesn't require any changes to your HTML.
$(document).ready(function () {
$(".containterBox > div").click(function() {
$(".containterBox > div").not(this).animate({
width: "50px"
}, 500, null);
$(this).animate({
width: "400px"
}, 500, null);
});
});
source to share
I would suggest using a horizontal accordion like here:
http://nicolahibbert.com/demo/liteAccordion/
or here
source to share
Add class="myitem"
to your divs.
$(document).ready(function () {
$(".myitem").first().animate({width:"400"});
$(".myitem").not(":first").animate({width:"50"})
$(".myitem").on("click",function(){
$(".myitem").not(this).animate({width:"50"})
$(this).animate({width:"400"});
});
});
here's the jsfiddle .
source to share