How to navigate the internal pages while clicking the list item in the navigation drawer?
You can navigate to the internal page by using ajax. Refer to the following steps.
First, create an internal page from where you can get the content on clicking the items in the drawer. Then, render navigation drawer with mousedown event to handle the ajax post as in the following code example.
default.html
<div class="navi"> <div id="target" class="icon-target"> Drawer </div> </div> <div id="navpane"> <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> <!-- Default Page Content--> <div id="render"> This page displays the content of the item in drawer on click. </div> <script type="text/javascript"> $(function () { $("#navpane").ejNavigationDrawer({ enableListView: true, targetId: "target", listViewSettings: { mouseDown: 'slideMenuClick', persistSelection: true } }); }); </script> <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> |
Now, you need to handle $.ajax() function to load the internal page content to the current page. Refer to the following code example.
[script] function slideMenuClick(args) { $.ajax({ url: "ajaxpages/" + args.text + ".html", //To get internal page url type: "POST", success: function (e, status, response) { //Success handler of content loading while list click happens $('#render').html(response.responseText); $('#target').html(args.text);//To change the header based on the internal page content $("#navpane").ejNavigationDrawer("close"); }, error: function (error) { alert("error"); } }) } |
Output:
