17

asp:Menuテーブルフリー レンダリング モードの ASP.NET 4.0 Webforms ページでコントロールを使用しています。

<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
    Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List" 
    IncludeStyleBlock="false">
</asp:Menu>

メニューには、5 つまたは 6 つのメニュー項目を含む水平方向のメイン行があり、ユーザーがそれらの上にカーソルを合わせると、それらのいくつかは垂直方向のポップアップ メニューを開きます。

多くの場合、ポストバックが発生し、ページが再びレンダリングされると、メニューが一瞬 (たとえば、0.5 秒) ちらつきます。これは、ポップアップ メニューの項目を含むすべてのメニュー項目が 1 つまたは複数の行で表示されることを意味します。通常の意図した状態に戻る前に、互いに。

すべてのメニュー項目が「展開」表示されているこの短い瞬間に、メニューはブラウザで Javascript が無効にされているかのように見えます。(ポップアップ メニューの構築は、asp:menu コントロールで Javascript を使用することによって実現されているようです。)

この動作は非常に見苦しく、特に大きなメニュー (2 行または 3 行にわたる短いレンダリング) では、通常の表示に戻る前にページ コンテンツ全体が下に移動されます。

この問題の解決策を知っていますか?

前もって感謝します！

(注記: ASP.NET 4.0 にアップグレードする前に、よく知られた CodePlex の CSS フレンドリーなメニュー コントロールを使用したことを言及する必要があります。CSS フレンドリーなコントロールはもう必要ないと思っていました。 4 には組み込みのリスト レンダリング モードが用意されています. 私が覚えている限りでは、CSS に適したコントロールではこのちらつきはありませんでした. このコントロールは Javascript を使用していないと思います. おそらくこれは悪いステップでした.可能であれば、CSS フレンドリーなメニュー コントロールに戻らずに解決策を探しています。)

編集：

このちらつきはブラウザーに依存しませんが、IE 8 と 7 で最も顕著です。

4

12 に答える 12

34

誰かがまだ解決策を必要としている場合; メニューのCSSで正しい表示スタイルを設定する必要があるため、ちらつきがあります。

たとえば、試してみてください

#menu ul li ul
{
    display: none;
}

と

#menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}

ちらつきは、ASP.NET 4 メニューが JavaScript を使用してインライン スタイルを設定するためです。

于 2010-08-09T17:11:36.207 に答える
9

また、ページで CSS ファイルと onload イベントの間で多くのことが行われているときに、この問題が発生しました。これにより、メニュー項目を装飾するために JavaScript がトリガーされると思われます。特に IE8 では、javascript がスタイリングを修正するためのこの遅延は醜いものでした。

ピーターと Clearcloud8 からのソリューションは、私にとってはほとんど役に立ちました。私はこれを使用します：

div.menu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 

div.menu ul li ul 
{ 
    display: none; 
}

主な違いは、サブメニューにも影響を与える「div.menu ul li」ではなく、アイテムの一番上の行のみを対象とする「div.menu > ul > li」を使用したことです。その結果、サブメニュー項目は同じ幅ではないため、ギザギザのリストにドロップダウンしました。

(Visual Studio 2010、.Net Framework 4 を使用しています)

于 2012-02-24T10:29:17.323 に答える
5

これらの行をSite.cssファイル（VS 2010プロジェクトのStylesフォルダー内）に追加します

/* Fix for extra space above menu in Chrome and Safari */
img[alt='Skip Navigation Links'] {
display: none;
}

別の方法は、SkipLinkText =” "を各メニュー項目に追加することです（これはテストしていません）

于 2012-08-10T21:55:13.873 に答える
3

推奨される解決策を試しました..

div.menu ul li ul { display:none }

div.menu ul li { position:relative; float:left; list-style:none }

.. ちらつきを解決するために機能しましたが、メニュー項目がギザギザになるという別の問題が発生しました。

メニューのデフォルトのレンダリング方向は垂直であり、ちらつきは水平メニューでのみ発生します。float:left と position:relative は、メニュー項目を左のセル位置に折りたたみ、すべての項目を 1 つの領域に重ねることで機能します。これにより、ページのジャンプが停止します。また、float:left は、メニュー項目のサイズをそれに含まれるテキストのサイズに縮小します (ギザギザのメニューの問題)。

これらの修正は、垂直メニューには必要ありません。

私のために働く解決策は

div.menu { height:24px }

div.menu li { right:0; position:absolute; top:0 }

これは同じ結果を達成し、メニューがレンダリングされる左側の単一のスペースにすべてのメニュー項目を配置しますが、float:left を使用しないことで、メニュー項目はデフォルトの幅 auto のままになります。メニューの高さは、メニュー領域に一定のスペースを提供し、水平静的メニューに使用する高さに基づいています。

この設定では、ぎざぎざのメニューは発生しません。

于 2015-10-18T08:40:16.523 に答える
1 
#menu ul li ul 
{ 
    display: none; 
} 

 and
#menu ul li  
{ 
    position: relative;  
    float: left; 
    list-style: none; 
}

これは私にとってもうまくいきました。フォームにreCaptchaを配置するまで、問題は発生していませんでした。私のメニューもマスターページ内で作成されていました。どうもありがとうございます！

于 2012-03-18T01:41:10.730 に答える
1

同じ問題が私にもありました。しかし、jquery呼び出しを削除することで解決しました。:)または、オンラインから参照する代わりに、.jsスクリプトファイルをダウンロードしてscriptフォルダー内に保持することもできます。

于 2011-09-16T11:39:43.823 に答える
1

ASP.NET 4.5.1 を使用してから同じ問題が発生し、上記の CSS スタイル タグを使用しようとしましたが、ちらつきを防ぐことができませんでした。ただし、古いサイトの HTML ソースと新しいサイトを比較すると、{display: none} タグが欠落していることが明らかになりました。web.configを次のように適応させることで、自分を助けました

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

これは以前と同じ HTML ソースを生成したので役に立ちましたが、確かに良い回避策ではありません。

于 2015-06-29T12:00:43.917 に答える
0

以下のスタイル シート コードをコピーして、site.master ページ内に貼り付けると、完全に実行され、メニュー スタイル コードも削除されます。

<style type="text/css">
    div.hideSkiplink
    {
        background-color: #3a4f63;
        width: 100%;
    }
    div.menu ul li ul
    {
        display: none;
    }
    div.menu ul
    {
        float: left;
        list-style: none;
    }
    div.menu li
    {
        list-style: none;
        float:inherit;
    }
    div.menu
    {
        padding: 2px 0px 2px 0px;
    }
    div.menu ul
    {
        margin: 0px;
        padding: 0px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #465c71;
        border: 1px #4e667d solid;
        color: #dde4ec;
        display: block;
        line-height: 1.35em;
        padding: 4px 20px;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
    }

    div.menu ul li a:hover
    {
        background-color: #bfcbd6;
        color: #465c71;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #465c71;
        color: #cfdbe6;
        text-decoration: none;
    }
</style>
于 2014-07-18T09:56:26.003 に答える
0

nuget を使用して jQuery を 2.1.1 に更新し、CDN の使用を開始するまで (YSLow が推奨)、これは明らかに機能していました (上記の提案)。しかし今、そのちらつきが戻ってきて、これまで以上に悪化しています。誰かがそれを確認して、より良い解決策があることを確認しますか? ありがとう。

私もこの解決策を見つけましたが、運はありません:(頭の中)

<style type="text/css">
                div.menu ul li ul { display:none; }
    </style>
于 2014-07-02T15:50:47.787 に答える
0

上記の解決策は近いものでしたが、うまくいきませんでした。説明されている問題を修正するには、以下のわずかな変更が必要でした。Visual Studio 2010 を使用して新しい ASP.NET Web フォーム アプリケーション プロジェクトを作成すると、デフォルトでメニュー用に生成される CSS は、「#menu」(要素「メニュー」のIDを持つ）。

#メニュー - 動作しません

.menu - 機能します

言い換えれば、これを CSS ファイルの一番下に配置します。

.menu ul li ul
{
    display: none;
}

.menu ul li 
{
    position: relative; 
    float: left;
    list-style: none;
}
于 2011-09-12T14:42:49.983 に答える