1

I have a c# / asp.net web site that needs a menu system.

I was looking at the intrinsic asp:menu, but it does not seem to account for these requirements....

Text that is over a graphic and a graphic to indicate a separator between each menu choices.

It also has to use a different color to denote the menu choice that is currently active.

This is a single level menu only - based on a master page design (menu is on master page), menu choices are on content pages.

Does anyone have a free tool that can accomplish this?

thanks

4

3 回答 3

0

您可以使用RadMenu telerik control

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

你也可以阅读这篇文章：

.NET 的最佳免费控件

于 2013-03-14T14:36:48.463 回答
0

这一切都可以通过 .NET 内置菜单来完成。

每个 ToolStripMenuItem 都有一个 BackgroundImage 属性（可以设置背景图形）。此类有一个 MouseHover 事件，您可以捕获该事件以编程方式更改颜色。

有一个ToolStripSeparator类可以让你添加分隔符。

有关 .NET 中菜单的更详细讨论，请参阅这篇文章。

于 2013-03-14T14:38:49.573 回答
0

这是一个老问题。如果有人再来这里。这是给他们的:)

我就是这样做的。希望它可以帮助某人...

方法 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";
            }
}

方法一结果截图

方法 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>

javsascript 代码

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

方法二结果截图

于 2015-11-04T15:17:24.013 回答