ejNavigationDrawer

The Navigation Drawer is a sliding panel that displays the list of navigation options on demand. That is, by default, it is not visible but you can display it onto the left/right side of the screen by swiping or by clicking with desired target icon.

Syntax

  • javascript
  • $(element).ejNavigationDrawer()

    Example

  • html
  • //create Navigation Drawer in Obtrusive way
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer();     
    });
    </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.navigationdrawer.js

    • module:ej.listview.js

    Members

    ajaxSettings Object

    Specifies the ajaxSettings option to load the content to the NavigationDrawer control.

    Default Value

    • null

    Example

  • html
  • <div id="container"> </div>
        <div id="navigationPane">
        <ul>
            <li data-ej-text="Artwork"></li>
            <li data-ej-text="Abstract"></li>
            <li data-ej-text="2 Acrylic Mediums"></li>
            <li data-ej-text="Creative Acrylic"></li>
            <li data-ej-text="Modern Painting"></li>
        </ul>
        </div>
        <script>
        // Set the ajaxSettings options during initialization.                  
                $("#navigationPane").ejNavigationDrawer({  ajaxSettings: { type: 'GET', cache: false, data: {}, dataType: "html", contentType: "html", async: true } });
        </script>

    ajaxSettings.async boolean

    It specifies, whether to enable or disable asynchronous request.

    ajaxSettings.cache boolean

    It specifies the page will be cached in the web browser.

    ajaxSettings.contentType string

    It specifies the type of data is send in the query string.

    ajaxSettings.data Object

    It specifies the data as an object, will be passed in the query string.

    ajaxSettings.dataType string

    It specifies the type of data that you’re expecting back from the response.

    ajaxSettings.type string

    It specifies the HTTP request type.

    contentId string

    Specifies the contentId for navigation drawer, where the AJAX content need to updated

    Default Value

    • null

    Example

  • html
  • // Set Navigation Drawer contentId on initialization. 
    //To set contentId API value 
    <div id="container"> </div>
    <div id="navigationPane">
    <ul>
                    <li data-ej-text="Artwork"></li>
                    <li data-ej-text="Abstract"></li>
                    <li data-ej-text="2 Acrylic Mediums"></li>
                    <li data-ej-text="Creative Acrylic"></li>
                    <li data-ej-text="Modern Painting"></li>
    </ul>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("contentId","container");      
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer contentId, after initialization:
    $(function () {
    // Gets the contentId API value.                
    $("#navigationPane").ejNavigationDrawer("option", "contentId");       
    // Sets the contentId API       
    $("#navigationPane").ejNavigationDrawer ("option", "contentId", "container");  
    });
    </script>

    cssClass string

    Sets the root class for NavigationDrawer theme. This cssClass API helps to use custom skinning option for NavigationDrawer control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • // Set Navigation Drawer direction on initialization. 
    //To set direction API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>            
    <input id="target" type="button" text="target"/>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("cssClass","custom-class");     
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer cssClass, after initialization:
    $(function () {
    // Gets the cssClass API value.         
    $("#navigationPane").ejNavigationDrawer("option", "cssClass"); 
    // Sets the cssClass API        
    $("#navigationPane").ejNavigationDrawer ("option", "cssClass", "custom-class");  
    });
    </script>

    direction enum

    Sets the Direction for the control. See Direction

    Name Type Default Description
    Left string left Used to set Direction as Left
    None string none Used to set Direction as None
    Right string right Used to set Direction as Right

    Default Value

    • left

    Example

  • html
  • // Set Navigation Drawer direction on initialization. 
    //To set direction API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("direction","left");   
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer direction, after initialization:
    $(function () {
    // Gets the direction API value.                
    $("#navigationPane").ejNavigationDrawer("option", "direction");        
    // Sets the direction API       
    $("#navigationPane").ejNavigationDrawer ("option", "direction", "left");  
    });
    </script>

    enableListView boolean

    Sets the listview to be enabled or not

    Default Value

    • false

    Example

  • html
  • // Set Navigation Drawer listview on initialization. 
    //To set listview API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("enableListView","false");     
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer listview, after initialization:
    $(function () {
    // Gets the listview API value.         
    $("#navigationPane").ejNavigationDrawer("option", "enableListView");   
    // Sets the listview API        
    $("#navigationPane").ejNavigationDrawer ("option", "enableListView", "false");  
    });
    </script>

    items Array

    Specifies the listview items as an array of object.

    Default Value

    • []

    Example

  • html
  • // Set Navigation Drawer listview items on initialization. 
    //To set listview API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer({enableListview:true,items:[{text:"Item1"},{text:"Item2"},{text:"Item3"}]});   
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer listview items, after initialization:
    $(function () {
    // Gets the listViewSettings API value.         
    $("#navigationPane").ejNavigationDrawer("option", "items");    
    // Sets the listViewSettings API        
    $("#navigationPane").ejNavigationDrawer ("option", "items", [{text:"Item1"},{text:"Item2"},{text:"Item3"}]);  
    });
    </script>

    listViewSettings Object

    Sets all the properties of listview to render in navigation drawer

    Example

  • html
  • // Set Navigation Drawer listview on initialization. 
    //To set listview API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer({model.listViewSettings{width:200});   
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer listViewSettings, after initialization:
    $(function () {
    // Gets the listViewSettings API value.         
    $("#navigationPane").ejNavigationDrawer("option", "listViewSettings.width");   
    // Sets the listViewSettings API        
    $("#navigationPane").ejNavigationDrawer ("option", "listViewSettings.width", "200");  
    });
    </script>

    position string

    Specifies position whether it is in fixed or relative to the page. See Position

    Default Value

    • normal

    Example

  • html
  • // Set Navigation Drawer position on initialization. 
    //To set position API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("position","fixed");   
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer position, after initialization:
    $(function () {
    // Gets the position API value.         
    $("#navigationPane").ejNavigationDrawer("option", "position"); 
    // Sets the position API        
    $("#navigationPane").ejNavigationDrawer ("option", "position", "fixed");  
    });
    </script>

    targetId string

    Specifies the targetId for navigation drawer

    Default Value

    • ””

    Example

  • html
  • // Set Navigation Drawer direction on initialization. 
    //To set direction API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>            
    <input id="target" type="button" text="target"/>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("targetId","target");  
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer targetId, after initialization:
    $(function () {
    // Gets the targetId API value.         
    $("#navigationPane").ejNavigationDrawer("option", "targetId"); 
    // Sets the targetId API        
    $("#navigationPane").ejNavigationDrawer ("option", "targetId", "left");  
    });
    </script>

    type string

    Sets the rendering type of the control. See Type

    Default Value

    • overlay

    Example

  • html
  • // Set Navigation Drawer type on initialization. 
    //To set type API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("type","overlay");     
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer type, after initialization:
    $(function () {
    // Gets the type API value.             
    $("#navigationPane").ejNavigationDrawer("option", "type");     
    // Sets the type API    
    $("#navigationPane").ejNavigationDrawer ("option", "type", "overlay");  
    });
    </script>

    width number

    Specifies the width of the control

    Default Value

    • auto

    Example

  • html
  • // Set Navigation Drawer width on initialization. 
    //To set width API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer("width","200");        
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer width, after initialization:
    $(function () {
    // Gets the width API value.            
    $("#navigationPane").ejNavigationDrawer("option", "width");    
    // Sets the width API   
    $("#navigationPane").ejNavigationDrawer ("option", "width", "overlay");  
    });
    </script>

    isPaneOpen boolean

    Navigation pane opened initially when isPaneOpen property is true.

    Default Value

    • false

    Example

  • html
  • // Set Navigation Drawer isPaneOpen on initialization. 
    //To set isPaneOpen API value 
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <div >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $(function () {
    $("#navigationPane").ejNavigationDrawer({isPaneOpen:true});        
    });
    </script>
  • html
  • <script>
    //Get or set the Navigation Drawer isPaneOpen, after initialization:
    $(function () {
    // Gets the isPaneOpen API value.            
    $("#navigationPane").ejNavigationDrawer("option", "isPaneOpen");    
    // Sets the isPaneOpen API   
    $("#navigationPane").ejNavigationDrawer ("option", "isPaneOpen",false);  
    });
    </script>

    Methods

    close()

    To close the navigation drawer control

    Example

  • html
  • <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script >
    $(function(){
      $("#navigationPane").ejNavigationDrawer();
      $("#navigationPane").ejNavigationDrawer("close");
    });
    </script >

    loadContent(id,url)

    To load AJAX content into NavigationDrawer container.

    Example

  • html
  • <div class="e-header">
          <div id="buttonDrawer" class="drawericon e-icon"></div>
          <h2>Template Content</h2>
        </div>
        <div id="navigationPane">
          <div id="basicAccordion" class="control_frame">
            <h3><a href="#">Menu</a></h3>
            <div>
              <div class="selectedAccordion" data-url="#Home">Home</div>
              <div class="selectedAccordion" data-url="#People">People</div>
              <div class="selectedAccordion" data-url="#Profile">Profile</div>
            </div>
          </div>
        </div>
        <script >
        $(function(){
          $("#basicAccordion").ejAccordion({width:"100%",height:"100%"});
          $("#navigationPane").ejNavigationDrawer({ targetId: "buttonDrawer", contentId: "content_container", type: "overlay", direction: "left", position: "normal" });
          $(".selectedAccordion").click(function(e){
              var navigationObj = $("#navigationPane").ejNavigationDrawer("instance");
              navigationObj.loadContent($("#content_container") ,"/Content/NavigationDrawer/"+$(e.currentTarget).attr("data-url").replace("#","")+".html");
            });
        });
        </script >

    open()

    To open the navigation drawer control

    Example

  • html
  • <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script >
    $(function(){
            $("#navigationPane").ejNavigationDrawer();
      $("#navigationPane").ejNavigationDrawer("open");
    });
    </script >

    toggle()

    To Toggle the navigation drawer control

    Example

  • html
  • <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script >
    $(function(){
            $("#navigationPane").ejNavigationDrawer();
      $("#navigationPane").ejNavigationDrawer("toggle");
    });
    </script >

    Events

    ajaxComplete

    Event triggers after the AJAX content loaded completely.

    Name Type Description
    cancel boolean Set this option to true to cancel the event.
    model Object Instance of the navigation drawer model object.
    type string Name of the event.
    URL string URL of the content.
    data string Response content.

    Example

  • html
  • <div id="home" class="navsubpage">
        <div align="center" class="content">
        <h2 class="title">
        Home</h2>
        <p>
        Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
        </p>
        </div>
        </div>
        <style>
        .list {
          border-bottom: 1px solid;
          line-height: 50px;
          text-align: center;
          width:200px;
          }
        </style>
        <div id="navigationPane" >
        <div class="list"> Home </div>
        <div class="list"> Communities </div>
        </div>
        <script >
        $(function(){
                $("#navigationPane").ejNavigationDrawer({
                  ajaxComplete: function (args) { //handle the event }
                }
                });
        });
        </script >

    ajaxError

    Event triggers when the AJAX request failed.

    </td>
    Name Type Description
    cancel boolean Set this option to true to cancel the event.
    model Object Instance of the navigation drawer model object.
    type string Name of the event.
    URL string URL of the content.
    data Object
    Name Type Description
    responseText string Error page content.
    status number Error code.
    statusText string The corresponding error description.

    Example

  • html
  • <div id="home" class="navsubpage">
        <div align="center" class="content">
        <h2 class="title">
        Home</h2>
        <p>
        Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
        </p>
        </div>
        </div>
        <style>
        .list {
          border-bottom: 1px solid;
          line-height: 50px;
          text-align: center;
          width:200px;
          }
        </style>
        <div id="navigationPane" >
        <div class="list"> Home </div>
        <div class="list"> Communities </div>
        </div>
        <script >
        $(function(){
                $("#navigationPane").ejNavigationDrawer({
                  ajaxError: function (args) { //handle the event }
                }
                });
        });
        </script >

    ajaxSuccess

    Event triggers after the AJAX content loaded successfully.

    Name Type Description
    cancel boolean Set this option to true to cancel the event.
    model Object Instance of the navigation drawer model object.
    type string Name of the event.
    URL string URL of the content.
    data string Response content.

    Example

  • html
  • <div id="home" class="navsubpage">
        <div align="center" class="content">
        <h2 class="title">
        Home</h2>
        <p>
        Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
        </p>
        </div>
        </div>
        <style>
        .list {
          border-bottom: 1px solid;
          line-height: 50px;
          text-align: center;
          width:200px;
          }
        </style>
        <div id="navigationPane" >
        <div class="list"> Home </div>
        <div class="list"> Communities </div>
        </div>
        <script >
        $(function(){
                $("#navigationPane").ejNavigationDrawer({
                  ajaxSuccess: function (args) { //handle the event }
                }
                });
        });
        </script >

    beforeClose

    Event triggers before the control gets closed.

    Name Type Description
    argument Object Event parameters from Navigation Drawer
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the Navigation Drawer model
    type string returns the name of the event

    Example

  • html
  • //BeforeClose event for Navigation pane
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $("#navigationPane").ejNavigationDrawer({
      beforeClose: function (args) { //handle the event
    }
    });   
    $("#navigationPane").ejNavigationDrawer("close");
    </script>

    open

    Event triggers when the control open.

    Name Type Description
    argument Object Event parameters from Navigation Drawer
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the Navigation Drawer model
    type string returns the name of the event

    Example

  • html
  • //Open event for Navigation pane
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $("#navigationPane").ejNavigationDrawer({
      open: function (args) { //handle the event
    }
    });   
    $("#navigationPane").ejNavigationDrawer("open");   
    </script>

    swipe

    Event triggers when the Swipe happens.

    Name Type Description
    argument Object Event parameters from Navigation Drawer
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model Object returns the Navigation Drawer model
    type string returns the name of the event

    Example

  • html
  • //Swipe event for Navigation pane
    <div id="home" class="navsubpage">
    <div align="center" class="content">
    <h2 class="title">
    Home</h2>
    <p>
    Founded by industry experts in 2001,Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform.
    </p>
    </div>
    </div>
    <style>
    .list {
      border-bottom: 1px solid;
      line-height: 50px;
      text-align: center;
      width:200px;
      }
    </style>
    <div id="navigationPane" >
    <div class="list"> Home </div>
    <div class="list"> Communities </div>
    </div>
    <script>
    $("#navigationPane").ejNavigationDrawer({
      swipe: function (args) { //handle the event
    }
    });   
    </script>