Convert Navigation Menu Into Select List Box For Small Screen Devices – jquery-harmonia

In this tutorial I am going to share simple jQuery plugin which Convert Navigation Menu Into Select List Box For Small Screen Devices. Harmonia is a tiny yet useful jQuery plugin which transforms the regular HTML list into a dropdown select on the mobile device. So when ever you resize the screen for small devices it will transform default Navigation into Select List box.
Convert Navigation Menu Into Select List Box For Small Screen Devices


Libraries

Include the jquery.harmonia.min.js plugin library just after jQuery core library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.harmonia.min.js"></script>

HTML

Create simple HTML menu which neet to convert list box form smaller devices.

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

JS

Finally call the plugin and done!

$(function() {  
 $('.menu').harmonia();
});




Here’s the list of options you can use to customize the plugin:

$('.menu').harmonia({
	currentPage   : false,
	optionDefault : 'Choose ...',
	openTab       : false,
	classSelect   : 'harmonia-select',
	classInit     : 'harmonia-js-enabled',
	use           : 'before',
	idSelect      : '#foo',
	elementTarget : '#target',
	onInit        : function(data) { console.log('onInit:', $(this), data); },
	onAfterInit   : function(data) { console.log('onAfterInit:', $(this), data); },
	onAddOption   : function(data, return) { console.log('onAddOption:', $(this), data, return); },
	onChange      : function(data, el) { console.log('onChange:', $(this), el); }
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by mhulse. Visit their official github repository for more information and follow for future updates.