8

我正在尝试使用站点地图和 asp.net 菜单控件并使用引导程序对其进行皮肤。

我已经使用 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>

谢谢大家

4

2 回答 2

3

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

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

于 2013-10-24T13:51:07.023 回答
0

看看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"菜单上的属性。我确信有办法解决这个问题，但我还没有弄清楚。

于 2013-09-24T05:20:02.920 回答