Fredrik Fredrik - 5 months ago 21
Javascript Question

jQuery - slideToggle starting from middle and going out to the left and right

When I press my hamburger icon, I want my navigation menu to show and go from the middle to the left and right so it will fill the whole page.

I've created a codepen showing when it is dropping from the top to the bottom. But what I want it to do is going from the middle to the left and right.

I have been trying to search for an answer but without any luck.

Link: http://codepen.io/anon/pen/dXvzRJ

<div class="button"></div>
<div class="box"></div>

.button{

height: 20px;
width: 20px;
background: #333;
}

.box{

height: 400px;
background: #000;
display: none;
}

$(document).ready(function(){
$('.button').click(function(){
$('.box').slideToggle('slow');
});
});

Answer

You have this options:

With CSS

On css you can use transition to animate the width of the element:

.box{
  height: 400px;
  width:0;
  margin:0 auto;
  background: #000;
  transition:all .6s linear;
}
.box.open {
  width:100%;
}
$(document).ready(function(){
    $('.button').click(function(){
        $('.box').toggleClass('open');
    });
});

Updated Codepen


With JqueryUI

If you can include JqueryUI just use the clip effect :

$(document).ready(function(){
    $('.button').click(function(){
        $('.box').toggle( "clip", { direction: "horizontal" }, 1000 );
    });
 });

Codepen Demo