Easy to use, semantic approach to responsive navigation.

Download the production version or the development version.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.ResponsiveNavigation.min.js"></script>
<script>
    jQuery(function($) {
        $("header").responsiveNavigation();
    });
</script>

You may pass a settings object when calling the plugin.

search : A selector used to find individual navigation elements. (Default: "nav")

nested : Place nested navs into their own group. (Default: true)

wrap : Whether to wrap the select element or not. (Default: true)

wrapper : The type of element to wrap the select element in. (Default: "nav")

wrapperClass : The class applied the to the wrapper element. (Default: "responsive-nav-wrapper")

wrapperId : The id given the to the wrapper element. (Default: "")

selectClass : The class applied the to the select element. (Default: "responsive-nav")

selectId : The id given the to the select element. (Default: "")

defaultText : The label given to the default option in the select element. (Default: "Navigation")

group : Whether to group the options based on their navigation. (Default: true if more than 1 nav, false otherwise)

groupLabel : The data attribute specified on the navigation used to label the group. (Default: "label")

groupOrder : The data attribute specified on the navigation used to sort the group. (Default: "order")

• Basic Usage
• Multiple Navs
• Reordering Groups
• Nested Lists

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!

• Initial release

Copyright (c) 2012 Jeremy Worboys Licensed under the ☺ Licence.