Question

我正在尝试使用站点地图和asp.net菜单控件并使用bootstrap进行换肤。

我使用ul和li等完成它看起来很棒。但这并没有增加面包屑，角色等的灵活性，所以我想使用站点地图和菜单控件。任何人都有任何帮助。我不能让切换下拉等工作。我已经尝试访问后面的代码中的项目来添加css和切换等但它不会工作。

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

站点地图文件

<?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>

全部谢谢

Answer 1

我在此处基于此代码和控件实现自己的控件：

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

Answer 2

查看Responsive ASP.NET Menu Control With Twitter Bootstrap

在本教程中，我们将使用ASP.NET菜单控件和Twitter Bootstrap实现折叠响应式导航栏。

以下是jQuery的相关部分，用于使菜单下拉列表正确显示。

    <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>

请注意，用于帮助折叠模式的.removeAttr('style')会破坏菜单上的Orientation="Horizontal"属性。我确定有办法解决这个问题，但我还没想到它。

如何使用asp.net web.sitemap和菜单控件与bootstrap

2 个答案: