waSlideMenu - Makes website menu slide like a pro

waSlideMenu is a jQuery plugin that turns big nested (hierarchical) tree into a cool multi-level sliding menu. MIT license.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/waslidemenu.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.waslidemenu.js" type="text/javascript"></script>

2. HTML

<nav id="mymenu">
    <ul>
        <li>
            <a href="#1">Parent</a>
            <ul>
                <li>
                    <a href="#1.1">Child</a>
                    <ul>
                        <li>
                            <a href="#">We need to go deeper</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#1.2">Child</a></li>
            </ul>
        </li>
        <li><a href="#2">Parent</a></li>
        <li><a href="#3">Parent</a></li>
    </ul>
</nav>

3. JAVASCRIPT

$(document).ready(function(){
   $('#mymenu').waSlideMenu({});
});

4. OPTIONS

Slide speed

$('#menu').waSlideMenu({
    slideSpeed: 500
});

By default 400.

Slide effect

$('#menu').waSlideMenu({
    slideEasing: 'linear'
});

Backlink word

$('#menu').waSlideMenu({
    backLinkContent: 'Take me back, sir.'
});

By default Back.

Choose place for backlink (before or after menu)

$('#menu').waSlideMenu({
    backOntTop: true
});

By default false - that means 'after' menu.

Class for current selected menu element

$('#menu').waSlideMenu({
    selectedClass: 'selected-menu'
});

By default 'selected'.

Container selecter, where plugin will load content from menu item url

$('#menu').waSlideMenu({
    loadContainer : '#content'
});

By default '' - nothing is loading.

Minimum menu height

$('#menu').waSlideMenu({
    minHeightMenu : 400
});

By default 0 - no min-height.

Menu auto height

$('#menu').waSlideMenu({
    autoHeightMenu : true
});

By default true, menu height will adjusts for its content.

URL exception

$('#menu').waSlideMenu({
    excludeUri : ['/dont-load/', '#pleasedontloadme']
});

URLs '/dont-load/' and '#pleasedontloadme' will not load in loadContainer. By default ['/', '#'].

Load content only latest nested menu items

$('#menu').waSlideMenu({
    loadOnlyLatest : true
});

By default false. If set to true, then menus will slide without loading content until it reached latest menu item.

Menu selector

$('#menu').waSlideMenu({
    menuSelector : '.i-am-menu'
});

By default 'ul'.

Menu item selector

$('#menu').waSlideMenu({
    itemSelector : '.i-am-menu-item'
});

By default 'li'.

Title for page

$('#menu').waSlideMenu({
    setTitle : true
});

By default false. After menu item URL loading will set Title tag like menu item link text.

Speed of slide up to current menu item

$('#menu').waSlideMenu({
    scrollToTopSpeed : 100
});

By default 0. Sometimes after sliding to nested menu or back menu items disappear from visible area. In this case page will slide up to current menu item (selected item).

5. CALLBACKS

Here this - plugin instance.

After plugin initialization

$('#menu').waSlideMenu({
    onInit : function(){
        alert('Here I am!');
    }
});

After slide to a child submenu

$('#menu').waSlideMenu({
    onSlideForward : function(){
        alert('I slide forward (deeper)!');
    }
});

After slide back to top

$('#menu').waSlideMenu({
    onSlideBack : function(){
        alert('I slide back (bubling)!');
    }
});

After slide animation is completed

$('#menu').waSlideMenu({
    afterSlide : function(){
        alert('Yep! I just slide!!');
    }
});

After click on last node element

$('#menu').waSlideMenu({
    onLatestClick : function(){
        alert('Last element clicked: ' + $(this).text());
    }
});

Here this - clicked element.

After load URL (always)

$('#menu').waSlideMenu({
    afterLoadAlways : function(){
        alert('You URL request just completed!');
    }
});

After success load

$('#menu').waSlideMenu({
    afterLoadDone : function(){
        alert('Nice URL! 200 OK!');
    }
});

After fail load

$('#menu').waSlideMenu({
    afterLoadFail : function(){
        alert('Bad URL :(');
    }
});

$('#menu').on('onInit.waSlideMenu', function(){
    alert('After INIT waSlideMenu Event');
}).on('afterLoadDone.waSlideMenu', function(){
    alert('After URL load success Event');
}).on('afterLoadFail.waSlideMenu', function(){
    alert('After URL load fails Event');
}).on('afterLoadAlways.waSlideMenu', function(){
    alert('After URL request completed Event');
}).on('onLatestClick.waSlideMenu', function(){
    alert('On last node element click Event');
});;