navgoco
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