A Pen by dani-z.

A-Pen-by-dani-z.markdown

A Pen by dani-z

A Pen by dani-z on CodePen.

License.

index.html

<div class="menu">
  <a class="js-toggle-menu" href="#">Open / Close</a>
  
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

script.js

$('.js-toggle-menu').on('click', function( evt ) {
  evt.preventDefault();
  
  var target = $('ul');
  
  target.slideToggleH();
});


// TODO: Improvements using custom options and grab the width/height automatic
(function($) {
    var defaults = {
        speed: 0
    }

    $.fn.extend({
        slideRight: function() {
            return this.each(function() {
                $(this).animate({
                    left: '0'
                }, 200);
            });
        },
        slideLeft: function() {
            return this.each(function() {
                $(this).animate({
                    left: '-270px'
                }, 200);
            });
        },
        slideToggleH: function() {
            return this.each(function() {
                var el = $(this);
                if (el.css('left') == '-270px') {
                    el.slideRight();
                } else {
                    el.slideLeft();
                }
            });
        }
    });
})(jQuery);

style.css

.menu {
  position: relative;
}

ul {
  position: absolute;
}