带文本，图形和分隔符的菜单

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