帶文本，圖形和分隔符的菜單

Question

我有一個需要菜單系統的c＃/ asp.net網站。

我一直在尋找的內在ASP：菜單，但它似乎並沒有考慮到這些需求....

文本是在圖形和圖形來表示每個菜單選項之間的分隔符。

它還必須使用不同的顏色來表示當前活動的菜單選項。

這是一個單層菜單 - 基於母版頁設計（菜單在母版頁上），菜單選項在內容頁上。

有沒有人有一個免費的工具可以做到這一點？

感謝

Answer 1

您可以使用RadMenu telerik control

鏈接：http://demos.telerik.com/aspnet-ajax/menu/examples/overview/defaultcs.aspx

您還可以閱讀這篇文章：

Best Free Controls for .NET

Answer 2

這都可以被建立在.NET來實現在菜單中。

每個ToolStripMenuItem都有一個BackgroundImage屬性（可以設置背景圖形）。該類有一個MouseHover事件，您可以捕獲該事件以通過編程方式更改顏色。

有一個ToolStripSeparator類可以讓你添加分隔符。

有關.NET中菜單的更詳細討論，請參見this article。

Answer 3

這是一個古老的問題，如果有人再來這裏。這是他們:)

這就是我做到的。希望它可以幫助別人......

方法1.通過使用圖像和代碼背後

你將不得不爲每個菜單項的一對圖像。一個用於有源和一個用於未選擇的

ASPX代碼

       <asp:Menu 
      ID="Menu1" 
      Width="1300px" 
      runat="server" 
      Orientation="Horizontal" 
      StaticEnableDefaultPopOutImage="False" 
      OnMenuItemClick="Menu1_MenuItemClick" > 
      <DynamicSelectedStyle CssClass="mSelected" /> 
      <StaticSelectedStyle CssClass="mSelected" /> 
      <Items> 
       <asp:MenuItem ImageUrl="images/selectedt1.jpg" Text="" Value="0" ></asp:MenuItem> 
       <asp:MenuItem ImageUrl="images/unselectedt2.jpg" Text="" Value="1"></asp:MenuItem> 
       <asp:MenuItem ImageUrl="images/unselectedt3.jpg" Text="" Value="2"></asp:MenuItem> 
       <asp:MenuItem ImageUrl="images/unselectedt4.jpg" Text="" Value="3"></asp:MenuItem> 
    </Items> 
    </asp:Menu> 

CSS

<style type="text/css"> 
.mSelected {border:none;border-collapse:collapse;border-width:0px;border-color:#ffffff;} 
</style> 

aspx.cs代碼

 protected void Menu1_MenuItemClick(object sender, MenuEventArgs e) 
     { 

      int i = 0; // index of the menu item 
    if (Int32.Parse(e.Item.Value) == 0) 
      { 
       Menu1.Items[0].ImageUrl = "images/selectedt1.jpg"; 
       Menu1.Items[1].ImageUrl = "images/unselectedt2.jpg"; 
       Menu1.Items[2].ImageUrl = "images/unselectedt3.jpg"; 
       Menu1.Items[3].ImageUrl = "images/unselectedt4.jpg"; 
      } 
      if (Int32.Parse(e.Item.Value) == 1) 
      { 
       Menu1.Items[0].ImageUrl = "images/unselectedt1.jpg"; 
       Menu1.Items[1].ImageUrl = "images/selectedt2.jpg"; 
       Menu1.Items[2].ImageUrl = "images/unselectedt3.jpg"; 
       Menu1.Items[3].ImageUrl = "images/unselectedt4.jpg"; 
      } 
      if (Int32.Parse(e.Item.Value) == 2) 
      { 
       Menu1.Items[0].ImageUrl = "images/unselectedt1.jpg"; 
       Menu1.Items[1].ImageUrl = "images/unselectedt2.jpg"; 
       Menu1.Items[2].ImageUrl = "images/selectedt3.jpg"; 
       Menu1.Items[3].ImageUrl = "images/unselectedt4.jpg"; 
      } 
} 

Method 1 Result Screenshot

方法2。使用JavaScript和CSS

ASPX代碼

<asp:Menu 
      ID="Menu1" 
      runat="server" 
      Orientation="Horizontal" 
      StaticEnableDefaultPopOutImage="False" 
      OnMenuItemClick="Menu1_MenuItemClick" DynamicSelectedStyle-ForeColor="Black" StaticMenuItemStyle-Height="22px" StaticMenuItemStyle-Width="120px" StaticMenuItemStyle-ItemSpacing="2px" BackColor="#C3C3C3" Font-Size="16px" ForeColor="Black" Font-Names="cambria" StaticMenuItemStyle-VerticalPadding="3px" StaticMenuStyle-Width="900px" StaticSelectedStyle-BackColor="White" StaticSelectedStyle-ForeColor="Black" StaticMenuItemStyle-BorderColor="White" StaticMenuItemStyle-BorderWidth="2px"> 
      <Items> 

       <asp:MenuItem Text="Building" Value="0"></asp:MenuItem> 


       <asp:MenuItem Text="Allocation" Value="2" ></asp:MenuItem> 
       <asp:MenuItem Text="Rent" Value="3" ></asp:MenuItem> 

       <asp:MenuItem Text="Kahramaa" Value="4" ></asp:MenuItem> 

       <asp:MenuItem Text="Owner" Value="5" ></asp:MenuItem> 

       <asp:MenuItem Text="Type" Value="6" ></asp:MenuItem> 

      </Items> 

     </asp:Menu> 

javsacript代碼

<script src="Scripts/jquery-1.7.0.js" type="text/javascript"></script> 
<script type ="text/javascript"> 
     $(function() { 

      $("ul.level1 li").click(function() {    
       $(this).css("background-color:#ffffff;color:#000000;"); 
      }); 
}); 
</script> 

Method 2 result Screenshot