12

サイト内のナビゲーションにASP.NETメニューコントロールを使用したいと思っています。ただし、各MenuItemのスタイルを変える必要があるという要件があります（静的とonHoverの両方で異なる色）。MenuItemから継承するカスタムクラスを作成せずに、これは可能ですか？

より良い解決策についての考え？

4

4 に答える 4

14

他の誰かが同じ質問に出くわしたら...

私にとってうまくいった手っ取り早い方法は、Text(適切なエスケープを使用して) HTML コンテンツを強制的に MenuItem に入れることです。次に、CSS で好きなようにスタイルを設定したり、各メニュー項目に異なるスタイルを使用するように設定したりすることもできます。

<asp:MenuItem Text="<span class=&quot;menuitem_text&quot;>Text Here</span>" />

HTML は<a>タグ内で終了します。

<li><a  ...><span class="menuitem_text">Text Here</span></a></li>
于 2013-01-30T20:57:37.417 に答える
12

Menu で RenderContents をオーバーライドする以外に、オプションは非常に限られています。必要なもののほとんどはプライベートで封印されており、どこにも行きません。

私の解決策は、テンプレートを使用することです。MenuItem.Value または Depth と ItemIndex を使用して、各項目を識別し、必要な属性を提供できます。

ページ内:

<asp:Menu ID="menu" runat="server" DynamicHorizontalOffset="2" StaticSubMenuIndent="10px">
    <Items>
        <asp:MenuItem Text="Item 1" Value="value 1">
            <asp:MenuItem Text="Item 2" Value="value 2">
                <asp:MenuItem Text="Item 3" Value="value 3"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 4" Value="value 4">
                <asp:MenuItem Text="Item 5" Value="value 5"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 6" Value="value 6"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Item 7" Value="value 7"></asp:MenuItem>
        <asp:MenuItem Text="Item 8" Value="value 8"></asp:MenuItem>
    </Items>
    <StaticItemTemplate>
        <asp:Panel runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </StaticItemTemplate>
    <DynamicItemTemplate>
        <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </DynamicItemTemplate>
</asp:Menu>

コード (このコードのばかげたことは気にしないでください。原則を示すためだけです):

public Color GetItemColor(MenuItemTemplateContainer container)
{
    MenuItem item = (MenuItem)container.DataItem;

    //identify based value
    if (item.Value == "value 2")
        return Color.Brown;

    //identify based on depth and index
    if (item.Depth == 0)
        switch (container.ItemIndex)
        {
            case 0: return Color.Red;
            case 1: return Color.Blue;
            case 2: return Color.DarkGreen;
            default:
                return Color.Black;
        }
    else
        switch (container.ItemIndex)
        {
            case 0: return Color.Purple;
            case 1: return Color.Aqua;
            case 2: return Color.DarkOrange;
            default:
                return Color.Black;
        }
}
于 2009-04-01T14:46:59.390 に答える
1

各メニュー項目のスタイルを設定するには、次のようにしてください。

コードビハインド: 

 mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>";

CSS クラス: 

.bold
{
   font-weight: bold;
}
于 2014-08-30T06:06:15.957 に答える
-4

メニューをプログラムで生成する場合は、各 MenuItem を作成するときにスタイルと onmouseover/onmouseout 属性を追加できます。次に例を示します。

menuItem.Attributes["style"] = "color: red;";
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);";

または、これらの属性をマークアップに追加してみてください。IntelliSense はそれらが機能することを通知しませんが、通常は機能します (MenuItems で特にテストしていません)。

<asp:menuitem navigateurl="Home.aspx" 
    text="Home"
    imageurl="Images\Home.gif"
    popoutimageurl="Images\Popout.jpg"   
    tooltip="Home"
    style="color: red;" onmouseover="Highlight(this);" onmouseout="Unhighlight(this);"/>

CSS Friendly Adaptersで運が良いかもしれません。

もちろん、継承されたクラスを作成して、レンダリング ルーチンを作り直すこともできます...

于 2009-04-01T13:40:20.207 に答える