<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');
});
