Replace an (un)ordered list with a form select.

• Menutron
• jQuery Responsive Menu Plugin
• CSS-TRICKS: Convert Menu to Dropdown

Click or scan:

Resize the browser window to see the plugin(s) in action (Firefox 15+ users, check out Responsive Design View).

Source: jquery.harmonia.js | jquery.harmonia.min.js

There are several ways to install this code:

1. Download as a zip.
2. Clone it: $ git clone https://github.com/mhulse/jquery-harmonia.git.
3. Fork it and clone: $ git clone [email protected]:USERNAME/jquery-harmonia.git.
4. Just grab the relevant JS (uglified) files.
5. Using Bower: $ bower install https://github.com/mhulse/jquery-harmonia.git.

Setting up Harmonia is simple …

<ul class="myList">
	<li><a href="http://en.wikipedia.org/wiki/Hebe_(mythology)">Hebe</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Hebe_(mythology)">Hedone</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Nike_(mythology)">Nike</a></li>
	<li><a href="#">No link</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Angelos_(Greek_mythology)">Angelos</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Erinyes">Erinyes</a></li>
	<li><a class="selected" href="http://en.wikipedia.org/wiki/Cronus">Cronus</a></li>
	<li><a href="http://en.wikipedia.org/wiki/Ceto">Ceto</a></li>
</ul>

There are no CSS requirements.

Optionally, depending on your needs, CSS media queries can be used to show/hide the HTML list/form select(s) based on viewport size.

Put jQuery on your page:

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

… and link to the plugin:

<script src="jquery.harmonia.min.js"></script>

Finally, instantiate the plugin:

<script>
	$(document).ready(function() {
		$('.myList').harmonia();
	});
</script>

Here’s an example with all the options:

$('.myList').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); }
});

… where:

1. All options can be overidden via an HTML5 data attribute named data-harmonia-options; the value of this attribute must be valid JSON syntax.

For example:

<ul class="myList toDestroy" data-harmonia-options='{ "classSelect" : "omgWtf", "idSelect" : "yolo", "elementTarget" : "#target", "use" : "after" }'> ... </ul>

Note the nesting order of the single (') and double (") quotes.

1. All options may be defined before plugin initialzation, like: $.fn.harmonia.defaults.XXX = 'foo'; (where XXX is name of option).

2. Move the generated <select> anywhere on the page using the elementTarget option. For example: data-harmonia-options='{ "elementTarget" : "#foo" }', where elementTarget is: <div id="foo"></div> somewhere on page.

3. Nested lists may be used to create <optgroup>s.

For example:

<ul class="myList">
	<li><a href="https://www.google.com">Top</a></li>
	<li>
		<a href="#">Subs</a>
		<ul>
			<li><a href="https://www.google.com">Sub 1</a></li>
			<li><a href="https://www.google.com">Sub 2</a></li>
		</ul>
	</li>
</ul>

… which gets converted to:

<select class="myList">
	<option>Choose ...</option>
	<option value="https://www.google.com">Top</option>
	<optgroup label="Subs">
		<option value="https://www.google.com">Sub 1</option>
		<option value="https://www.google.com">Sub 2</option>
	</optgroup>
</select>

1. A <li> item’s <a>, with class="selected", will apply a selected="selected" attribute to the generated <option>. Note that a selected class will trump the currentPage option.

Check out the demo page for working examples of the aforementioned features.

Please read the CONTRIBUTING.md.

Bugs? Constructive feedback? Questions?

• v1.1.1 milestones
• v1.1.0 milestones
• v1.0.0 milestones

• 2014-07-20   v1.1.1   Versatile.
• 2014-06-26   v1.1.0   Über!
• 2014-04-14   v1.0.0   Stable.
• 2012-08-05   v0.1.0

Copyright © 2013-2014 Micky Hulse

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.