Pure CSS Drawer Menu

- July 07, 2018
This is a simple light weight drawer menu created in pure css. Best for mobile friendly sites.


Css Drawer Menu Preview

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

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.

<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>  Facebook</a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i>  Google Plus</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>  Twitter</a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i>  LinkedIn</a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i>  Pinterest</a></li>
      </ul>
    </nav>
  </div>
</header>
You have done. Best of luck !

Leave your reply.
EmoticonEmoticon