"Left Side Menu"
Bootstrap 3.0.0 Snippet by Ravisw3

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <center><h1 class="text-shadow text-color">- Left Menu With Accordion -</h1></center> <div class="leftMenu"> <div class="hamburger close"> <span></span> <span></span> <span></span> </div> <ul class="leftMenuList"> <li> <a href="#" class="dropdown"> <i class="fa fa-shield" aria-hidden="true"></i> <span>OASISSECURITY</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>USERROLES</span> </a> </li> <li> <a href="#"> <span>USERSANDSESSIONS</span> </a> </li> <li> <a href="#"> <span>FUNCTIONDEFINISIONS</span> </a> </li> <li> <a href="#"> <span>GENERALSETUP</span> </a> </li> </ul> </li> <li> <a href="#" class="dropdown"> <i class="fa fa-table" aria-hidden="true"></i> <span>PATIENTMASTERINDEX</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>PATIENTDEATHREGISTRATION</span> </a> </li> </ul> </li> <li> <a href="#"> <i class="fa fa-bed" aria-hidden="true"></i> <span>QAYSRA</span> </a> </li> <li> <a href="#" class="dropdown"> <i class="fa fa-user-md" aria-hidden="true"></i> <span>PHDBMISC</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>OBOOKING</span> </a> </li> <li> <a href="#"> <span>ORDSERVC</span> </a> </li> </ul> </li> <li> <a href="#" class="dropdown"> <i class="fa fa-heartbeat" aria-hidden="true"></i> <span>PHDREP</span> </a> <ul class="dropdownlist"> <li> <a href="#" class="dropdown"> <span>PHDMDREP</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>MEDREP1</span> </a> </li> <li> <a href="#"> <span>MEDREP2</span> </a> </li> </ul> </li> <li> <a href="#" class="dropdown"> <span>PHDFINRE</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>FINREP1</span> </a> </li> </ul> </li> </ul> </li> <li> <a href="#" class="dropdown"> <i class="fa fa-cog" aria-hidden="true"></i> <span>DATASETSETUP</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>READINGBODYSITES</span> </a> </li> <li> <a href="#"> <span>DOCUMEN</span> </a> </li> <li> <a href="#"> <span>DSLIST</span> </a> </li> <li> <a href="#"> <span>DATASETQUESTIONS</span> </a> </li> <li> <a href="#"> <span>READINGTYPES</span> </a> </li> <li> <a href="#"> <span>DATASETCLASSESTF</span> </a> </li> </ul> </li> <li> <a href="#" class="dropdown"> <i class="fa fa-stethoscope" aria-hidden="true"></i> <span>TRANSCRIPTION</span> </a> <ul class="dropdownlist"> <li> <a href="#"> <span>TRANSCRIPTIONSETUP</span> </a> </li> <li> <a href="#"> <span>DOCUMENTREQUISITION</span> </a> </li> <li> <a href="#"> <span>DEFICIENCYTRACKING</span> </a> </li> <li> <a href="#"> <span>MANAGEDOCUMENTPANEL</span> </a> </li> </ul> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
body{ margin: 0; padding: 0; font-family: "arial"; background: #153439; width: vh100; height:vh100; position:relative; } h1{ color:#fff; margin:30px auto; display:table; text-align:center; } .leftMenu{ height: 100%; background-color: #00838f; position: fixed; left : 0; top:0; width : 50px; transition: all ease 1s; overflow: hidden; transition: .5s cubic-bezier(.8, .5, .2, 1.4); box-shadow: 1px 4px 8px 4px rgba(0,0,0,0.3); } .hamburger{ width : 40px; height : 40px; border-radius: 50%; background-color: #ffc107; float : right; margin-right: 5px; margin-top: 5px; text-align: center; cursor : pointer; box-shadow: 0px 3px 4px rgba(0,0,0,.5); position: relative; transform: rotate(0deg); } .hamburger.open{ background-color: tomato; transition: all ease .5s; } .hamburger:hover { box-shadow: none; transition: all ease .5s; transform: rotate(360deg); } .hamburger span{ width : 60%; height : 3px; background-color: #000; display: block; border-radius: 1px; float : left; margin-left: 20%; transition: all ease .3s; } .hamburger span:nth-child(1){ margin-top: 13px; } .hamburger span:nth-child(2){ margin-top: 3px; } .hamburger span:nth-child(3){ margin-top: 3px; } .open span:nth-child(1){ background-color: #fff; transform: rotate(45deg); transition-timing-function : ease-in-out; position: absolute; top: 5px; right: 8px; width: 25px; transition: all ease .5s; border-radius: 10px; } .open span:nth-child(2){ background-color : #fff; transition-timing-function : ease-in-out; margin-top: 18px; opacity: 0; transition: all ease .5s; } .open span:nth-child(3){ background-color : #fff; transform: rotate(-45deg); transition-timing-function : ease-in-out; margin-top: 0px; position: absolute; top: 18px; right: 8px; width: 25px; transition: all ease .5s; border-radius: 10px; } .openMenu{ width: 250px; transition: all ease 1s; overflow: hidden; transition: .5s cubic-bezier(.8, .5, .2, 1.4); } .leftMenuList{ margin-top: 70px; list-style: none; padding: 0; } .leftMenuList li{ width: 250px; /* height: 40px; */ line-height: 40px; color: #fff; border-bottom: 1px solid #00bcd6; /* padding : 5px; */ font-size: 13px; } .leftMenuList li:hover{ background-color: #00bcd6; transition: all ease .5s; cursor : pointer; } .leftMenuList li a{ text-decoration: none; color : #fff; } .leftMenuList li a svg{ width : 40px; height : 40px; float : left; margin-left: 0px; } .leftMenuList li a span{ text-decoration: none; color : #fff; margin-left: 15px; width : 100%; } i.fa { font-size: 25px; padding: 9px; width: 30px; text-align: center; } .leftMenuList li ul li{ padding: 0px; line-height: 30px; transition: all .4s; box-sizing: border-box; } .leftMenuList li ul li:hover{ background: #4DD0E1; transition: all .4s; } .leftMenuList li ul li ul li{ padding: 5px; background: #B2EBF2; } .leftMenuList li ul li ul li a span{ color:#00838f; } .leftMenuList li ul li ul li:hover{ background: #B2EBF2; } .dropdown { color: #fff; text-decoration: none; margin-bottom: 5px; display: block; position: relative; transition:0.5s; } .active + .dropdownlist { width: 100%; height: auto; line-height: 30px; padding: 0px; margin-left: 0px; background: #4DD0E1; transition:0.5s; } .active + .dropdownlist:hover{ background:#00bcd6; } .dropdownlist { width: 0; height: 0; overflow: hidden; transition:0.5s; } .dropdown:before { font-family: FontAwesome; content: "\f105"; transition: all .4s; padding-right: 5px; right: 20px; position: absolute; top: 4px; } .dropdown.active:before { font-family: FontAwesome; content: '\f107'; transition: all .4s; padding-right: 5px; } .leftMenu:not(.openMenu) li > .dropdownlist{ pointer-events: none; height:0; } .text-shadow{ text-shadow: 1px 1px 0px #000; } .text-color{ color: #00BCD4; }
$(document).ready(function(){ document.querySelector(".hamburger").onclick = function () { var element = document.querySelector(".leftMenu"); element.classList.toggle("openMenu"); var hamburger = document.querySelector(".hamburger"); hamburger.classList.toggle("open"); var closeAccordion = document.getElementsByClassName('dropdown'); var i = 0; for (i = 0; i < closeAccordion.length; i++) { closeAccordion[i].classList.remove('active'); } } var dropdown = document.getElementsByClassName('dropdown'); var i = 0; for (i = 0; i < dropdown.length; i++) { dropdown[i].onclick = function () { this.classList.toggle('active'); } } });

Related: See More


Questions / Comments: