Author: | bpassos |
---|---|
Views Total: | 5,403 views |
Official Page: | Go to website |
Last Update: | May 1, 2015 |
License: | MIT |
Preview:

Description:
A minimal JavaScript side menu that uses CSS3 transitions to slide in a vertical menu when you click on the toggle icon.
How to use it:
Include the Font Awesome Icon Font for menu icons.
<link rel="stylesheet" href="font-awesome.min.css">
Create a side menu bar to toggle the side menu.
<div class="ms_menu_bar__wrapper"> <ul class="ms_menu"> <li class="ms_menu__trigger"> <i class="fa fa-bars"></i> </li> </ul> </div>
Create a list of items for the side menu.
<div class="ms_menu_body__wrapper hide-menu"> <ul> <li class="ms_menu__item"> <i class="ms_menu__item-icon fa fa-circle-thin"></i> Menu 1 </li> <li class="ms_menu__item"> <i class="ms_menu__item-icon fa fa-circle-thin"></i> Menu 2 </li> <li class="ms_menu__item"> <i class="ms_menu__item-icon fa fa-circle-thin"></i> Menu 3 </li> </ul> </div>
Basic CSS styles.
ul, ol, li { list-style: none; color: white; margin: 0; padding: 0; } .ms_menu_bar__wrapper { height: 100%; width: 60px; background: #2B1F34; padding: 15px 10px; float: left; position: relative; z-index: 10; } .ms_menu__trigger { font-size: 30px; text-align: center; cursor: pointer; transition: color 0.6s; } .ms_menu__trigger:hover { color: #2F879B; } .ms_menu__item-icon { margin-right: 10px; } .ms_menu_body__wrapper { float: left; background: rgba(24, 88, 109, 0.8); position: relative; left: -1px; } .ms_menu__item { border-bottom: 1px solid #37616A; padding: 15px 40px 15px 15px; font-size: 14px; cursor: pointer; transition: background 0.6s; } .ms_menu__item:hover { background: rgba(0,0,0,0.4); } .hide-menu { opacity: 0; transition: all 0.06s; position: relative; z-index: 0; left: -90px; } .show-menu { transition: all 0.1s; left: -1px; }
Load the menu.js JavaScript library at the bottom of the document.
<script src="js/menu.js"></script>
Initialize the side menu.
var init = (function(window, undefined) { menuTrigger(); return init; })(window);