JQuery Mobile Menu - Plugin

jQuery Mobilemenu

+ Sehr einfach und Schnell
+ Kein zusätzliches Menü Markup
- Nicht mobile First, Markup wird durch JS erzeugt
- Menüpunkte nicht separat anpassbar
- Nur in Grenzen anpassbar (Position, aussehen) -> CSS ja aber Position im Quellcode ist fix

jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu Instalation

Just include the script on your html files

<script type="text/javascript" src="jquery.mobilemenu.js"></script>

Usage

After including the script on your html, just write this code somewhere on your javascript file.

$('.menu').mobileMenu();

Options

jQuery mobilemenu have some options:

defaultText: default text for option element
className: Class name for dropdown select menu
subMenuClass: Class name for submenu /* Updated you don't need to add class to sub menu */
subMenuDash: Separator for submenu

$('.menu').mobileMenu({
	defaultText: 'Navigate to...',
	className: 'select-menu',
	subMenuDash: '–'
});

Source

jquery.mobilemenu.js

/**
 * jQuery Mobile Menu 
 * Turn unordered list menu into dropdown select menu
 * version 1.1(27-JULY-2013)
 * 
 * Built on top of the jQuery library
 *   http://jquery.com
 * 
 * Documentation
 * 	 http://github.com/mambows/mobilemenu
 */
(function($){
$.fn.mobileMenu = function(options) {
	
	var defaults = {
			defaultText: 'Navigate to...',
			className: 'select-menu',
			subMenuClass: 'sub-menu',
			subMenuDash: '–'
		},
		settings = $.extend( defaults, options ),
		el = $(this);
	
	this.each(function(){
		var $el = $(this),
			$select_menu;

		// ad class to submenu list
		$el.find('ul').addClass(settings.subMenuClass);

		// Create base menu
		var $select_menu = $('<select />',{
			'class' : settings.className + ' ' + el.get(0).className
		}).insertAfter( $el );

		// Create default option
		$('<option />', {
			"value"		: '#',
			"text"		: settings.defaultText
		}).appendTo( $select_menu );

		// Create select option from menu
		$el.find('a').each(function(){
			var $this 	= $(this),
				optText	= '&nbsp;' + $this.text(),
				optSub	= $this.parents( '.' + settings.subMenuClass ),
				len		= optSub.length,
				dash;
			
			// if menu has sub menu
			if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
				dash = Array( len+1 ).join( settings.subMenuDash );
				optText = dash + optText;
			}

			// Now build menu and append it
			$('<option />', {
				"value"	: this.href,
				"html"	: optText,
				"selected" : (this.href == window.location.href)
			}).appendTo( $select_menu );

		}); // End el.find('a').each

		// Change event on select element
		$select_menu.change(function(){
			var locations = $(this).val();
			if( locations !== '#' ) {
				window.location.href = $(this).val();
			};
		});

	}); // End this.each

	return this;

};
})(jQuery);