Asp.net
如何在引導程序中使用 asp.net web.sitemap 和菜單控制項
我正在嘗試使用站點地圖和 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>謝謝大家
我在這里基於此程式碼和控制項實現了自己的控制項:
看看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"菜單上的屬性。我確信有辦法解決這個問題,但我還沒有弄清楚。