ASP.NET MenuItem個別のスタイル

Question

私は、ASP.NETメニューコントロールを使用して自分のサイトをナビゲートしたいと考えています。しかし、私は、それぞれのMenuItemを異なるスタイルにする必要があるという要件を持っています（異なる色、static、onHoverの両方）。 MenuItemから継承するカスタムクラスを作成しないと、これは可能ですか？

もっと良い解決策を考えていますか？

Answer 1

メニュー上の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; 
     } 
} 

Answer 2

あなたは、プログラムメニューを生成する場合は、あなたのスタイルを追加することができますし、onmouseover属性/れるonmouseoutそれぞれのMenuItemを作成するときに属性、例えば：また

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

、マークアップでそれらの属性を追加してみてください、IntelliSenseが教えてくれません（私はのMenuItemと特異的にそれをテストしていない）、あなたは彼らが働くことを、彼らは通常の操作を行います。

<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でいくつかの運を持っているかもしれません。

あなたが継承されたクラスと再作業のレンダリングルーチンを作成することができます。もちろん、

...

Answer 3

誰にも同じ質問にバンプ場合..

私にとっては、適切なエスケープを使用してMenuItem TextにHTMLコンテンツを強制的に挿入するのが速く汚れた方法でした。あなたは、あなたがあなたの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> 

Answer 4

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

コード：

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

CSSクラス：

.bold 
{ 
    font-weight: bold; 
}