Responsive Menu with CSS3 Tutorial

responsive menu css3
responsive menu 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.

responsive menu cssDemo  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:

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!

 

Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.