Skip to content

Instantly share code, notes, and snippets.

@psdtohtml5
Created April 12, 2013 07:17
Show Gist options
  • Save psdtohtml5/5370138 to your computer and use it in GitHub Desktop.
Save psdtohtml5/5370138 to your computer and use it in GitHub Desktop.
Mobile : Responsive Navigation inside SELECT
// 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