0

ASP.NET メニューを含むページがあります。ユーザーがアプリケーションをナビゲートしてメニューの 10/15 リンクをクリックすると、そのレンダリング動作が変わります。

ランダム クリック ナビゲーションの後、そのようにレンダリングを開始します。リンクは少しあり、スタイルはありません。

ここに画像の説明を入力

次に、0.5 秒後にスタイルが適用され、メニューが適切に表示されます。

ここに画像の説明を入力

これは良くない！

メニュー マークアップの定義は次のようになります。

                <asp:Menu ID="FrontEndMenu" CssClass="FrontEndMenuStyle"
                        StaticEnableDefaultPopOutImage="False" Font-Size="14px" 
                        Orientation="Horizontal" runat="server" StaticDisplayLevels="1" >
                    <StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="10px"/>
                    <DynamicHoverStyle BackColor="LightGreen"/>
                    <DynamicMenuItemStyle BorderColor="white" BorderStyle="Solid" BorderWidth="1px" CssClass="DynamicMenu" />
                    <Items>
                        <asp:MenuItem Text="Armonizzazione">
                                <asp:MenuItem  NavigateUrl="CalibrazioneRating.aspx?figura=BHR" Text="Rating"></asp:MenuItem>
                                <asp:MenuItem  NavigateUrl="CalibrazioneRating.aspx?figura=AC1" Text="Conferma Rating"></asp:MenuItem>
                        </asp:MenuItem>                        
                        <asp:MenuItem Text="Calibrazione">
                                <asp:MenuItem NavigateUrl="CalibrazioneRanking.aspx?figura=BHRL" Text="Ranking"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="CalibrazioneRanking.aspx?figura=AC2"  Text="Conferma Ranking"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem  NavigateUrl="Approvatore.aspx" Text="Approvazione"></asp:MenuItem>
                        <asp:MenuItem  NavigateUrl="ElencoSchede.aspx?tipo=personali" Text="Schede personali"></asp:MenuItem>
                        <asp:MenuItem  NavigateUrl="ElencoSchede.aspx?tipo=dacompilare" Text="Schede da Completare"></asp:MenuItem>
                        <asp:MenuItem  NavigateUrl="ElencoSchede.aspx?tipo=definitive" Text="Schede definitive"></asp:MenuItem>
                        <asp:MenuItem  NavigateUrl="Ranking.aspx" Text="Distribuzione Delle Valutazioni"></asp:MenuItem>
                    </Items>
                </asp:Menu>

相対CSSは次のとおりです。

.DynamicMenu
{
    color: white;
    display: block;
    font-family: Tahoma, Arial, Verdana, Helvetica;
    font-size: 14px;
    font-weight: bold;
    width: 150px;
    padding: 5px;
    border-width: 1px !important;
    border-color: white !important;
    border-style: solid !important;
    background-color: #76c773;
    text-align: left !important;
}

.DynamicMenuHover
{
    text-decoration: underline;
}

.FrontEndMenuStyle ul li ul
{
     display: none;
}

.FrontEndMenuStyle > ul > li
{
    position: relative;
    float: left;
    list-style: none;
}

手伝ってくれませんか？

4

1 に答える 1

1

CSS が読み込まれて適用される前に、HTML がレンダリングされます。

これは、ラッパー要素のデフォルトの CSS 可視性を hidden like に設定することで回避できますdisplay:none;。次に、DOM ロード イベントに接続し、ラッパー要素の表示を に設定する JavaScript を使用できますblock。

于 2012-09-20T13:32:59.260 に答える