Creating a Mobile Dropdown Menu with jQuery

July 27th, 2012

When developing responsive layouts, often you’ll come across navigation that’s tricky to arrange, due to size, number of items, etc. One of my favourite ways to tackle this problem, is to hide that menu and replace it with a standard dropdown menu, when the viewport hits a certain size. It’s simple, and will work on almost every phone. 

So lets get started. Although navs can be structured in a multitude of ways, lets assume you’ve structured yours somewhat like this:

<ul id="main-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="folio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Great, we have our standard navigation structure! Now just before your nav, let’s drop in an empty <select> element. Give it a class, like ‘mobile-nav’. Done? Cool! With jQuery, we’re going to dynamically insert our <option> tags, based off of the contents of your main nav. Here’s the code.

$(document).ready(function(){
//Iterate over each list item, extract some attributes, and append an item to our dropdown
	$('ul#menu-main-menu').children('li').each(function(i){
		if($(this).css('display') != 'none')
			$('.mobile-menu').append('<option value="'+$(this).children('a').attr('href')+'">'+$(this).text()+'</option>');
	});
	//If the current page matches one of the dropdown items, set the dropdown to that item. 
	$('.mobile-menu').val(returnCurrentURL());
	if($('.mobile-menu').val() == null){
		$('.mobile-menu').hide();
	}

	//When an item is selected, go to that page
	$('.mobile-menu').change(function(){
		window.location = $(this).val();
	});
});

Ok, so let’s briefly go over this. What we did here is iterated over all of your navs list items, and for each one, we append an <option> tag with a value of the ‘href’ attribute of the anchor tag within that item. We set the text of the option item to match the text of the list item. Alright, so we essentially have our select list built.

Let’s move on! The next method checks which page your on, and set’s the dropdowns current item to match that page. So, assuming you’re using this on all your pages, when you go to the “about” page, when it loads, it’s going to auto-select that item, so you know what page you’re on. As you can see in the first line, I’m calling a function called returnCurrentURL(); Sadly, this isn’t a built-in function, so let’s write it.    

function returnCurrentURL(){
	return window.location.protocol + "//" + window.location.host  + window.location.pathname.toString();
}

Easy enough! If you’re using relative URLs, you only need window.location.pathname.toString(). I also decided to hide the whole dropdown if you’re on a page that isn’t in the nav.

Now just one more function! Fortunately, it’s simple, and short. We need to navigate to the correct page, when we choose an item from the dropdown. The event function listens for a change in selected item, takes the value, and goes to that URL. Easy!

Oh, I almost forgot! You’ll need to show and hide the navs depending on the current viewport. We can do it with jQuery, but CSS is a nice option. Something like this will do:

.mobile-menu { display:none; }

@media only screen and (max-width: 480px) {
    .mobile-menu { display:block; }
    ul#main-menu { display: none; }
}

I hope this helps with those writing responsive sites. If you have any questions or comments ping me on Twitter, @syropian.