web-dev-qa-db-ja.com

CSSでasp.netメニューをスタイルする方法

私はasp.netメニューのスタイリングを行っており、StaticSelectedStyle-CssClassおよびStaticHoverStyle-CssClassパラメーターの意味を理解しようとしています。

私の理解では、これらのパラメーターで定義されたスタイルは、必要なときにいつでも関連する要素にCSSクラスとして適用されます。そこで、次のようにメニューを作成しました。

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource" 
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        StaticSelectedStyle-CssClass="StaticSelectedStyle"
        StaticHoverStyle-CssClass="StaticHoverStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

StaticMenuStyle-CssClassおよびStaticMenuStyle-CssClassで機能します（クラスは関連する要素に適用されます）が、StaticSelectedStyle-CssClassおよびStaticHoverStyle-CssClassは、要素の選択状態またはホバー状態に関係なく適用されません。

この作品を作るために私は何をすべきですか？

ありがとう。

編集：申し訳ありませんが、これは.NET 4であることを述べておかなければなりません。生成されたHTMLは次のとおりです。

<div id="NavigationMenu">
 <ul class="level1 StaticMenuStyle">
  <li><a class="level1 StaticMenuItemStyle selected" href="/Link.aspx">Link</a></li>
 </ul>
</div>

ご覧のとおり、StaticMenuStyleとStaticMenuItemStyleが適用されますが、StaticSelectedStyle-CssClassまたはStaticHoverStyle-CssClassは適用されません。理由はわかりません。 selectedを使用できることは知っていますが、StaticSelectedStyle-CssClassが適用されるという期待される動作ではありませんか？ selectedを使用することにより、.NETが舞台裏で何を行うかについて推測しますが、それは正しくありません。

asp.netcss
23
md1337

さて、明らかに、今日の時点で.NET 4メニューを試した人はそれほど多くありません。最終バージョンが数日前にリリースされたので、驚くことではありません。バグと思われるものについて報告するのは私が初めてのようです。時間を見つけたらこれをMSに報告しますが、バグ報告に注意を払わないというMSの実績を考えれば、急いでいません。

とにかく、この時点で最も最悪の解決策は、コントロールによって生成されたCSSスタイルをコピーして貼り付け（ヘッダーを確認）、独自のスタイルシートに貼り付け、そこから変更することです。これを行った後、CSSの自動生成を防ぐために、今後はコピーされたブロックを使用するため、メニューでIncludeStyleBlock = "False"を設定することを忘れないでください。概念的には、アプリケーションが自動生成されたコードに依存するべきではないため、これは正しくありませんが、それは私が考えることができる唯一のオプションです。

7
md1337

私はあなたの痛みを感じ、これを理解しようとして一晩中/朝を無駄にしました。総当たりで、私は解決策を見つけました。それを回避策と呼びます-しかしそれは簡単です。

CssClassプロパティを次のようにメニューコントロールの宣言に追加します。

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

StaticSelectedStyle-CssClass属性とStaticHoverStyle-CssClass属性を単純にリッピングします。これらは単にジャックを実行しないためです。

次に、「SomeMenuClass」を作成します。何を入れても構いません。次のようになります。

.SomeMenuClass
{
    color:Green;
}

次に、次の2つのCSSクラスを追加します。

「ホバー」スタイリングの場合：

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

「選択済み」スタイリングの場合：

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

そこに、それだけです。できました。これが、私が経験した不満をあなた方の一部に救うことを願っています。ところで：あなたは言った：

私は、バグと思われるものについて報告した最初の人のようです。

また、それは新しい.NET 4.0のバグだと思われたようです。私はこれを見つけました： http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html 2008年にAsp.Net 2.0に関して投稿されました。地球上でこれについて不平を言っているのは私たち3人だけですか？

回避策の見つけ方（HTML出力の調査）：

StaticHoverStyle-BackColor = "Red"を設定した場合のHTML出力は次のとおりです。

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

これは、StaticSelectedStyle-BackColor = "Blue"を設定した場合のHTML出力です。

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

したがって、このマークアップをオーバーライドする論理的な方法は、SomeMenuClass a.static.highlightedおよびSomeMenuClass a.static.selected

特記事項：

HTML出力では「＃NavigationMenu」を使用するため、これらのクラスのすべての設定で「！important」も使用する必要があります。つまり、Asp.Netがそこにスローすることを決定したすべてのスタイルは、IDが「NavigationMenu」のメニューコントロールの他のスタイルよりも優先されます。 。私が苦労したことの1つは、Asp.Netが「＃NavigationMenu」を使用して左右のパディングを15emに設定するまで、パディングでした。 「！important」をSomeMenuClassスタイルに追加し、機能しました。

35
MikeTeeVee

ASP.NET 2.0で動作するために使用されたStaticSelectedStyle-CssClass属性を覚えています。 .NET 4.0では、MenuコントロールのRenderingMode属性「Table」を変更すると（したがって、'05と同じようにメニューをsおよびsubsとしてレンダリングします）、少なくとも指定したStaticSelectedStyle-CssClassを適切なhtmlに書き込みます。素子。

それはあなたのページがあなたが望むように動作するのに十分かもしれません。ただし、ASP 4.0（RenderingModeをデフォルトに設定する場合）で選択されたメニュー項目の回避策は、コントロールの生成された「選択された」CSSクラスを模倣するが、「！important」 CSS宣言により、必要に応じて私のスタイルが優先されます。

たとえば、デフォルトでは、Menuコントロールは各メニュー項目の「li」要素と子「a」をレンダリングし、選択したメニュー項目の「a」要素にはclass = "selected"が含まれます（他のコントロール生成CSSクラス名の中で、「static」静的メニュー項目の場合）、したがって、「静的」および「選択」「a」タグ用に独自のセレクターをページに（または別のスタイルシートファイルに）追加します。

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
}
4
user1664143

「選択済み」のクラスがメニュー項目に追加されないという問題に遭遇しました。何らかの理由で、NavigateUrlを使用できないことがわかりました。

NavigateUrlを削除すると、「選択された」CSSクラスがaタグに適用され、背景スタイルを次の方法で適用できました。

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}
3
ryanjones

MikeTeeVeeのソリューションを試してみましたが、まだ機能しません。選択したタブは変更されず、別の色を維持します。この投稿は私の問題を解決しました： ASP.NETメニューの親とその子でCSSクラスを「選択」しますか？ コードビハインドにコードを配置する必要があります。

2
Charles

まだこの問題を抱えている人々を助けるために何かを投げ入れたいだけです。 （少なくとも私にとって）cssは、メニューの各部分にレベル1、レベル2、レベル3のデフォルトクラスを配置することを示しています（レベル1はメニュー、レベル2は最初のドロップダウン、レベル3は3番目のポップアウトです）。 CSSでパディングを設定する

.level2
{
padding: 2px 2px 2px 2px;
}

最初のドロップダウンで各liにパディングを追加するために機能します。

2
jeremy

見るべきことは、HTMLがコントロールによって吐き出されているものです。この場合、メニューを作成するためのテーブルを出力します。ホバースタイルはTDで設定され、メニュー項目を選択すると、コントロールはポストバックし、選択したスタイルをTD内のリンクのAタグに追加します。

したがって、ここで操作されている2つの異なるアイテムがあります。 1つはTD要素であり、もう1つはA要素です。したがって、CSSを適切に機能させる必要があります。メニューでページに以下のCSSを追加すると、いずれの場合も背景色が変化します。これらの要素に適用される場合と適用されない場合があります。

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>
1
Harv

ここにあるすべての答えがなぜ混乱するのか分かりません。もっと簡単なものを見つけました。 asp：menuにcssクラスを使用します。たとえば、mainMenuと、この下のすべてのメニュー項目は、HTMLにレンダリングされるときに「タグ」になります。したがって、CSSの「タグ」に：hoverプロパティを提供する必要があります。例については、以下を参照してください。

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

そして、CSSに次のように記述します。

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }

これがお役に立てば幸いです。 :)

1
Sonam

LevelSubMenuStylesでスタイリングを試すことができます

            <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="test" />
                <LevelSubMenuStyles>
                    <asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999" 
                        Font-Underline="False" />
                    <asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
                </LevelSubMenuStyles>
                <StaticMenuItemStyle CssClass="main-nav-item" />
            </asp:Menu>
0
Prasanna

この壊れたコントロールで得られた最良の結果は、CSSをまったく使用せず、スタイルの組み込みコントロールプロパティ（DynamicMenuItemStyle-BackColor、StaticHoverStyle-Widthなど）を使用することでした。これはひどい習慣であり、コードを肥大化させるだけでなく、コントロールのすべてのインスタンスに対してこれを強制することにもなります。

ただし、これは機能します。

0
ScottLenart