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.

• 45 Beautiful jQuery Menu Plugins and Tutorials

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:

The menu will have the following structure:

        
Home
  		
Services
  	    
Experience
  		
About Us
  		
Contact
      

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!