maxulyanov / slidingmenu

Magic sliding menu

SlidingMenu

Magic sliding menu

Getting started

1. Include jQuery
2. Include SlidingMenu files (js and css)
3. Create SlidingMenu with your options after window load

<link rel="stylesheet" href="SlidingMenu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="SlidingMenu.js"></script>
<script>
    $(window).on('load', function() {
    
      var $menu = $('.menu-example-id-1');
      var $items = $menu.find('.menu-example__item');
      new SlidingMenu({
        'menu': $menu,
        'items': $items,
      });
    
    })
</script>

Options

Required:

menu — Wrapper items menu (jQuery object)
items — Items menu (jQuery object)

Not required:

itemActiveClass — Active class current item menu (String). Default: 'active'
slidingClass — Custom class sliding element (String). Default: ' '
direction — Direction float sliding 'x' or 'y' (String). Default: 'x'
duration — duration animation in mc (Number). Default: 400

Callbacks

over — Call function during hover menu items
leave — Call function during leave from wrapper menu

<script>
$(window).on('load', function() {

  var $menu = $('.menu-example-id-1');
  var $items = $menu.find('.menu-example__item');
  new SlidingMenu({
    'menu': $menu,
    'items': $items,
  },
  {
    'over': over,
    'leave': leave
  });

  function over(current, data) {
    console.log('hover menu items')
  }

  function leave(current, data) {
    console.log('leave menu')
  }

});
</script>

Browser Support

All modern browsers and IE9+

Example

See detail example - SlidingMenu