There is no easier way to build a menu as with jQuery Scrollmenu. It will automatically walk through your headings and build anchors and IDs.
Just insert the JavaScript after the jQuery library
<script type="text/javascript" src="path/to/jquery.scrollmenu.js"></script>
Simple call the plug-in after your container selector and insert the menu wherever you want:
(function($) {
$(document).ready(function() {
var menu = $('body').scrollmenu(/* options */);
$('#nav').append(menu.scrollmenu('get'));
});
}(jQuery));
There is no style included by default. If you want to hide all second-level sub-menus you can use this snippet:
ul.menu {
ul {
display: none;
}
li.active {
> ul {
display: block !important;
}
}
}
Or if you just use CSS:
ul.menu ul {
display: none;
}
ul.menu li.active > ul {
display: block !important;
}
Start at this header.
Default: 'h2'
Options: 'h1'
, 'h2'
, 'h3'
, 'h4'
, 'h5'
, 'h6'
Type: jQuery selector
Depth from start
point; 0 for disabling depth selectors.
Default: 2
Type: Integer
Scroll speed when click on a menu item; 0 for disabling.
Default: 400
Type: Integer
Amount of pixels from the window top.
Default: 0
Type: Integer
Active item offset. Will set the active class on the menu earlier the higher it is.
Default: 0
Type: Integer
Toggle classes while jumping (scrolling) to a header.
Default: false
Type: Boolean
Selector to disable a header. Will be used within the .not()
function.
Default: '[disabled]'
Type: jQuery selector
Selector or function to disable a header. Will be used within the .not()
function.
Default: '[disabled]'
Type: jQuery selector|function
Class name for current list item.
Default: 'active'
Type: String
Class name for parent list item of the current item.
Default: 'active'
Type: String
Class name for the root list.
Default: 'menu'
Type: String
Add to browser history (IE>9 required).
Default: true
Type: Boolean
Fired before jumping to a header.
Fired after jumping to a header.
jQuery Scrollmenu is released under the MIT license
parentClass
will now be set to the current, if there is no parent<li>
- Fixed resetting parent class
- Replaced
disableHeaderSelector
withnot
.
disableHeaderSelector
is now marked as deprecated and will be removed in the next major release.
- Fixed default
jumpSpeed
value in documentation - Added .jshintrc
- Changed default disable selector to
[disabled]
- Code optimizations
- New approach to set history (IE>9); Set history as opt-out
- Added callbacks
- Better offset (scroll- and active-offset are now separated)
- Active classes now applied after DOM is ready (initial)
- Remove debug information
- Fixed generating IDs
- Add README.md and documentation
- Add LICENSE
- Add Bower and npm
- Add refresh and destroy functions
- Add option to not apply classes while scroll to an header
- Add option to disable a header
- Classes are missing after reloading
- Don't set default parameters since it comes with ECMAScript 6
- Some bug-fixes
- First pre-release