Wednesday, 25 September 2013

Jquery accordian menu

Jquery accordian menu Demo Page Fork me on GitHub

navgoco

{:navgoco} is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

Homepage | GitHub | JQuery | ReadMe | Changelog v0.1.5


$(document).ready(function() {
    // Initialize navgoco with default options
    $("#demo1").navgoco({
        caret: '<span class="caret"></span>',
        accordion: false,
        openClass: 'open',
        save: true,
        cookie: {
            name: 'navgoco',
            expires: false,
            path: '/'
        },
        slide: {
            duration: 400,
            easing: 'swing'
        }
    });

    $("#collapseAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', false);
    });

    $("#expandAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', true);
    });
});
<ul id="demo1" class="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">News and Events</a>
        <ul>
            <li><a href="#">Hot News</a></li>
            <li><a href="#">RSS Feeds</a></li>
            <li><a href="#">Peach Events</a></li>
            <li><a href="#">User Groups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Public Relations</a></li>
            <li><a href="#">Investors</a></li>
            <li><a href="#">Working at Peach</a></li>
            <li><a href="#">Environment</a></li>
            <li><a href="#">Contact Us</a>
                <ul>
                    <li><a href="#">Support and Service</a></li>
                    <li><a href="#">Product Feedback</a></li>
                    <li><a href="#">Website Feedback</a></li>
                </ul>
            </li>
            <li><a href="#">Working with Peach</a>
                <ul>
                    <li><a href="#">Procurement</a></li>
                    <li><a href="#">Supplier Responsibility</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Where to Buy</a>
        <ul>
            <li><a href="#">Where can I buy Peach products?</a></li>
            <li><a href="#">Peach Online Store</a></li>
            <li><a href="#">Peach Store for Business</a></li>
            <li><a href="#">Peach Store for Education</a></li>
            <li><a href="#">Peach Online Store Country Selector</a></li>
            <li><a href="#">Peach Retail</a></li>
            <li><a href="#">Find a Reseller</a></li>
            <li><a href="#">Peach Financial Services</a></li>
            <li><a href="#">Peach Rebates</a></li>
        </ul>
    </li>
</ul>
<p class="external">
    <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
</p>

$(document).ready(function() {
    $("#demo2").navgoco({accordion: true});
});
<ul id="demo2" class="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">News and Events</a>
        <ul>
            <li><a href="#">Hot News</a></li>
            <li><a href="#">RSS Feeds</a></li>
            <li><a href="#">Peach Events</a></li>
            <li><a href="#">User Groups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Public Relations</a></li>
            <li><a href="#">Investors</a></li>
            <li><a href="#">Working at Peach</a></li>
            <li><a href="#">Environment</a></li>
            <li><a href="#">Contact Us</a>
                <ul>
                    <li><a href="#">Support and Service</a></li>
                    <li><a href="#">Product Feedback</a></li>
                    <li><a href="#">Website Feedback</a></li>
                </ul>
            </li>
            <li><a href="#">Working with Peach</a>
                <ul>
                    <li><a href="#">Procurement</a></li>
                    <li><a href="#">Supplier Responsibility</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Where to Buy</a>
        <ul>
            <li><a href="#">Where can I buy Peach products?</a></li>
            <li><a href="#">Peach Online Store</a></li>
            <li><a href="#">Peach Store for Business</a></li>
            <li><a href="#">Peach Store for Education</a></li>
            <li><a href="#">Peach Online Store Country Selector</a></li>
            <li><a href="#">Peach Retail</a></li>
            <li><a href="#">Find a Reseller</a></li>
            <li><a href="#">Peach Financial Services</a></li>
            <li><a href="#">Peach Rebates</a></li>
        </ul>
    </li>
</ul>

$(document).ready(function() {
    $("#demo3").navgoco({
        accordion: true,
        onClickBefore: function(e, submenu) {
            alert('Clicked on '+ (submenu === false ? 'leaf' : 'branch') + ' `'+$(this).text()+'`');
        },
        onClickAfter: function(e, submenu) {
            e.preventDefault();
            $('#demo3').find('li').removeClass('active');
                var li =  $(this).parent();
                var lis = li.parents('li');
                li.addClass('active');
                lis.addClass('active');
        },
        onToggleBefore: function(submenu, opening) {
            var idx = submenu.attr('data-index');
            var message = opening ? 'opening' : 'closing';
            console.log('I am ' + message + ' menu ' + idx + ' just after this.');
        },
        onToggleAfter: function(submenu, opened) {
            var idx = submenu.attr('data-index');
            var message = opened ? 'opened' : 'closed';
            console.log('I ' + message + ' menu ' + idx + ' just before this.');
        }
    });
});
<ul id="demo3" class="nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">News and Events</a>
        <ul>
            <li><a href="#">Hot News</a></li>
            <li><a href="#">RSS Feeds</a></li>
            <li><a href="#">Peach Events</a></li>
            <li><a href="#">User Groups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Public Relations</a></li>
            <li><a href="#">Investors</a></li>
            <li><a href="#">Working at Peach</a></li>
            <li><a href="#">Environment</a></li>
            <li><a href="#">Contact Us</a>
                <ul>
                    <li><a href="#">Support and Service</a></li>
                    <li><a href="#">Product Feedback</a></li>
                    <li><a href="#">Website Feedback</a></li>
                </ul>
            </li>
            <li><a href="#">Working with Peach</a>
                <ul>
                    <li><a href="#">Procurement</a></li>
                    <li><a href="#">Supplier Responsibility</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Where to Buy</a>
        <ul>
            <li><a href="#">Where can I buy Peach products?</a></li>
            <li><a href="#">Peach Online Store</a></li>
            <li><a href="#">Peach Store for Business</a></li>
            <li><a href="#">Peach Store for Education</a></li>
            <li><a href="#">Peach Online Store Country Selector</a></li>
            <li><a href="#">Peach Retail</a></li>
            <li><a href="#">Find a Reseller</a></li>
            <li><a href="#">Peach Financial Services</a></li>
            <li><a href="#">Peach Rebates</a></li>
        </ul>
    </li>
</ul>


No comments:

Post a Comment