{"id":13303,"date":"2011-07-15T08:54:53","date_gmt":"2011-07-15T15:54:53","guid":{"rendered":"http:\/\/css-tricks.com\/?p=13303"},"modified":"2015-04-28T07:04:51","modified_gmt":"2015-04-28T14:04:51","slug":"convert-menu-to-dropdown","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/convert-menu-to-dropdown\/","title":{"rendered":"Convert a Menu to a Dropdown for Small Screens"},"content":{"rendered":"
The Five Simple Steps<\/a> 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. <\/p>\n <\/p>\n 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. <\/p>\n <\/p>\n 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.<\/p>\n The HTML for these two menus is different. As far as I know, you can’t style Let’s go with that for now.<\/p>\n By default we’ll hide the select menu with 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<\/a>).<\/p>\n 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. <\/p>\n Using jQuery, we can do that with just a few lines of code:<\/p>\n Then to make the dropdown menu actually work…<\/p>\n 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<\/a>.<\/p>\n View Demo<\/a> Download Files<\/a><\/p>\n 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.<\/p>\nThe HTML<\/h3>\n
<select><\/code> and
<option><\/code> elements to look and behave like
<a><\/code>s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:<\/p>\n
<nav> \r\n\r\n <ul> \r\n <li><a href=\"\/\" class=\"active\">Home<\/a><\/li> \r\n <li><a href=\"\/collections\/all\">Books<\/a><\/li> \r\n <li><a href=\"\/blogs\/five-simple-steps-blog\">Blog<\/a><\/li> \r\n <li><a href=\"\/pages\/about-us\">About Us<\/a><\/li> \r\n <li><a href=\"\/pages\/support\">Support<\/a><\/li> \r\n <\/ul> \r\n \r\n <select> \r\n <option value=\"\" selected=\"selected\">Select<\/option> \r\n \r\n <option value=\"\/\">Home<\/option> \r\n <option value=\"\/collections\/all\">Books<\/option> \r\n <option value=\"\/blogs\/five-simple-steps-blog\">Blog<\/option> \r\n <option value=\"\/pages\/about-us\">About Us<\/option> \r\n <option value=\"\/pages\/support\">Support<\/option> \r\n <\/select> \r\n\r\n<\/nav><\/code><\/pre>\n
The CSS<\/h3>\n
display: none;<\/code>. This is actually good for accessibility, as it will hide the redundant menu from screen readers.<\/p>\n
nav select {\r\n display: none;\r\n}<\/code><\/pre>\n
@media (max-width: 960px) {\r\n nav ul { display: none; }\r\n nav select { display: inline-block; }\r\n}<\/code><\/pre>\n
But now you gotta maintain two menus?<\/h3>\n
\/\/ Create the dropdown base\r\n$(\"<select \/>\").appendTo(\"nav\");\r\n\r\n\/\/ Create default option \"Go to...\"\r\n$(\"<option \/>\", {\r\n \"selected\": \"selected\",\r\n \"value\" : \"\",\r\n \"text\" : \"Go to...\"\r\n}).appendTo(\"nav select\");\r\n\r\n\/\/ Populate dropdown with menu items\r\n$(\"nav a\").each(function() {\r\n var el = $(this);\r\n $(\"<option \/>\", {\r\n \"value\" : el.attr(\"href\"),\r\n \"text\" : el.text()\r\n }).appendTo(\"nav select\");\r\n});<\/code><\/pre>\n
$(\"nav select\").change(function() {\r\n window.location = $(this).find(\"option:selected\").val();\r\n});<\/code><\/pre>\n
But aren’t dropdown menus kinda obtrusive?<\/h3>\n
Demo & Download<\/h3>\n
Video<\/h3>\n