Slide Animations:

SLIDEMENU

The Responsive Sliding Menu Plugin

The Tidy jQuery Responsive
Sliding Menu Plugin

Try it now, just push the button below!!!

jQuery Powered

With jQuery we make the tiny menu plugin with unlimited number of nested lists.

Fully Customizable

Our plugin is easy to customize, including the skins and color schemes.

After Sale Support

If you faced any problem or have a question about this plugin just email us.

The Feature List

  • Full Responsive Layout Design
  • Unlimited Number of Slides
  • 60+ Types of Animation
  • Simple HTML Markup
  • Awesome Looks (5 Predefined Themes)
  • LESS Files For The Theme Creation
  • Easy Integration to Your Projects
  • Help via Email
  • and so more..
FlexMenu Preview

How To Use

1. Load jQuery.js and jquery.slidemenu.min.js in the head section for your html document:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.slidemenu.min.js"></script>

2. Load the CSS base, theme and animation file that styles the menu:

<link rel="stylesheet" type="text/css" href="css/slidemenu.css">
<link rel="stylesheet" type="text/css" href="css/slidemenu.animate.css">
<link rel="stylesheet" type="text/css" href="css/slidemenu.theme.dark.css">

3. Set up your HTML:

<ul id="yourmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li>
        <a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Applications</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Typography</a></li>
        </ul>
    </li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
</ul>

4. Finally just call the plugin on your menu:

4.1 Simple example

$(document).ready(function() {

    $("#yourmenu").slidemenu({theme:"dark-theme"});
    
});

4.2 Advanced example.

$(document).ready(function() {
    
    $("#yourmenu").slidemenu({
        theme: "dark-theme", // CSS styles for menu elements. Change it to match your own theme
        menuWidth: "18em", // the width of the navigation menu
        menuHeight: "24em", // the height of the navigation menu
        responsive: true, // enable or disable the responsive capability
        responsiveWidth: 768, // max-width when the menu changes to narrow layout
        moveDuration: 200, // the time (in ms) determining how long the moving will run 
        moveEasing: null, // the string indicating which easing function to use for the moving
        moveOffset: 0.2, // specifies the offset of the menu after adding a new slide
        closeInterval: 100, // the time (in ms) determining intervals between slide closing animation 
        slidesCenter: true, // center a group of visible slides on the screen
        showClass: null, // specifies the animation by class name to be applied when the submenu is shown
        hideClass: null, // specifies the animation by class name to be applied when the submenu is hidden
        zindex: 9999, // specifies the z-order of the menu and its descendants
        resetBeforeClose: true, // reset the menu state before close it
        slideClose: true, // set this to true to allow users to close the slide
        easyClose: true, // set this to true to allow users to toggle the menu closed with any click
        mobile: false, // enable or disable the animation in the mobile browsers
    });

});