Getting Started
15 Dec 201710 minutes to read
In this section, you can learn how to create a simple navigation drawer.
Create Navigation Drawer Widget
The following steps guide you in adding a Navigation Drawer control for a web application that displays a list of items such as home, profile, photos and location where you can navigate to desired page by clicking on the option available in the drawer.
Create an HTML file and paste the following template for web layout.
<html>
<head>
<title>Navigation Drawer</title>
<link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
</head>
<body>
<!-- Add Navigation Drawer control Here -->
<!-- Add Page Content content Here -->
</body>
</html>Create a div element that acts as a container for Navigation Drawer. Refer to the following code example.
<div id="navigationPane">
<ul>
<li data-ej-text="Home"></li>
<li data-ej-text="Profile"></li>
<li data-ej-text="Photos"></li>
<li data-ej-text="Location"></li>
</ul>
</div>Create the target element as follows to display the drawer by clicking target icon.
<div class="navi">
<div id="target" class="icon-target"> Drawer</div>
</div>To set the target icon image from sprite and to position the target icon properly use the following styles.
<style>
[class*="icon-"] {
background-image: url("http://js.syncfusion.com/ug/web/content/drawer/sprite.png");
}
.icon-target {
background-position: 0 -338px;
font-size: 34px;
height: 48px;
position: absolute;
text-indent: 50px;
top: -3px;
width: 48px;
z-index: 3;
}
.navi {
background: none repeat scroll 0 0 #C4C4B4;
color: #fff;
height: 45px;
padding-left: 5px;
width: 100%;
}
body {
background: none repeat scroll 0 0 #ece9d8;
}
</style>Create the navigation drawer control as follows. You can display the navigation items as a list (or it can be any template) by using the ListView control. This is achieved by setting the enableListView property to true. Also you can open the drawer by clicking on target element by setting the targetId property.
Add the following code in the script tag.
$(function () {
$("#navigationPane").ejNavigationDrawer({ enableListView: true, targetId: "target" });
});You can display the drawer either by clicking on the target icon or by swiping from left on the page. Refer to the following screenshot.
You can set the images for Navigation Drawer by using the data-ej-imageClass attribute in the inner list elements.
<div id="navigationPane">
<ul>
<li data-ej-imageclass="e-icon e-home" data-ej-text="Home"></li>
<li data-ej-imageclass="e-icon e-profile" data-ej-text="Profile"></li>
<li data-ej-imageclass="e-icon e-photo" data-ej-text="Photos"></li>
<li data-ej-imageclass="e-icon e-location" data-ej-text="Location"></li>
</ul>
</div>You can define the image classes specified for the list items as follows.
<style>
@font-face {
font-family: 'ej-font';
src: url('../../common-images/tools/icons.eot');
src: url('../../common-images/tools/icons.eot') format('embedded-opentype'), url('../../common-images/tools/icons.woff') format('woff'),url('../../common-images/tools/icons.woff') format('woff'), url('../../common-images/tools/icons.ttf') format('truetype'), url('../../common-images/tools/icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.e-home:before {
font-family: "ej-font";
content: "\e900";
}
.e-profile:before {
font-family: "ej-font";
content: "\e901";
}
.e-photo:before {
font-family: "ej-font";
content: "\e903";
}
.e-location:before {
font-family: "ej-font";
content: "\e905";
}
.e-people:before {
font-family: "ej-font";
content: "\e902";
}
.e-communities:before {
font-family: "ej-font";
content: "\e904";
}
.e-home, .e-profile, .e-people, .e-photo, .e-communities, .e-location {
font-size: 24px;
color: black;
}
</style>Run the above code to render the following output.
You can add desired page content while selecting the options in navigation drawer as follows.
<!-- Home Page Content-->
<div id="Home">
The Home screen allows you to choose the specific content type displayed.
</div>
<!-- Profile Page Content-->
<div id="Profile" style="display: none">
The Profile page content is displayed.
</div>
<!-- Photos Page Content-->
<div id="Photos" style="display: none">
The Photos page content is displayed.
</div>
<!-- Location Page Content-->
<div id="Location" style="display: none">
The Location page content is displayed.
</div>You can load the appropriate content for the navigation items by updating the content through mouseDown handler of ListView. You can define the handler and pass the method name with mouseDown attribute through listViewSettings. Also to view which item’s content is being loaded in the page, make the list selection to persist in the drawer by setting persistSelection as true. Refer to the following code example.
Add the following code in the script tag.
$(function () {
$("#navigationPane").ejNavigationDrawer({ enableListView: true, targetId: "target", listViewSettings: { mouseDown: 'slideMenuClick', persistSelection: true } });
});In the mouse down handler, you can hide the other content and display the respective selected item’s content.
function slideMenuClick(e) {
$('#Home, #Profile, #Photos, #Location').hide(); //Hiding all other contents
$('#' + e.text).show(); //Displaying the content based on the text of item selected
$("#navigationPane").ejNavigationDrawer("close");
}Run the above code to render the following output.
