How to use asp.net web.sitemap and menu control using bootstrap

Question

I am trying to use a Sitemap and an asp.net control and share its download.

I did this using ul and li etc., which looks great. But this does not add the flexibility of crackers, roles, etc., Therefore, I would like to use the site map and menu. Anyone got help. I can not get to switch down, etc. Work. I tried to access an element in the code to add css and switch, etc., but it will not work.

<asp:SiteMapDataSource ID="MenuSitemap" SiteMapProvider="MenuSitemap" runat="server" ShowStartingNode="false"></asp:SiteMapDataSource> <asp:Menu ID="menFrontEnd" runat="server" Orientation="Horizontal" DataSourceID="MenuSitemap"></asp:Menu> 

sitemap file

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="/" title="Home" description="Home"> <siteMapNode url="/Default" title="Home" description="Home" /> <siteMapNode url="#1" title="Shop" description="Shop"> <siteMapNode url="/Secure/page1" title="page1" description="page1" /> <siteMapNode url="/Secure/page2" title="page2" description="page2" /> </siteMapNode> <siteMapNode url="#2" title="Maintenance" description="Maintenance" > <siteMapNode url="/Secure/Maintenance/page1" title="page1" description="Channels" /> <siteMapNode url="/Secure/Maintenance/page2" title="page2" description="page2" /> </siteMapNode> </siteMapNode> </siteMap> 

Thank you all

Answer 1

I implemented my own control bases for this code here:

http://bootstrapfriendlywebcontrols.codeplex.com/SourceControl/latest#V1.0/NotAClue.Web.UI.BootstrapWebControls/BootstrapMenu.cs

Answer 2

Check out ASP.NET Responsive Control with Bootstrap Twitter

In this tutorial, we will be introducing a crumbling navigation bar using the ASP.NET control and Twitter Bootstrap.

Here is the relevant jQuery section that is used to display the dropdown menus correctly.

  <script type="text/javascript"> $(function () { //to fix collapse mode width issue $(".nav li,.nav li a,.nav li ul").removeAttr('style'); //for dropdown menu $(".dropdown-menu").parent().removeClass().addClass('dropdown'); $(".dropdown>a").removeClass().addClass('dropdown-toggle').append('<b class="caret"></b>').attr('data-toggle', 'dropdown'); //remove default click redirect effect $('.dropdown-toggle').attr('onclick', '').off('click'); }); </script> 

Note that .removeAttr('style') , which is used to help in minimized mode, will supplant the Orientation="Horizontal" property in your menu. I am sure there is a way around this, but I have not figured it out yet.