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