Responsive Menu with CSS3 Tutorial

by , Tutorials, CSS3

In this tutorial, we’ll create a responsive menu with new feature of css3 (media queries) to alter the design and layout of a website navigation menu to fit different screen sizes. We have design to change the layout from large screens to smaller screens support, making it responsive display.

demo  download

In fact, professional web design not only focus on computer browser version but we should design for support  mobile version to make visitor happy when they visit your website from smart phone. Responsive design is the best way to fix those problem, In this tutorial, we’ll focus on design of the user experience navigation menus to make it run better on mobile devices.

In this menu, we have design to response layout width small than 767px, it will display menu in smart phone version and layout width bigger than 767px, it will display menu on computer version.

The Markup

The HTML will be built up viewport meta tag to control layout on mobile browsers

A typical mobile-optimized site contains something like the following:

          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

The menu will have the following structure:

<ul id="nav">
        <li class="current"><a href="#" title="Home" >Home</a></li>
  		<li><a href="" >Services</a></li>
  	    <li><a href="" >Experience</a></li>
  		<li><a href="" >About Us</a></li>
  		<li><a href="" >Contact</a></li>

The Cascading Style Sheets (CSS)

The navigation menu css will have the following code:

#nav { margin: 0; padding-top: 0.85em; width: auto; font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; }
#nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}
#nav li:last-child { margin-right: 0; }
#nav a { display: block; color: #FFF; text-decoration:none; }
#nav a:hover { color: #484a50; border-bottom-color: #484a50; }

The media queries css will have the following code:

@media only screen and (max-width: 767px) {
	#nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; }
	#nav { margin: 0 6% 0 0; padding: 0; }
	#nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
	#nav a { padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(images/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	#nav a:hover { border-bottom: none; }

Now! We  have a responsive navigation menu with CSS3. Check out the demo below, and feel free to download this example for future use.  I hope you enjoyed this tutorial and find it useful!



29+ Free Responsive Navigation Menu Plugins & Tutorials

23+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

38 Free HTML5 jQuery Upload File Scripts Example

86+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback 4 Leave a comment
  1. now understand the work of @media query. I am modifying one of my sub domain and want whole website responsive. And using framework. But i think this trick also gona helpful for me 😉

  2. This is a great post! I’ve met a lot of web designers who would still prefer to look online for a preference on how to design or regarding the codes to be used. Especially about CSS, where there are still a lot of things that should be learned.

Leave a Reply

Your email address will not be published. Required fields are marked *