Create a Responsive Nav Menu
Posted by fred on Saturday, January 21st, 2012
While working on fairly heavy eCommerce project, I came across the need to ensure responsiveness for the main navigation menu I settled on. Here’s a quick tutorial using that learning to show how easy it is. with just a dabble of media queries.
As seen in the demo, we start with some basic HTML. Nothing special here, just your typical nav menu structure:
<!-- begin demo --> <nav> <ul> <li><a href="#">Blog<br/><span>News & updates</span></a></li> <li><a href="#">Our Services<br/><span>What we offer</span></a></li> <li><a href="#">Our Process<br/><span>How we do it</span></a></li> <li><a href="#">Contact Us<br/><span>Get in touch</span></a></li> </ul> </nav> <!-- end demo -->
In the CSS, it’s a matter of setting the width for each list item to a percentage-based width, which we will manipulate to ensure responsiveness. Here’s the basic CSS:
nav {
display: block;
width: 100%;
margin: 30px 0;
background: #fbfbfb;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
float: left;
display: block;
width: 25%;
font: bold 1.3em helvetica,arial,sans-serif;
color: #b00;
text-decoration: none;
text-align: center;
padding: 10px 0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f3f3f3));
background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
background-image: -ms-linear-gradient(top, #fff, #f3f3f3);
background-image: -o-linear-gradient(top, #fff, #f3f3f3);
border-top: 1px solid #ddd;
}
nav ul li a span {
font-size: 0.75em;
font-weight: normal;
color: #888;
}
nav ul li a:hover, nav ul li a:hover span {
color: #222;
}
What we get when we see the results:
Now we’re going to use media queries to make some minor tweaks to the list items:
/************************************************************************************
Media queries - devices smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
html {
overflow-x: hidden; /* prevents right-padding on edge of device screen */
}
nav ul li a {
width: 50%;
}
} /* end */
/************************************************************************************
Media queries - devices smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none; /* disable webkit text size adjust (for iPhone) */
}
nav ul li a {
float: none;
width: 100%;
}
} /* end */
Now our menu is responsive:
Download It
There’s so much more you could do with this basic concept so snag the source files and have fun with it.
Fred is a front end web developer, designer and UX specialist from Ottawa, Ontario with over ten years of experience in the public and private sectors. He currently works for a local startup (well, a couple, actually) and is the head cheese over here at tFEP.
