AndroidCSS

Android material design Programming Blog

Pure CSS Drawer Menu Material Design

Most of the Apps contains 3 lines bar on top header when click on that icon you see a nice menu sliding from left side, what is called drawer menu. This tutorial is about implementing pure CSS drawer menu for HTML.

The pure CSS drawer menu does not requires any plugin or javascript, It’s totally done with only using CSS.

With a help of jquery a drawer menu can be implemented easily in HTML, but you need to load extra jquery plugin which is definitely not good if you consider your page speed.

In below code, for icons i used FontAwesome icon font. In below examples, you like to see <i> tag with some default classes like fa,fa-plus etc. which tells FontAwesome to load specified icon.

For example: the class name fa-plus tells font awesome to load google plus icon into <i> tag.

If you don’t know what icon font is? then you can refer this article using fontawesome icons for all icons and their usage.

To use FontAwesome icon set, you have to add below tag in your page head.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

DemoDownload

HTML

The menu click is handled through the input checkbox element. The css3 support checkbox :checked property so that showing and hiding of menu is done using this property.

<header>
  <input type="checkbox" id="tag-menu"/>
  <label class="fa fa-bars menu-bar" for="tag-menu"></label>
  <div class="drawer">
    <nav>
      <ul>
        <li><a href="#"><i class="fa fa-facebook"></i>&nbsp;&nbsp;Facebook</a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i>&nbsp;&nbsp;Google Plus</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>&nbsp;&nbsp;Twitter</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i>&nbsp;&nbsp;LinkedIn</a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i>&nbsp;&nbsp;Pinterest</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

The slide in and slide out animation for menu is done using CSS3 property called animation and @keyframes which you see in below code.

* {
	padding:0;
	margin:0;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	background-color:#FFF
}

header {
	width:100%;
	background-color:#06C;
	z-index:1000;
}

.menu-bar {
	color:#FFF;
	font-size:26px;
	cursor:pointer;
	padding:10px 12px;
	margin-left:10px;
	margin-top:5px;
	margin-bottom:5px;
}

.menu-bar:hover {
	background-color:rgba(0, 0, 0, 0.1);
	border-radius:50px;
}

#tag-menu {
	display:none;
}


#tag-menu:checked ~ div.drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.drawer {
	position:fixed;
	left:-280px;
	background-color:#06C;
	height:100%;
	z-index:100;
	width:280px;
	animation: slide-out 0.5s ease;
	animation-fill-mode: forwards;
}

.drawer ul li {
	list-style:none;
}

.drawer ul li a {
	padding:10px 30px;
	text-decoration:none;
	display:block;
	color:#FFF;
	border-top:1px solid #039;
}

.drawer ul li a:hover{
	background-color:rgba(0, 0, 0, 0.1);
}

.drawer ul li a i {
	width:50px;
	height:35px;
	text-align:center;
	padding-top:15px;
}

@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}

1 Comment

Add yours

  1. Nothing Material Design about this.

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑