orthopedic pain management

Flashuser

  • Pin It

Responsive Multi-Level Flat Menu Tutorial

Today, we will make a responsive multi-level menu that changes its layout according to the browser window size. You can use it either for desktop, tablet or mobile websites. It’s very simple to implement and for the mobile version we will use a few lines of Javascript code.

We will add to this flat menu some nice icons by using the Font Awesome scalable vector icons. Check out the whole collection by visit their website.

In this tutorial we will create an awesome responsive menu that will work great in a flat design website. Let’s get started!

responsive-flat-menu-tutorial

HTML CODE

The menu structure contains an unordered list with sub-lists.

<nav>
    <ul class="menu">
   <li><a href="#"><i class="icon-home"></i>HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   </ul>
   </li>
  <li><a  href="#"><i class="icon-user"></i>ABOUT</a></li>
  <li><a  href="#"><i class="icon-camera"></i>PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Level 3 Menu</a>
    <ul>
    <li><a href="#">Sub-Menu 4</a></li>
   	<li><a href="#">Sub-Menu 5</a></li>
	<li><a href="#">Sub-Menu 6</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="icon-bullhorn"></i>BLOG</a></li>
  <li><a  href="#"><i class="icon-envelope-alt"></i>CONTACT</a></li>
  </ul>
  </nav>

The font icons are easy to use. First thing first make sure you include the Font Awesome CSS file than insert the i element. Inside it use the class “icon-iconname”.

CSS CODE

Here’s the CSS for first level menu desktop version. Note the display:block for the .menu class used when we’ll resize the browser window. Also we will use some smooth color transitions for the buttons rollover.

.menu{display:block;}

.menu li{display: inline-block;
position: relative;
z-index:100;}

.menu li a {font-weight:600;
text-decoration:none;
padding:11px;
display:block;
color:#ffffff;

-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a{color:#ffffff;
background:#9CA3DA;}

We will hide the second level menu first and reveal it when the user rollover a level 1 menu item.

/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}

/* display second level menu on hover */
.menu li:hover > ul{ display: block;}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}

The level 3 menu will have the properties from the level 2 menu except its positions.

/* change level 3 menu positions */
.menu ul ul {left: 149px;
	top: 0px;
}

Now for the mobile version we will use a simple link that acts like button. We will reveal it when the browser size width is below 767px. For that the CSS media queries will come in action.

<a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a>

The unique id will be used for the Javascript code.

Here’s the CSS mobile menu button properties:

.mobile-menu{display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#3E4156;
color:#ffffff;
text-decoration:none;
}

The media queries for mobile version. We’ll display the mobile button and change the menu properties to look like a dropdown menu list.

@media (max-width: 767px) {

.menu{display:none;}

.mobile-menu{display:block;
margin-top:100px;}

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:3px solid #9CA3DA;}

/*level 2 and 3 - make same width as all items*/
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}/*end media queries*/

JAVASCRIPT CODE

This code is used for the mobile version. When the button is clicked the menu appears with a slide effect. If the browser window is resized more than 767px we will remove the menu inline style properties and the menu look will change to the default version.

$(document).ready(function(){ 
	var touch 	= $('#touch-menu');
	var menu 	= $('.menu');

	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
	
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
	
});

CONCLUSION

We hope you like this responsive menu tutorial and find it useful. Download the archive below to play with the colors and other attributes and to support our work.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+