Fixed sidebar in EJ2 JavaScript Sidebar control
2 May 202324 minutes to read
The Sidebar does not require any specific style to make it as a fixed one. By default, the Sidebar position will be in fixed state. The following example demonstrates that the Sidebar is rendered with a fixed position. The position of the Sidebar will not change when scrolling the main content area.
ej.base.enableRipple(true);
//Initialization of sidebar
var defaultSidebar = new ej.navigations.Sidebar({
width:'260px',created:oncreate
});
defaultSidebar.appendTo('#default-sidebar');
//End of sidebar element
// Toggle the Sidebar
document.getElementById('hamburger').addEventListener('click', function () {
defaultSidebar.toggle();
});
function oncreate() {
this.element.style.visibility = '';
}
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Sidebar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<!-- declaration of sidebar element -->
<div id="wrapper">
<!-- sidebar element declaration -->
<aside id="default-sidebar" style="visibility: hidden">
<div class="sidebar-header header-cover" style="background-color:#0378d5">
<div class="image-container">
<div class="sidebar-image">
</div>
</div>
<div style="padding: 0 0 5px 0;">
<a class="sidebar-brand" href="#settings-dropdown">
john.doe@gmail.com
</a>
<span class="sf-icon-down icon"></span>
</div>
</div>
<!-- Sidebar navigation -->
<ul class="nav sidebar-nav">
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-file"></i>
<span class="e-text"> Inbox</span>
</a>
</li>
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-starred"></i>
<span class="e-text"> Starred</span>
</a>
</li>
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-recent"></i>
<span class="e-text">Snoozed</span>
</a>
</li>
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-important"></i>
<span class="e-text">Important</span>
</a>
</li>
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-offline"></i>
<span class="e-text"> Sent</span>
</a>
</li>
<li>
<a href="#">
<i class="sf-icon-sidebar sf-icon-backup"></i>
<span class="e-text"> Draft</span>
</a>
</li>
</ul>
</aside>
<!-- end of sidebar element -->
<!-- main content declaration -->
<div>
<div class="content">
<div id="left">
<span id="hamburger" class="e-icons menu default"></span>
</div>
<div id="center">
<span>Inbox</span>
</div>
<div id="right">
<span class="sf-icon-search"></span>
</div>
</div>
<div>
<div class="e-control e-listview e-list-template e-touch">
<ul class="e-list-parent e-ul ">
<li class="e-list-group-item e-level-1" role="group" data-uid="group-list-item-Today" aria-level="1">
<div class="e-text-content" role="presentation"><span class="" style="width: 100%; margin-left: 2%; margin-top: -2%;">Today</span></div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">Albert Lives</span>
</div>
<span class="received e-list-content e-second-heading">Opening for Sales Manager</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hello Uta Morgan,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Ila Russo</span>
</div>
<span class="received e-list-content e-second-heading">Business dinner invitation
</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hello Jelani Moreno,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Garth Owen</span>
</div>
<span class="received e-list-content e-second-heading">Application for Job Title</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hello Ila Russo,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">Ursula Patterson</span>
</div>
<span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Programmer Position Application</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Nichole Rivas</span>
</div>
<span class="received e-list-content e-second-heading">Annual Conference</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hi Igor Mccoy,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Nichole Rivas</span>
</div>
<span class="received e-list-content e-second-heading">Annual Conference</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hi Igor Mccoy,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Nichole Rivas</span>
</div>
<span class="received e-list-content e-second-heading">Annual Conference</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hi Igor Mccoy,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Nichole Rivas</span>
</div>
<span class="received e-list-content e-second-heading">Annual Conference</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hi Igor Mccoy,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">
Nichole Rivas</span>
</div>
<span class="received e-list-content e-second-heading">Annual Conference</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Hi Igor Mccoy,</span></span>
</div>
</li>
<li class="e-list-item">
<div class="e-list-wrapper e-list-avatar e-list-multi-line">
<span class="e-avatar e-icon sf-icon-profile"></span>
<div>
<span class="e-list-item-header e-name">Ursula Patterson</span>
</div>
<span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
<span class="e-list-item-header sf-icon-star">
<span class="e-list-text">Programmer Position Application</span></span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--end of main content declaration -->
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>