Use existing html css to create navigation

[Suvankar]

Right now, I am working in administration dashboard. Inside dashboard there is a left side menu which can be expanded or can be collapsed.Let me show you its code,

 

<div id="main-menu" class="main-menu collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="index.html"><i class="menu-icon fa fa-dashboard"></i>Dashboard </a></li><h3 class="menu-title">UI elements</h3><!-- /.menu-title --><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-laptop"></i>Components
             </a><ul class="sub-menu children dropdown-menu"><li><i class="fa fa-puzzle-piece"></i><a href="ui-buttons.html">Buttons</a></li><li><i class="fa fa-id-badge"></i><a href="ui-badges.html">Badges</a></li><li><i class="fa fa-bars"></i><a href="ui-tabs.html">Tabs</a></li><li><i class="fa fa-share-square-o"></i><a href="ui-social-buttons.html">Social Buttons</a></li><li><i class="fa fa-id-card-o"></i><a href="ui-cards.html">Cards</a></li><li><i class="fa fa-exclamation-triangle"></i><a href="ui-alerts.html">Alerts</a></li><li><i class="fa fa-spinner"></i><a href="ui-progressbar.html">Progress Bars</a></li><li><i class="fa fa-fire"></i><a href="ui-modals.html">Modals</a></li><li><i class="fa fa-book"></i><a href="ui-switches.html">Switches</a></li><li><i class="fa fa-th"></i><a href="ui-grids.html">Grids</a></li><li><i class="fa fa-file-word-o"></i><a href="ui-typgraphy.html">Typography</a></li></ul></li><li class="menu-item-has-children active dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-table"></i>Tables
           </a><ul class="sub-menu children dropdown-menu"><li><i class="fa fa-table"></i><a href="tables-basic.html">Basic Table</a></li><li><i class="fa fa-table"></i><a href="tables-data.html">Data Table</a></li></ul></li><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-th"></i>Forms
           </a><ul class="sub-menu children dropdown-menu"><li><i class="menu-icon fa fa-th"></i><a href="forms-basic.html">Basic Form</a></li><li><i class="menu-icon fa fa-th"></i><a href="forms-advanced.html">Advanced Form</a></li></ul></li><h3 class="menu-title">Icons</h3><!-- /.menu-title --><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-tasks"></i>Icons</a><ul class="sub-menu children dropdown-menu"><li><i class="menu-icon fa fa-fort-awesome"></i><a href="font-fontawesome.html">Font Awesome</a></li><li><i class="menu-icon ti-themify-logo"></i><a href="font-themify.html">Themefy Icons</a></li></ul></li><li><a href="widgets.html"><i class="menu-icon ti-email"></i>Widgets </a></li><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-bar-chart"></i>Charts</a><ul class="sub-menu children dropdown-menu"><li><i class="menu-icon fa fa-line-chart"></i><a href="charts-chartjs.html">Chart JS</a></li><li><i class="menu-icon fa fa-area-chart"></i><a href="charts-flot.html">Flot Chart</a></li><li><i class="menu-icon fa fa-pie-chart"></i><a href="charts-peity.html">Peity Chart</a></li></ul></li><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-area-chart"></i>Maps</a><ul class="sub-menu children dropdown-menu"><li><i class="menu-icon fa fa-map-o"></i><a href="maps-gmap.html">Google Maps</a></li><li><i class="menu-icon fa fa-street-view"></i><a href="maps-vector.html">Vector Maps</a></li></ul></li><h3 class="menu-title">Extras</h3><!-- /.menu-title --><li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-glass"></i>Pages</a><ul class="sub-menu children dropdown-menu"><li><i class="menu-icon fa fa-sign-in"></i><a href="page-login.html">Login</a></li><li><i class="menu-icon fa fa-sign-in"></i><a href="page-register.html">Register</a></li><li><i class="menu-icon fa fa-paper-plane"></i><a href="pages-forget.html">Forget Pass</a></li></ul></li></ul><%--<telerik:RadPanelBar ID="rpb_menu" runat="server" DataValueField="view_index" DataTextField="description" ExpandMode="MultipleExpandedItems" DataFieldID="activity_id"DataFieldParentID="parent_id" AllowCollapseAllItems="false" Height="100%" Width="100%" EnableEmbeddedSkins="true" Skin="Glow" BorderStyle="None" BackColor="#272C33" OnItemDataBound="rpb_menu_ItemDataBound"></telerik:RadPanelBar>--%> </div>

 

So as you could see there is some hard coded <ul> and <li>s out there and I need to replace it's content and those content will be populated from database.

<table><thead><tr><th title="Field #1">activity_id</th><th title="Field #2">parent_id</th><th title="Field #3">description</th></tr></thead><tbody><tr><td>29</td><td>34</td><td>Topic Management</td></tr><tr><td>30</td><td>34</td><td>Subject Management</td></tr><tr><td>31</td><td>34</td><td>Syllabus Management</td></tr><tr><td>34</td><td>NULL</td><td>LMS</td></tr><tr><td>35</td><td>34</td><td>Question Management</td></tr><tr><td>36</td><td>34</td><td>Online Test Management</td></tr><tr><td>37</td><td>34</td><td>Give Online Test</td></tr></tbody></table>

 

Please run snippet to view content which will be shown in place of hard coded content as shown below,

<li class="menu-item-has-children dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="menu-icon fa fa-laptop"></i>LMS(From database)</a><ul class="sub-menu children dropdown-menu"><li><i class="fa fa-puzzle-piece"></i><a href="ui-buttons.html">Topic Management (from database)</a></li><li><i class="fa fa-id-badge"></i><a href="ui-badges.html">Subject Management(From database)</a></li></ul></li>

Now, I wanna know If I could get desired output using RadPanelBar control?

 

Note:- What I am getting If I'm using RadPanelBar control..

 

<div id="ctl00_rpb_menu" class="RadPanelBar RadPanelBar_Glow" style="background-color:#272C33;border-style:None;height:100%;width:100%;"><br> <ul class="rpRootGroup"><br>      <li class="rpItem rpFirst"><a href="#" class="rpLink rpRootLink rpExpandable panelbarHeaderCollapsed rpFocused"><span class="rpOut"><img alt="" src="images/menu/useradmin.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">User Management</span></span></a><div class="rpSlide"><br>           <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Users Profile</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Language Settings</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Users/Branch &amp; Academic Registration</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Stuff Creation</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">User Authorization</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">User Tree</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">User Role Assaign</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Branch To Branch Linking</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">User Leads</span></span></a></li><br>          </ul><br>     </div></li><li class="rpItem"><a href="#" class="rpLink rpRootLink rpExpandable panelbarHeaderCollapsed"><span class="rpOut"><img alt="" src="images/menu/pms.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">PMS</span></span></a><div class="rpSlide"><br>            <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Earn Points Set</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Consume Points Set</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Earn Points Set(Adv.)</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Consume Points Set(Adv.)</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Pakage Creation</span></span></a></li><br>           </ul><br>     </div></li><li class="rpItem"><a href="#" class="rpLink panelbarHeaderCollapsed rpRootLink rpExpandable"><span class="rpOut"><img alt="" src="images/menu/lms.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">LMS</span></span></a><div class="rpSlide"><br>            <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Topic Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Subject Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Syllabus Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Question Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Online Test Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Give Online Test</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Create Board Institution</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Class Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Course Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Subject Code Management</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Syllabus Management Permission</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Syllabus Authorization</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Assign Test</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Course Design</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Template Creation</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Check Exam</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">AssignFaculty</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">CheckResult</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Lecture And Notes</span></span></a></li><br>            </ul><br>     </div></li><li class="rpItem"><a href="#" class="rpLink panelbarHeaderCollapsed rpRootLink rpExpandable"><span class="rpOut"><img alt="" src="images/menu/accounts.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">Account</span></span></a><div class="rpSlide"><br>           <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Refer users</span></span></a></li><br>         </ul><br>     </div></li><li class="rpItem"><a href="#" class="rpLink panelbarHeaderCollapsed rpRootLink rpExpandable"><span class="rpOut"><img alt="" src="images/menu/general.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">General</span></span></a><div class="rpSlide"><br>            <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Query Management</span></span></a></li><br>            </ul><br>     </div></li><li class="rpItem"><a href="#" class="rpLink panelbarHeaderCollapsed rpRootLink rpExpandable"><span class="rpOut"><img alt="" src="images/menu/lead_management.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">Lead Management</span></span></a><div class="rpSlide"><br>            <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Lead Master</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Follow Up</span></span></a></li><br>           </ul><br>     </div></li><li class="rpItem rpLast"><a href="#" class="rpLink rpRootLink rpExpandable panelbarHeaderCollapsed"><span class="rpOut"><img alt="" src="images/menu/finance.png" class="rpImage"><span class="rpExpandHandle"></span><span class="rpText">Finance</span></span></a><div class="rpSlide"><br>         <ul class="rpGroup rpLevel1 "><br>                <li class="rpItem rpFirst"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText"><br>Create Fees</span></span></a></li><li class="rpItem"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Schedule Fee Collection Dates</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink panelbarInnerCollapsed"><span class="rpOut"><span class="rpExpandHandle"></span><span class="rpText">Collect Fees</span></span></a></li><br>          </ul><br>     </div></li><br> </ul><input id="ctl00_rpb_menu_ClientState" name="ctl00_rpb_menu_ClientState" type="hidden" autocomplete="off"><br></div>

[Rumen]

Hi Suvankar

From the provided information I got the impression that you are looking for a drawer component, but not a panelbar. With regards to this, you may want to evaluate the Kendo UI suite, which offers such a tool:
https://docs.telerik.com/kendo-ui/controls/hybrid/introduction
https://docs.telerik.com/kendo-ui/controls/hybrid/drawer/drawer.

If you'd like to see a nav drawer component added to the Telerik ASP.NET AJAX suite, please vote for it at - https://feedback.telerik.com/Project/108/Feedback/Details/155109-app-drawer.

Best regards,
Rumen
Progress Telerik