Question

我有一个需要菜单系统的c＃/ asp.net网站。

我正在查看内在的asp：菜单，但它似乎没有考虑到这些要求......

图形和图形上的文字，表示每个菜单选项之间的分隔符。

它还必须使用不同的颜色来表示当前活动的菜单选项。

这只是一个单级菜单 - 基于母版页设计（菜单在母版页上），菜单选项在内容页面上。

有没有人有免费的工具可以做到这一点？

感谢

Answer 1

您可以使用RadMenu telerik control

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

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

3 个答案: