Recently I was asked about the responsive menu I created when I redesigned my website. The code for the menu is based on the Suckerfish Dropdowns written on A List Apart years ago. I’ve just restyled parts of it to make it responsive.
This menu is a slightly improved version of the menu I’m using on my site and it works great in all modern desktop browsers without javascript. In a follow up post I’ll add some javascript to improve the usability of the menu on mobile devices like phones and iPads and also include Superfish. If you’d like to be notified when the follow up post is written subscribe to this site by email. UPDATE: Part 2 has been posted.
The demo uses 320 and up with a single style sheet but could be easily adapted to the HTML5 Boilerplate or pretty much anything.
Check out the demo here. Make sure you re-size your browser.
Download the example here.
The Responsive Menu’s HTML
The HTML is a pretty straight forward HTML5 menu.
<nav id="access" role="navigation">
<div class="skip-link">
<a href="#content">Skip to content</a>
</div>
<div class="menu">
<ul class="sf-menu clearfix">
<li><a href="#" >Menu Item</a></<span class="hiddenGrammarError" pre="li ">li>
<li</span>>
<a href="#" >Menu Item</a>
<ul class="sub-menu">
<li><a href="#" >Menu Item</a></<span class="hiddenGrammarError" pre="li ">li>
<li</span>>
<a href="#" >Menu Item</a>
<ul class="sub-menu">
<li><a href="#" >Menu Item</a></<span class="hiddenGrammarError" pre="li ">li>
<li</span>>
<a href="#" >Menu Item</a>
<ul class="sub-menu">
<li><a href="#" >Menu Item</a></<span class="hiddenGrammarError" pre="li ">li>
<li</span>><a href="#" >Menu Item</a></li ">li>
<li</span></span></span></span></span></span></span></span></span></span>><a href="#" >Menu Item</a></li>
</ul>
</li>
<li><a href="#" >Menu Item</a></li>
</ul>
</li>
<li>
<a href="#" >Menu Item</a>
<ul class="sub-menu">
<li><a href="#" >Menu Item</a></li>
<li><a href="#" >Menu Item</a></li>
<li><a href="#" >Menu Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" >Menu Item</a></li>
<li><a href="#" >Menu Item</a></li>
</ul>
</div>
</nav><!-- #access --> |
Default Style for the Responsive Menu
The default style for the menu is what any modern browser on a device with a screen resolution under 600px will see. This is also where you’ll add most of the style that defines the look of the menu. In a responsive design you will include this style in your first style sheet if you’re using multiple style sheets or before any media quires are called if you’re using a single style sheet.
The main difference between the default style of this menu and the Suckerfish menu is that all the main menu items and the drop downs appear vertically rather that horizontal and vertical.
I’ve added more comments to the code than in previous posts, but if you still have questions feel free to ask them in the comments below.
Note: A lot of the CSS that follows could be combined. I haven’t combined it in hopes that it will be easier to read and follow.
/* =Navigation -------------------------------------------------------------- */ /* clip skip link for screen readers */ .skip-link { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } #access { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; overflow:visible; z-index:100; } /* style the main menu 8*/ .sf-menu{ border: 1px solid #000; border-top: none; } /* get rid of padding and margin off all ul's (not sure about using * here, could be better) */ .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none; } /* position all dropdowns off screen */ .sf-menu ul { position:absolute; top:-999em; } /* style the main nav list items */ .sf-menu li { background: #000; background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0))); background-repeat: repeat-x; border-top: 1px solid #242324; clear: left; float:left; position:relative; width: 100%; } /* change the main nav list items on hover */ .sf-menu li:hover { background-image: url('../img/menuBg.png'); visibility:inherit; /* fixes IE7 'sticky bug' */ } /* style all the links */ .sf-menu a { font-size: .8em; color: #fff; display:block; padding: 12px 0; text-decoration: none; text-indent: 12px; } /* style the first drop */ .sf-menu li li, .sf-menu li li:hover{ background: none; background-image: none; } /* add a larger text indent for the first drop links */ .sf-menu li li a{ text-indent: 24px; } /* add a larger text indent for the second drop links */ .sf-menu li li li a{ text-indent: 36px; } /* add a larger text indent for the third drop links */ .sf-menu li li li li a{ text-indent: 48px; } /* position first drop */ .sf-menu li:hover ul { top:auto; /* match top ul list item height */ position:relative; } /* make sure second drop is still off screen */ ul.sf-menu li:hover li ul { position: absolute; top:-999em; } /* position second drop */ ul.sf-menu li li:hover ul { top:auto; position:relative; } /* make sure third drop is still off screen */ ul.sf-menu li li:hover li ul { position: absolute; top:-999em; } /* position third drop */ ul.sf-menu li li li:hover ul { top:auto; position:relative; } |
The Responsive Menu at Larger Sizes
With most of the style already taken care of this next section gets a bit easier. We’ll give the menu a specific height (you must set a height here so you don’t push the content down when the drop downs appear), override the Clear: left; from the main menu/top level links, give the drop downs a background and reposition them so they appear in the correct locations.
This menu is rather simple, with only 4 links, so I’m adding it to the 600px style sheet. If your menu has more top level links you may want to add this to the 768px style sheet/media query.
@media only screen and (min-width: 600px) { /* set height so content isn't pushed down */ #access{ float: left; height: 36px; width: 100%; } /* set height so content isn't pushed down add z-index to keep drops above content */ .sf-menu{ height: 36px; z-index: 100; } /* restyle so main links are horizontally aligned */ .sf-menu li { clear: none; width: 25%; /* this will need to be adjusted for your needs */ } /* new style for drop list items */ .sf-menu li li{ background: #000; background-image: url('../img/menuBg.png'), linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -o-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -moz-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -webkit-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -ms-linear-gradient(bottom, rgb(36,35,36) 0%, rgb(0,0,0) 100%); background-image: url('../img/menuBg.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(36,35,36)), color-stop(1, rgb(0,0,0))); background-repeat: repeat-x; clear: left; width: 100%; } /* reset text indent on all drop a tags and set the width to 100% */ .sf-menu li li a, .sf-menu li li li a, .sf-menu li li li li a{ text-indent: 12px; width: 100%; } /* reposision and style the first drop */ .sf-menu li:hover ul{ background: #000; left: auto; position: absolute; top: -1; width: 100%; z-index: 100; } /* reposision and style the second drop */ ul.sf-menu li li:hover ul{ background: #000; position: absolute; top: -1px; left:100%; } /* reposision and style the third drop */ ul.sf-menu li li li:hover ul{ background: #000; position: absolute; top: -1px; left:100%; } } |
The Responsive Menu at Even Larger Sizes
This next section doesn’t do much. I’m basicaaly just increasing the size of the fonts and height of the menu to for bigger browsers, because lets face it, size does matter!
@media only screen and (min-width: 768px) { header h1{ font-size: 30px; } } @media only screen and (min-width: 992px) { header h1{ font-size: 36px; } /* bigger screen bigger nav */ #access{ height: 50px; } /* bigger screen bigger nav */ .sf-menu{ height: 50px; } /* bigger screen bigger font size and padding */ .sf-menu a { font-size: 1em; padding: 17px 0; } } |
An Even Bigger Website with a Responsive Menu
Here’s where this demo gets an improvement over my site. I’d encourage you to look at the browser statistics of your own site to see if you should actually spend time developing for screen resolutions larger than 1382px. If the answer is yes, than read on.
Again, with most of the heavy lifting already taken care of up to this point, the following style’s pretty much a breeze.
First we’ll resize the header, float the header and the content to the left, clear the top level links again and set all drop downs hovers to left 100%;
@media only screen and (min-width: 1382px) { /* move the header to the left side of the screen */ header{ float: left; margin: 0 2% 0 0; width: 20%; } header h1{ font-size: 45px } .content{ float: left; width: 78%; } #access, .sf-menu{ height: auto; } .sf-menu li { clear: left; width: 100%; } /* reposition the first drop */ .sf-menu li:hover ul{ left: 100%; top: -1px; position: absolute; } } |
Conclusion
There you have it, a responsive menu in about 200 lines of CSS that works great without javascript. If you have any questions feel free to leave a comment below.
Check out the demo here. Make sure you re-size your browser.
Download the example here.