Mobile : Responsive Navigation inside SELECT

gistfile1

// Mobile SELECT navigation for responsive websites

/**
* LEGENDS
*/

"#menu-main-menu" 		- is the Main Desktop Navigation UL
"select.navigation"		- is the Mobile Navigation select element

/**
* ASSUMPTIONS
*/
//We assume that the Main Desktop Menu will have a markup like below:
<ul id="menu-main-menu">
	<li>
		<a href="index.html">Home</a>
	</li>
	<li class="current-menu-item">
		<a href="portfolios.html">Gallery</a>
	</li>
	<li>
		<a href="packages.html">Packages</a>
	</li>
	<li>
		<a href="about.html">About</a>
	</li>
	<li>
		<a href="blog.html">Blog</a>
	</li>
	<li>
		<a href="contact.html">Contact</a>
	</li>
</ul>




/***********************************************************
*	THE CODE
***********************************************************/

/**
*	THE HTML
*/
// Create a "select" elemet on page with just the default option
<select class="navigation">
	<option selected="selected">Go to...</option>
</select>



/**
* THE CSS
*/
// Hide mobile Select navigation on large screens
select.navigation{
	display: none;
}
// And show it on Screens with maximum width of 650px
// and hide the Main Desktop Navigation
@media screen and (max-width: 650px) {
	select.navigation{
		display: block;
	}

	#menu-main-menu{
		display: none;
	}
}


/**
*	THE JAVASCRIPT
*/

// Loop over each anchor element inside the main Desktop menu
$("#menu-main-menu li a").each(function() {
	var el = $(this);
	// Find the closest "li" to the current anchor element
	// and check if it has the class "current_page_item"
	if( el.closest("li").hasClass('current_page_item') ){
		// if yes, then make it the currently selected item in the Mobile SELECT Navigation
		isSelected = "selected = 'selected' "
	}else{
		// else it is not the current selected item
		isSelected = ""
	};
	// Prepare HTML for the current "option" inside "select"
	var html = "<option value="+el.attr('href')+ " "+isSelected+ ">"+el.text()+"</option>";
	// append the prepared HTML inside the "select"
	$("select.navigation").append(html);
});
$("select.navigation").change(function() {
	// navigate to the appropriate URL on user selection
	window.location = $(this).find("option:selected").val();
});