SlideMenu - jQuery Responsive Sliding Menu

About

SlideMenu is a jquery plugin to help you create responsive slide navigations. It supports show and hide CSS3 animations, unlimited slides, custom themes and multiple instances. The plugin can be deployed easily. It runs on all modern browsers and mobile devices. You can customize the plugin by adding CSS or LESS code to the themes and also changing settings.

The following video movie will show you the plugin work on a test site. This video is a quick overview. Please use our contact form if you have any further questions.

Demo & Features

Multiple Instances - use multiple instances on the same page
Unlimited Number of Slides – you can use unlimited numbers of submenus
CSS3 Animations - over 60+ CSS3 animations are available to give some stunning effects to the menu
Responsive - render well on a variety of devices
View customization - is easy to customize, including the themes and source files
Easy Integration
Help via Email
and so more..

Information:

All demo files are accessible by request through mail after purchase of the package.

How To Use

Create a simple HTML file

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
    });

});