Bootstrap 4.0.0 Snippet by dipakextra

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="aside"> <div class="aside-header"> <a href="index-3.html" class="menu-logo"> <img src="assets/img/logo.png" class="img-fluid" alt="Logo"> </a> <span class="close" data-dismiss="aside" aria-hidden="true">×</span> </div> <div class="aside-contents"> <nav id="sidebar" class="sidebar-wrapper"> <div class="sidebar-content"> <div class="sidebar-menu"> <ul> <li class="sidebar-dropdown"> <a href="#"> <span>Academic</span> </a> <div class="sidebar-submenu"> <ul> <li> <a href="#">Medical</a> </li> <li> <a href="#">Paramedical</a> </li> </ul> </div> </li> <li class="sidebar-dropdown"> <a href="#"> <span>Packages</span> </a> <div class="sidebar-submenu"> <ul> <li> <a href="#">Cardiology Procedure </a> </li> <li> <a href="#">Cardiothoracic Surgery</a> </li> </ul> </div> </li> <li> <a href="#"> <span>Information Under MSR Clause B.1.11Committees</span> </a> </li> <li class="sidebar-dropdown"> <a href="#"> <span>Patient Care</span> </a> <div class="sidebar-submenu"> <ul> <li> <a href="#">Ask UNMICRC</a> </li> <li> <a href="#">Accommodation</a> </li> <li> <a href="#">Floor Directory</a> </li> <li> <a href="#">Inpatients</a> </li> <li> <a href="#">Patient Education Brochure</a> </li> <li> <a href="#">Patient Rights & Responsibility</a> </li> </ul> </div> </li> <li> <a href="#"> <span>Nursing Care</span> </a> </li> <li> <a href="#"> <span>Career</span> </a> </li> <li> <a href="#"> <span>Tender</span> </a> </li> <li> <a href="#"> <span>Notification</span> </a> </li> <li> <a href="#"> <span>Upcoming Events</span> </a> </li> <li> <a href="#"> <span>11) Statistics</span> </a> </li> <li> <a href="#"> <span>112) Stent Price</span> </a> </li> <li class="sidebar-dropdown"> <a href="#"> <span>13) Other Department</span> </a> <div class="sidebar-submenu"> <ul> <li> <a href="#">Human Resource</a> </li> <li> <a href="#">Account</a> </li> <li> <a href="#">Bio Medical</a> </li> <li> <a href="#">IT</a> </li> </ul> </div> </li> <li class="sidebar-dropdown"> <a href="#"> <span>E Citizen</span> </a> <div class="sidebar-submenu"> <ul> <li> <a href="#">Patient Feedback</a> </li> <li> <a href="#">Suggestion and Complaints</a> </li> <li> <a href="#">RTI</a> </li> </ul> </div> </li> <li> <a href="#"> <span>Event Gallery</span> </a> </li> <li> <a href="#"> <span>Photo Gallery</span> </a> </li> <li> <a href="#"> <span>Video Gallery</span> </a> </li> <li> <a href="#"> <span>Heart Care (FAQ)</span> </a> </li> </ul> </div> <!-- sidebar-menu --> </div> </nav> </div> </div>
/*sidebar */ .aside { min-width: 350px; width: 15%; position: fixed; top: 0; right:0; bottom: 0; background-color: #fafafa; font-family: Helvetica, Arial, sans-serif; border-right: 1px solid #333; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); z-index: 2000; min-width: 0px; overflow: hidden; transition: 0.35s width ease, 0.35s min-width ease; } .aside .aside-header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; height: 60px; padding: 0 20px; justify-content: space-between; -webkit-justify-content: space-between; -ms-flex-pack: space-between; border-bottom: 1px solid #f0f0f0; } .aside .aside-header .close { float: right; cursor: pointer; } .aside .aside-contents { padding: 0.5em; padding-bottom: 1em; height: 100%; overflow: scroll; margin: 0; padding: 0 !important; width: 100%; background: #ee344e; } .aside.in { width: 15%; min-width: 300px; } .aside-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; transition: 0.2s opacity ease; opacity: 0; display: none; } .aside-backdrop.in { display: block; opacity: 0.5; } .sidebar-wrapper .sidebar-menu { padding-bottom: 10px; } .sidebar-wrapper .sidebar-menu .header-menu span { font-weight: bold; font-size: 14px; padding: 15px 20px 5px 20px; display: inline-block; } .sidebar-wrapper .sidebar-menu ul li a { display: inline-block; width: 100%; text-decoration: none; position: relative; padding: 8px 30px 8px 20px; } .sidebar-wrapper .sidebar-menu ul li a i { margin-right: 10px; font-size: 12px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; } .sidebar-wrapper .sidebar-menu ul li a:hover > i::before { display: inline-block; animation: swing ease-in-out 0.5s 1 alternate; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; font-style: normal; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; background: 0 0; position: absolute; right: 15px; top: 14px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul { padding: 5px 0; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li { padding-left: 25px; font-size: 13px; } .sidebar-wrapper .sidebar-menu ul li a span.label, .sidebar-wrapper .sidebar-menu ul li a span.badge { float: right; margin-top: 8px; margin-left: 5px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge, .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label { float: right; margin-top: 0px; } .sidebar-wrapper .sidebar-menu .sidebar-submenu { display: none; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after { transform: rotate(90deg); right: 17px; } /*--------------------------side-footer------------------------------*/ .sidebar-footer { position: absolute; width: 100%; bottom: 0; display: flex; } .sidebar-footer > a { flex-grow: 1; text-align: center; height: 30px; line-height: 30px; position: relative; }
// Sidebar if ($(window).width() <= 991) { var Sidemenu = function () { this.$menuItem = $('.main-nav a'); }; function init() { var $this = Sidemenu; $('.main-nav a').on('click', function (e) { if ($(this).parent().hasClass('has-submenu')) { e.preventDefault(); } if (!$(this).hasClass('submenu')) { $('ul', $(this).parents('ul:first')).slideUp(350); $('a', $(this).parents('ul:first')).removeClass('submenu'); $(this).next('ul').slideDown(350); $(this).addClass('submenu'); } else if ($(this).hasClass('submenu')) { $(this).removeClass('submenu'); $(this).next('ul').slideUp(350); } }); } // Sidebar Initiate init(); } // Mobile menu sidebar overlay $('body').append('<div class="sidebar-overlay"></div>'); $(document).on('click', '#mobile_btn', function () { $('main-wrapper').toggleClass('slide-nav'); $('.sidebar-overlay').toggleClass('opened'); $('html').addClass('menu-opened'); return false; }); $(document).on('click', '.sidebar-overlay', function () { $('html').removeClass('menu-opened'); $(this).removeClass('opened'); $('main-wrapper').removeClass('slide-nav'); }); $(document).on('click', '#menu_close', function () { $('html').removeClass('menu-opened'); $('.sidebar-overlay').removeClass('opened'); $('main-wrapper').removeClass('slide-nav'); });

Related: See More

Questions / Comments: