My smart navigation system turned into a query plugin
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts/navigation
.gitignore
LICENSE
README.mdown
Theme.plist
colourtag.css
jquery.sdsmartnav.js
jquery.sdsmartnav.min.js
styles.css

README.mdown

sdSmartNav

About sdSmartNav

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.

Contents

  • 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

Usage

  1. include jQuery in the <head/>

  2. initialize the sdNAv object in <script> tags in the <head/>

  3. include this plugin code in the <head/> or within your themes script files

  4. invoke the plugin in the <head> or within your themes script files:

    $.sdSmartNav();
  5. use optional settings (shown here with defaults):

    $.sdSmartNav({
        element:'nav',
        tier1:'#toolbar_horizontal',
        tier2:'#toolbar_sub',
        tier3:'#toolbar_vertical',
        ignore: '#toolbar_responsive',
        drop: false
    });
  6. create plist options for navigation type (see example_options.plist)

  7. add corresponding js files for navigation options (see example_options.js)

Options

  • element: refers to the HTML element type that wraps your navigation list
  • tier1: refers to the id or class used identify the above navigation element
  • tier2: refers to the id or class used identify the second level navigation
  • tier3: refers to the id or class used identify the third level navigation
  • ignore: refers to the id or class used identify a container that might hold navigation but which you want sdSmartNav to ignore
  • drop: boolean setting to turn on drop menus (true)

Example HTML

<!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>