
As you can see, this is a slide-out navigation menu. It is built with CSS and a little bit of jQuery.
It has a dropdown submenu, and a cool animated hamburger button.
Feel free to download the code and use it for your own projects!
View:

HTML:
<header> <span class="toggle-button"> <div class="menu-bar menu-bar-top"></div> <div class="menu-bar menu-bar-middle"></div> <div class="menu-bar menu-bar-bottom"></div> </span> <div class="menu-wrap"> <div class="menu-sidebar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li class="menu-item-has-children"><a href="#">Click The Arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <li><a href="#">Alignment</a></li> <li><a href="#">Markup</a></li> <li><a href="#">Comments</a></li> </ul> </li> <li><a href="#">Courses</a></li> <li><a href="#">Get In Touch</a></li> </ul> </div> </div> </header> <div class="wrapper"> <section class="text"> <h2 class="heading">Slide-Out Navigation Menu</h2> <p>Click on the hamburger button.</p> <p>As you can see, this is a slide-out navigation menu. It is built with CSS and a little bit of jQuery.</p> <p>It has a dropdown submenu, and a cool animated hamburger button.</p> <p>Feel free to download the code and use it for your own projects! :)</p> <p class="buttons"> <a href="#" class="button button-primary"><span>Download Source</span></a> <a href="#" class="button button-secondary"><span>Read Tutorial</span></a> </p> </section> </div>
CSS:
/* ==================================== */ /* Navigaton Menu /* ==================================== */ .menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; } .menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; } .menu-sidebar { margin: 75px 0 80px 10px; position: relative; top: 70px; } .menu-sidebar li { padding: 18px 22px 0; } .menu-sidebar li > a { color: #f3f3f3; font-size: 1.18em; position: relative; } .menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 100%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; } .menu-sidebar .menu-item-has-children { position: relative; } .menu-sidebar .menu-item-has-children .sub-menu { display: none; } .sidebar-menu-arrow::after { content: "\f107"; font-family: 'FontAwesome'; padding: 10px; color: #FFFA3B; position: relative; } .sidebar-menu-arrow:hover::after { cursor: pointer; color: #fff; } .sidebar-menu-arrow:active::after { top: 2px; } /*Hamburger Button*/ .toggle-button { position: fixed; width: 44px; height: 40px; top: 50px; left: 40px; padding: 4px; transition: .25s; z-index: 15; } .toggle-button:hover { cursor: pointer; } .toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s; } .toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0; } .toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; } .toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px; } .button-open { left: 25px; } .button-open .menu-bar-top { border-color: #fff; transform: rotate(45deg) translate(8px, 8px); transition: .5s; } .button-open .menu-bar-middle { background-color: #fff; transform: translate(230px); transition: .1s ease-in; opacity: 0; } .button-open .menu-bar-bottom { border-color: #fff; transform: rotate(-45deg) translate(7px, -7px); transition: .5s; } /* Text Block */ .wrapper { width: 40%; margin: 100px auto 0; color: #83828D; } .wrapper .text { padding: 30px; } .wrapper .text .heading { margin-bottom: 40px; font-size: 2em; } .wrapper .text p { line-height: 1.6em; } .wrapper .text .buttons { margin-top: 40px; } /* Buttons */ .wrapper .buttons .button { display: inline-block; margin-right: 20px; padding: 20px 25px; border-radius: 2em; background-color: #70CE64; color: #fff; font-size: .9em; font-weight: 700; transition: background-color .3s; } .wrapper .buttons .button-secondary { background-color: #FF6746; } .wrapper .buttons .button-primary:hover { background-color: #84D07A; } .wrapper .buttons .button-secondary:hover { background-color: #FF7D60; } /*Active state for the buttons*/ .wrapper .buttons .button-primary:active { background-color: #70CE64; } .wrapper .buttons .button-secondary:active { background-color: #FF6746; } /*Icons*/ .wrapper .buttons .button span { position: relative; display: inline-block; padding-right: 20px; } .wrapper .buttons .button span::after { position: absolute; font-family: "FontAwesome"; right: -3px; font-size: 14px; top: 0; transition: top .3s, right .3s; } .wrapper .buttons .button-primary span::after { content: "\f019"; } .wrapper .buttons .button-secondary span::after { content: "\f178"; } /*Slight icons animation*/ .wrapper .buttons .button-primary:hover span::after { top: 4px; } .wrapper .buttons .button-secondary:hover span::after { right: -6px; }
jQuery:
$(document).ready(function() { var $toggleButton = $('.toggle-button'), $menuWrap = $('.menu-wrap'), $sidebarArrow = $('.sidebar-menu-arrow'); // Hamburger button $toggleButton.on('click', function() { $(this).toggleClass('button-open'); $menuWrap.toggleClass('menu-show'); }); // Sidebar navigation arrows $sidebarArrow.click(function() { $(this).next().slideToggle(300); }); });