I have written one article on making Responsive Menu with MORE option at http://blog.sodhanalibrary.com/2014/01/responsive-menu-or-navigation-bar-with.html . Now I am adding jQuery plugin flavor. Now you can directly integrate this plugin to your menu.

Installation :

Add CSS and JS files to HTML page
<link rel="stylesheet" href="/css/jRMenuMore.css"/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'>
</script>
<script type='text/javascript' src='/js/jQuery.jRMenuMore.js'></script>

Menu or Navigation Bar - Markup :

Define your Menu in Un-Ordered List 
<ul class="mymenu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
<li><a href="#">item 7</a></li>
<li><a href="#">item 8</a></li>
<li><a href="#">item 9</a></li>
<li><a href="#">item 10</a></li>
<li><a href="#">item 11</a></li>
<li><a href="#">item 12</a></li>
<li><a href="#">item 13</a></li>
<li><a href="#">item 14</a></li>
<li><a href="#">item 15</a></li>
<li><a href="#">item 16</a></li>
<li><a href="#">item 17</a></li>
<li><a href="#">item 18</a></li>
<li><a href="#">item 19</a></li>
</ul>

Usage :

With Class :
$( ".mymenu" ).jRMenuMore();        

With ID :
$( "#mymenu" ).jRMenuMore();        

2 comments:

Blogroll

Popular Posts