I use this jQuery plugin in a lot of my themes to help my create complex multi-tiered navigation systems cleanly and effectively. When paired with the right plist options and markup, the user can simply select which type of multi-tier navigation they want and this plugin takes care of the rest.
- jquery.sdsmartnav.js - sdSmartNav script
- jquery.sdsmartnav.min.js - minified sdSmartNav script
- Theme.plist - an example of an option set you might include in your plist
- scripts - the corresponding js files for the plist options
- styles.css - example styles for your basic 3-tier split menu with drop-down's
- colourtag.css - example color styles to correspond to styles.css
-
include jQuery in the
<head/> -
initialize the sdNAv object in
<script>tags in the<head/> -
include this plugin code in the
<head/>or within your themes script files -
invoke the plugin in the
<head>or within your themes script files:$.sdSmartNav();
-
use optional settings (shown here with defaults):
$.sdSmartNav({ element:'nav', tier1:'#toolbar_horizontal', tier2:'#toolbar_sub', tier3:'#toolbar_vertical', ignore: '#toolbar_responsive', drop: false });
-
create plist options for navigation type (see example_options.plist)
-
add corresponding js files for navigation options (see example_options.js)
element:refers to the HTML element type that wraps your navigation listtier1:refers to the id or class used identify the above navigation elementtier2:refers to the id or class used identify the second level navigationtier3:refers to the id or class used identify the third level navigationignore:refers to the id or class used identify a container that might hold navigation but which you want sdSmartNav to ignoredrop:boolean setting to turn on drop menus (true)
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.min.js" charset="utf-8"></script>
<script src="jquery.sdsmartnav.min.js" charset="utf-8"></script>
<script charset="utf-8">
// initiate sdNav object
sdNAv = {};
// invoke sdSmartNav
$(document).ready(function() {
$.sdSmartNav({
element:'nav',
tier1:'.toolbar1',
tier2:'.toolbar2',
tier3:'.toolbar3',
ignore:'.toolbar3.responsive',// same css as .toolbar3 but ignored by sdSmartNav
drop: true
});
});
</script>
%style_variations%
</head>
<body>
<nav class="toolbar3 responsive">%toolbar%</nav>
<nav class="toolbar1">%toolbar%</nav>
<div id="content">
<nav class="toolbar2"></nav>
%content%
</div>
<div id="sidebar">
<nav class="toolbar3"></nav>
%sidebar%
</div>
</body>
</html>