This is a simple light weight Drawer Menu created in pure css. Best for mobile friendly sites.

Developer:	Gururaj Kharvi
File Size:	2.76 KB
License:	MIT License
Offcial Website:	AndroidCSS

Features

• Easy to Use
• Easy to Install
• Easy to Modify
• User Friendly
• SEO Friendly
• Lightweight Size
• FontAwesome Icons

How to use

To add this menu in your site follow the given below steps:-
Step 1: Install "Font Awesome" stylish sheet for icons by adding the CDN link in your website's head tag.

Step 2: Add following CSS code in your website:-

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;}
}

Step 3: Add your links to HTML code in the place of hash sign '#'. Without removing quotations.

You have done. Best of luck !