The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.
When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose.
That sure makes it easier to pick a place to go than a tiny link. Yeah, it’s two taps instead of one, but that’s arguable since you’d probably have to zoom in to tap the right link otherwise.
The HTML
The HTML for these two menus is different. As far as I know, you can’t style <select>
and <option>
elements to look and behave like <a>
s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:
<nav>
<ul>
<li><a href="/" class="active">Home</a></li>
<li><a href="/collections/all">Books</a></li>
<li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/support">Support</a></li>
</ul>
<select>
<option value="" selected="selected">Select</option>
<option value="/">Home</option>
<option value="/collections/all">Books</option>
<option value="/blogs/five-simple-steps-blog">Blog</option>
<option value="/pages/about-us">About Us</option>
<option value="/pages/support">Support</option>
</select>
</nav>
Let’s go with that for now.
The CSS
By default we’ll hide the select menu with display: none;
. This is actually good for accessibility, as it will hide the redundant menu from screen readers.
nav select {
display: none;
}
Then using media queries, we’ll do the switcheroo at some specific width. You can determine that on your own (here’s some standard breakpoints).
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
But now you gotta maintain two menus?
Well yeah, that’s one concern. Maybe your menus are created dynamically and you can’t control the output easily. Maybe you and hand crafting menus but want to make sure you don’t accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.
Using jQuery, we can do that with just a few lines of code:
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
Then to make the dropdown menu actually work…
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
But aren’t dropdown menus kinda obtrusive?
Kinda. Most small screens these days are mobile and most mobile devices are JavaScript friendly, so not a huge concern. But, if you want to ensure this works with or without JavaScript I have an article about that.
Demo & Download
Video
Quick video example in case you are reading this from somewhere you can’t adjust the browser size and play with it to see what the heck we’re talking about here.
Variations
- A variation of the same concept, where there is nested menus and it makes optgroups in the select based on the parent/child relationships.
- Submenu’s with a dash by Daryn St. Pierre
This cracks me up. I’ve just spent an hour this morning googling around for the solution to this problem. You rock, sir.
I personally hate dropdown menus for links. But this could be useful in some situations (like the example site you found).
Also I hate the redundancy. Having to use jQuery to fix it isn’t much better in my opinion.
This is cool. A good option for large navigation menus. I don’t think I’d use it for small menus.
JQuery is really redundant here. You can easily make the same through DOM and even ES5 methods. Current mobile browsers engines are modern enough, so you don’t need to worry about old and limited engines such as IE.
Every single thing jQuery can do is redundant, because it’s just JavaScript and could be written that way instead. I use it here because it makes the code I write and present just a few lines. But eff yeah man, rewrite that shit in in whatever you feel is best for your project.
Chris, you wrote ‘in’ two times (between sh*t and whatever).
Yes, but what if you have Windows Phone 7?
Aaron, are you actually correcting him for typing “in” twice on a comment??? Come on man….don’t you have anything better to do?
Adam, I just saw a spelling error. Just wanted to let Chris know. If it sounded rude, then my apologies.
I’ve been using display:none for a lot of things when using media queries, but it feels like I’m cheating.
I wouldn’t worry about it, at the end of the day you need to do whats best for your users, and using display: none hides the extra navigation from screen readers so doesn’t seem to be any accessibility concerns..
Or did you mean using display:block feels like your cheating on display: inline-block ?, i sometimes feel a bit closer to certain CSS selectors than i should
The demo doesn’t seem to work on my iphone. It shows up as a menu, not a dropdown.
Same here! did not work on my iPhone 4. gonna check out the code and see what happened.
The demo page isn’t really a mobile friendly page. In your implementation, you would use the meta tag for making the viewport the device width and then the media query would work as expected.
I like it. I never thought about using a select as a navigation element … but it does seem to make sense for mobile devices.
I must say this was an interesting solution.
Have to try it out on a site some time soon =)
neat little trick i must say.
Very good, but I think that if the window is too small, the navigation should become vertical, rather then turning into a select.
Semantically speaking, a select is used to select options in a form, in cases were free text input shouldn’t be allowed (Select your gender: [Male] [Female] etc.)
This argument is similar to the argument of not using links as javascript subjects (href=#), but instead to use buttons as that is they purpose (having action done on the page).
In short, <select> elements should not be used in navigation, but as a form element. That’s why the <ul> is there.
I kind of agree with your argument that a is not semantically correct, but I think when designing for mobile sometimes semantics can be put aside in order of functionality, because mobile is just in its child shoes and needs to grow a lot.
And, just as a sidenote, the gender example is not correct either, radiobuttons should be used for that specific example.
I agree with Pieter….we definitively want to be using semantically appropriate elements as much as we can, but not at the expense of the users experience, i think the trade off is worth it here
wow… i like this trick.. so where is the +1 Button ?? :)
Awesome trick,will implement
I’d like to know how you made your site fit so many different browser sizes.
I’m using this exact same method on my site! I saw it on Yaron Schoen’s website. If you want to generate a dynamic dropdown from your WordPress pages, just use this function: wp_list_pages()
Very neat little trick, cheers Chris!
yes nice!
Really nice i would also make a “Jump to:” text appear before it
Genius. Once more. Thanks for sharing.
This is very useful to know, especially with so many people browsing the web with mobile devices these days. Thanks again for yet another amazing article Chris!!
Very useful tutorial. Thanks for sharing Chris!
itz really nice… :)
It’s a nice effect but the fivesimplesteps.com menu becomes a drop-down at around 767px, doesn’t that seem too big? In other words doesn’t the viewport have to be /really/ small to warrant a drop-down?
Very neat trick chris… you are on of my 5 a day!
Just a quick tip, if your like me & want to make life easier & updating quicker, you could use a PHP array or have the menu dynamic from a database, so you only have to edit/add/remove the menu data once, then use a loop for the select & the ul section:
Select
I’ll come right out and say it that this is self-promotion but it’s the kind that I don’t make any money from so hopefully that makes it OK to post here.
I just released a WordPress plugin that will generate a menu that you create in the admin area as a dropdown. You could use it after a call to
wp_nav_menu()
in a theme to do exactly what this article demonstrates but with the control all done via the menus admin.Linky:
http://wordpress.org/extend/plugins/dropdown-menus/
Code example:
Great one Chris! Will definitely use this in my projects. Thanks!
Hey Chris! Good idea and excellent realization. Thanks for sharing!
Chris, this is just an great idea. Responsive web design is becoming more popular every day.
Hey Chris, I was recently trying to build something similar to this, but I wanted to convert nested ul into optgroups (think about converting a dropdown nav to a select nav). I couldn’t quite get it working the way I wanted, so I posted the question on stackoverflow and ‘Enki’ delivered two great solutions; check it out!
http://stackoverflow.com/questions/6797684/convert-ul-to-select-w-optgroups
//Create DD from the menu
var markUp = [“”], $li, $a;
$(“#menu > li”).each(function(){
$li = $(this);
if($li.find(“ul > li”).length){
markUp.push(“a”).text()+”‘>”);
$li.find(“ul > li”).each(function(){
$a = $(this).find(“a”);
markUp.push(“”+$a.text()+””)
});
markUp.push(“”);
}
else{
$a = $li.find(“a”);
markUp.push(“”+$a.text()+””)
}
});
markUp.push(“”);
$(“#menu”).append(markUp.join(”));
$(“#menu select”).change(function(){ window.location = $(this).val(); });
Nice, but I don’t like that you either have unused tags in your HTML or have to rely on JavaScript. Each isn’t the best solution.
Hi Chris.
I hope you don’t mind. Your article got me thinking. Here’s what’s came out: http://www.itmitica.com/en/articles/css3/s-menu/
In short, the container element for the menu links should act accordingly and provide scrollable means and a confined space to make the menu friendlier for small screens.
I personally think this example is a step backwards. I mean I go to your website on my mobile device and have to take an extra step to find what I need? Really? It’s not as if the example you show has a huge navigation to start with is it? They could lose the home link (and linke the FSS logo to the index.html) allowing the navigation to fit in one line. The only way I see drop downs working is on a site with inherently huge navigation and sub navigation. The ESPN mobile site, I feel, does this well. Adding an extra step rather than rethinking your small navigation is not satisfactory.
CSS tricks is really awesome i came here through google…and now though that i have explored css-tricks i found that it is an awesome place for all the designers out there…
great work people…and thank you for such a useful tutorial
@Chris Coyier
You could easily serve markup for the dropdown menu without ever going near JavaScript.
At least that’s the idea, I’ve got it working and I can provide a few neat examples of how you can provide markup like that with media queries…
There are a few drawbacks but if your interested then e-mail me and I’ll send you the examples.
Conditionally serving markup based on screen size without JavaScript? How do you test screen size without that? Some kind of UA sniffing? Is it secret? Would love to see examples, post JS fiddles =)
Hey! This solution is awesome! Thanks, like a lot of people above, I’m searching a lot in Google but no one before You don’t gave me fully solutions.
Shall I have the solution for the resolution problem for my website, Because my content is getting down from the menu, if the resolution is less 1280*1024.
Let me have the right solution for my problems.
Awaiting with regards,
Narendran,
Tweet me @MyNaren89,
9487693560.
look great, man! but, we got a problem whit html seletc element as a anchor. Is important to add a “Go” button next to it so that the user is taken only when you click. it´s for usability
Nice man. Thanks for scripts.
It doesnt work on an iphone because the iphone resolution is 960, the dropdown display none property deactivates when the resolution is less than 960…
Really cool stuff…Thanks for sharing
Very good i would also make a “Jump to:” text appear before it
Thanks for the code. This worked great. I came up with a bit of an addition for you though. If your original menu has sub menus, it would be nice for that to be reflected in the select menu. Here’s an addition for this:
For a menu with this kind of markup:
<nav id="main-nav">
<ul id="menu">
<li id="item-1">
<a href="/">Home</a>
</li>
<ul class="sub-menu">
<li id="item-2">
<a href="#">Example</a>
</li>
</ul>
</ul>
</nav>
New JavaScript:
// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
var da = '';
if($(this).parents('.sub-menu').length){
da = '- ';
}
$("<option />", {
"value" : el.attr("href"),
"text" : da + el.text()
}).appendTo("nav select");
});
Thank you – works great!
If you want more levels on menu:
And so on…
Thank you! That was really helpful.
Hi.
Is it possible to make only the parent of the levels bold?
Thank you.
Hey Chris,
Here’s a simple alternative to dropdown navigations at smaller screen sizes: Move the navigation from one of the first things to appear on the page to one of the last things to appear. Near the top of the page, place an image of a list icon that is anchored to the newly relocated navigation. A smooth page scroll is a must for this to work. That’s it.
Here is why I like this solution:
(1) It’s easy for a novice designer/coder to implement into a project; (2) There is more space for content to instantly be viewed; (3) Some folk (typically older in age) are unaware that the small list icon image means menu. These visitors will continue to scroll down a page to find the navigation at the bottom.
But I’m sure this “solution” is nothing new.
Thanks this worked great!
Hi, I used drop down menu in that I added a background image for clicking a menu. While in desktop on hovering image works fine. While in iPhone or iPad, on hovering background image not working properly.
Hi I have used your code and I got 2 go to boxes when resize the screen. What have I done wrong? Any Suggestions?
Thanks
This pattern is not a good solution since you create additional markup just for an alternate navigation element. I call this a hack. The best solution is to use just one navigation element and lay it out.
Works fine for me, but in mobile version check icon is always showing that I am on “Go to…” page, not recognize when I am on other sections.
Detele # from link caused this.
Any solution for this? Thank you.