CollapseNav.js - jQuery Responsive Navigation
By PlumTex.com
Hey, thanks for using our simple jQuery plugin.
You can use the plugin for all purposes. Please Star Us in GitHub if you like the plugin.
Simple Responsive Navigation which creates the redundant buttons in Dropdown Menu.
Usage
To use this plugin you should add some lines
Set up your HTML markup
<ul class="collapse-nav"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Design</a></li> <li><a href="#">Business</a></li> <li><a href="#">Inspiration</a></li> </ul>
Add collapseNav.css in your <head>
<link rel="stylesheet" type="text/css" href="collapse-nav/dist/collapseNav.css"/>
Add collapseNav.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="collapse-nav/dist/collapseNav.js"></script>
Initialize your Collapse-Nav in your script file or an inline script tag
$(document).ready(function () { $('.your-class').collapseNav({ setting-name: setting-value }); });
Initialize your Collapse-Nav in your script file or an inline script tag
<html> <head> <title>My Now Amazing Webpage width Responsive Mobile Navigation</title> <link rel="stylesheet" type="text/css" href="collapse-nav/dist/collapseNav.css"/> </head> <body> <ul class="collapse-nav"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Design</a></li> <li><a href="#">Business</a></li> <li><a href="#">Inspiration</a></li> </ul> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="collapse-nav/dist/collapseNav.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.your-class').collapseNav({ setting-name: setting-value }); }); </script> </body> </html>
Using the Plugin
Possible Settings
responsive
Type: boolean
Default: 1
Automatically count the possible buttons in the navigation
number_of_buttons
Type: boolean
Default: 4
Fixed number of buttons in the navigation. Works only if 'responsive' = 0
more_text
Type: string
Default: 'More'
The text on the Drop Down Button
mobile_break
Type: number
Default: 992
With this resolution and higher the script will be init
li_class
Type: string
Default: 'dropdown'
The class of ...
li_a_class
Type: string
Default: 'dropdown-toggle'
The class of ...
li_ul_class
Type: string
Default: 'dropdown-menu'
The class of ...
caret
Type: string
Default: '<span class="caret">'
Element appended immediately after the More text