current element to indicate it is the active item. Then on the nav hover, I set all back to display:block (this will produce the dropdown list result). I hide all elements by specifying display:none, but keep the. On 600px breakpoint, I set the nav element to relative position so I can place the menu list on top with absolute position. Now here comes the fun part – making the menu responsive with media query! Read my previous articles on responsive design and media query if you are not familar with responsive design. If you don’t want to add html5shim.js, replace the tag with a tag. Include css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. HTML5 tag and media query is not supported by Internet Explorer 8 or older. This allows the menu buttons to be able to align left, center or right by specifying text-align on the element.Īs mentioned above, you can change the alignment of the buttons by using text-align property. Note that I specified display:inline-block instead of float:left for the nav element. The CSS for the navigation (desktop view) is pretty straight forward, so I’m not going to get into the details. current class indicates the active/current menu link. I will explain this later in the tutorial. The tag is required to create the dropdown with the css property absolute position. You can condense all the buttons into an elegant dropdown. This trick is more useful on navigation with a lot of links like the screenshot below. The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. Checkout my newer tutorial on Responsive menus for 2017 and onward here. Mobile design is rapidly changing, and so the techniques also evolve. It works on all mobile and desktop browsers including Internet Explorer! It also has an indicator to show the active/current menu item. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. The menu can be aligned left, center or right.
Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I’ve discovered a new technique to produce a responsive menu without having to use Javascript.