Created
April 12, 2013 07:17
-
-
Save psdtohtml5/5370138 to your computer and use it in GitHub Desktop.
Mobile : Responsive Navigation inside SELECT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment