Responsive Menu jQuery Plugin

responsiveMenu.js is a jQuery plugin that will create a select box dropdown for responsive designs. All you have to do is call it on the ordered or unordered list that makes up your main menu and responsiveMenu.js will create a select dropdown list and append it to your main menu. You can then use CSS3 media queries to show/hide your main menu and your newly created dropdown menu depending on the width of the browser.

View Demo »

So if you have an unordered list like so…

<ul id="mainMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

responsiveMenu.js can be called on the menu…

<script type="text/javascript">
  $(document).ready(function() {
    $("#mainMenu").responsiveMenu();
  });
</script>

…and then a dropdown select menu will be created.

You can then use media queries to show or hide each menu depending on the width of the browser window.

#mainMenu { display:block; list-style-type: none; padding-left:0px; }
#mainMenu li { float:left; margin-right:10px; }
#responsiveMenu { display:none; }
@media only screen and (max-width: 480px) {
  #mainMenu { display:none; }
  #responsiveMenu { display:block; }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
  #mainMenu { display:none; }
  #responsiveMenu { display:block; }
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  #mainMenu { display:none; }
  #responsiveMenu { display:block; }
}

What’s great about this plugin is that it will automatically navigate to the correct page when you change the dropdown. You do not need to add any additional events. The plugin does this for you!

Options

Here are the options that you can specify…

Option	Values	Default Value	Description	Example
selectBoxID	String	“responsiveMenu”	This is the name of the id selector that will be applied to the select element created by the responsiveMenu.js plugin e.g. <select id=”responsiveMenu”></select>	selectBoxID: “myDropdownMenu”
defaultOptionText	String	“Select a page…”	This is the value of the first selected item in the dropdown.	defaultOptionText: “Please select a page…”

License

Licensed under the MIT License. Basically free to use and abuse as you see fit — including using it commerical projects. Please just give me a little bit of attribution somewhere by keeping the license info in the .js file. Also, if you’d like to buy me a coffee or a beer, that’d be great too…

$ Donate »

Enough talk, where can I get it?

Right here…

View Demo Download