I am creating a "mega menu" which has large panels that slide in and out below the navigation. The problem I am facing is getting the panels to slide in the direction based on if the clicked link is before or after the currently visible link(so if you click a link that comes after the currently visible link, the current panel should slide off the screen to the left and the new panel should slide in from the right). If you click the links in order, it works as desired, but when you start clicking the links out of order, the slide direction gets messed up.
$('.navigation a').click(function(e) {
e.preventDefault();
var prevPanel = $('.navigation a.active').attr('data-panel');
var currPanel = $(this).attr('data-panel');
$('.panel').removeClass('active');
if (currPanel > prevPanel) {
$('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%');
$('.panel.panel-' + currPanel).addClass('active').css('left','0');
} else {
$('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%');
$('.panel.panel-' + currPanel).addClass('active').css('left','0');
}
$('.navigation a').removeClass('active');
$(this).addClass('active');
});body,html {
overflow:hidden;
}
.navigation {
text-align:center;
}
.panel {
width:100%;
height:200px;
position:absolute;
left:100%;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.panel.active {
left:0;
}
.panel-1 {
background:red;
}
.panel-2 {
background:green;
}
.panel-3 {
background:blue;
}
.panel-4 {
background:orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<a href="#" data-panel="1" class="active">Panel 1</a>
<a href="#" data-panel="2">Panel 2</a>
<a href="#" data-panel="3">Panel 3</a>
<a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
<div class="panel panel-1 active">Panel 1 content</div>
<div class="panel panel-2">Panel 2 content</div>
<div class="panel panel-3">Panel 3 content</div>
<div class="panel panel-4">Panel 4 content</div>
</div>All you had to do was reset the positioning before performing the slide-in animation.
$('.navigation a').click(function(e) {
e.preventDefault();
var prevPanel = $('.navigation a.active').attr('data-panel');
var currPanel = $(this).attr('data-panel');
$('.panel').removeClass('active');
if (currPanel > prevPanel) {
$('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%');
$('.panel.panel-' + currPanel).addClass('active').css('left','0');
} else {
$('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%');
$('.panel.panel-' + currPanel).addClass('active').css('left','0');
}
// reset positioning
$(".panel:lt("+ (currPanel - 1) +")" ).css('left','-100%');
$(".panel:gt("+ (currPanel - 1) +")" ).css('left','100%');
// continue
$('.navigation a').removeClass('active');
$(this).addClass('active');
});body,html {
overflow:hidden;
}
.navigation {
text-align:center;
}
.panel {
width:100%;
height:200px;
position:absolute;
left:100%;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.panel.active {
left:0;
}
.panel-1 {
background:red;
}
.panel-2 {
background:green;
}
.panel-3 {
background:blue;
}
.panel-4 {
background:orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<a href="#" data-panel="1" class="active">Panel 1</a>
<a href="#" data-panel="2">Panel 2</a>
<a href="#" data-panel="3">Panel 3</a>
<a href="#" data-panel="4">Panel 4</a>
</div>
<div class="panel-container">
<div class="panel panel-1 active">Panel 1 content</div>
<div class="panel panel-2">Panel 2 content</div>
<div class="panel panel-3">Panel 3 content</div>
<div class="panel panel-4">Panel 4 content</div>
</div>