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. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!

View Demo Responsive Menu

The Purpose

The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display.

the purpose of responsive menu

This trick is more useful on navigation with a lot of links like the screenshot below. You can condense all the buttons into an elegant dropdown.

the purpose of responsive menu

Nav HTML Markup

Here is the markup for the navigation. The <nav> tag is required to create the dropdown with the css property absolute position. I will explain this later in the tutorial. The .current class indicates the active/current menu link.


<nav class="nav">
	<ul>
		<li class="current"><a href="#">Portfolio</a></li>
		<li><a href="#">Illustration</a></li>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Print Media</a></li>
		<li><a href="#">Graphic Design</a></li>
	</ul>
</nav>

CSS

The CSS for the navigation (desktop view) is pretty straight forward, so I’m not going to get into the details. Note that I specified display:inline-block instead of float:left for the nav <li> element. This allows the menu buttons to be able to align left, center or right by specifying text-align on the <ul> element.


/* nav */
.nav {
	position: relative;
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
}
.nav a:hover {
	color: #000;
}
.nav .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}

Center and Right Alignment

As mentioned above, you can change the alignment of the buttons by using text-align property.


/* right nav */
.nav.right ul {
	text-align: right;
}

/* center nav */
.nav.center ul {
	text-align: center;
}

Internet Explorer Support

HTML5 <nav> tag and media query is not supported by Internet Explorer 8 or older. Include css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. If you don’t want to add html5shim.js, replace the <nav> tag with a <div> tag.


<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Responsive

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.

On 600px breakpoint, I set the nav element to relative position so I can place the <ul> menu list on top with absolute position. I hide all <li> elements by specifying display:none, but keep the .current <li> displaying as block. Then on the nav hover, I set all <li> back to display:block (this will produce the dropdown list result). I added a check icon graphic on the .current element to indicate it is the active item. For the center and right alignment menu, use left and right property to position the <ul> list. View the demo to see the final result.


@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
}

43 Comments

1 2
  1. Roye Okupe
    Apr 24, 2013 @ 11:05 pm

    Great resource, thanks for sharing. Do you have samples of this working with any WordPress themes?

    Reply

  2. Robert
    Apr 30, 2013 @ 3:10 pm

    Very nice tutorial, thank you!!
    However, can you post or suggest a source for icon-menu.png and icon-check.png?
    Thanks !!

    Reply

  3. david
    May 15, 2013 @ 6:26 am

    Doesn’t seem to work at all on an Android phone with Opera.

    Reply

  4. Kenth Hagström
    May 24, 2013 @ 1:50 pm

    Really good tutorial, thank you! :)

    Reply

  5. Surrey Web Design
    May 28, 2013 @ 12:49 am

    Simple and easy navigation is a very important factor of responsive web design. Here in this blog you have shared the best CSS navigation menu that will help designers a lot.

    Reply

  6. Cloudburst Web Design
    May 29, 2013 @ 10:44 am

    This is a great article demonstrating a nice approach to tackling mobile nav. There are a bunch of different ways to Well done!

    Reply

  7. Amish Sharma
    May 31, 2013 @ 1:40 am

    Looks Nice, I’ll give it a go on Redesigning for MY company site !!!

    Reply

  8. Caleb
    Jun 2, 2013 @ 11:27 am

    I’ve been planning to integrate something like this on my site using Bootstrap or Foundation’s top bar but found it overkill. This is just perfect! Are there any drawbacks for not using JavaScript?

    Reply

    • Lars
      Jun 4, 2013 @ 7:34 am

      Thanks! It looks great and works on ios – but I can’t get it to work on WinMo 8.

      Reply

  9. Lars
    Jun 4, 2013 @ 7:35 am

    Thanks! It looks great and works on ios – but I can’t get it to work on WinMo 8.

    Reply

  10. Opiek Pulau Tidung
    Jun 4, 2013 @ 12:15 pm

    Great share… I will try it on my website
    Thank you

    Reply

  11. Katrina Isabelle
    Jun 11, 2013 @ 4:25 pm

    Thank you for the great tutorial.

    I have one issue with this implementation and that is that once one of the links is clicked, the menu does not disappear. I find it looks really awkward in my implementation, and on my mobile phone it makes for a very bad UI, since the whole screen is taken up by the dropdown menu.

    Reply

  12. Marz
    Jun 12, 2013 @ 5:44 am

    Hi,
    This is a great tutorial. Is it possible to get a sub menu working in this design? I cant figure it out. Any help would be fantastic.

    Reply

  13. Nate
    Jun 12, 2013 @ 6:48 am

    The only problem is hover-off doesn’t work on mobile devices, so once you open it on a mobile device, it stays open.

    Bootstrap’s menubar allows you to click and re-close the menu, yours does not.

    Why not add that functionality? I will look into it myself. Thanks.

    Reply

  14. Craig Nakamoto
    Apr 30, 2013 @ 3:08 pm

    I agree with Darren, this is a major problem since the entire point is to support mobile browsers. It would be good to update this article with a solution, but I don’t think there exists a css based solution to this problem. I am not sure about other mobile devices, but IOS supports the :hover by actually showing the hidden element and then performing a click. Presumably this was implemented by Apple to help make non-mobile sites more friendly.

    Reply

  15. Luke Flego
    Jun 4, 2013 @ 5:17 pm

    This. Although, with some clever, but perhaps frowned-upon, CSS, you can solve it.

    I found giving the .current the property pointer-events: none; will achieve great results. Though I fear voiding the intended use of the anchor is not the right way to do it.

    In my instance, it was the only way, as it was for a very limited language web assignment. In the real world, you would use something like JavaScript or PHP to remove the anchor all together.

    Hope I have helped!

    Reply

1 2

Leave a Reply