Come sbarazzarsi di brutto asp:Menu lampeggia?

Sto usando il asp:Menu controllo su un ASP.NET 4.0 Webforms pagina con tabella gratuito modalità di rendering:

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

Il menu principale orizzontale fila con 5 o 6 voci di menu e alcuni si aprono in verticale menu a comparsa quando l’utente si posiziona su di loro.

Spesso, quando ogni postback si verifica e la pagina viene reso nuovamente il menu “trema” per un attimo (diciamo la metà di un secondo), il che significa che: Tutti gli elementi del menu – tra gli elementi nel menu a comparsa – sono esposte in una o più righe, uno dopo l’altro, prima di tornare alla normale inteso stato.

In questo breve momento di “spiegati” visualizzazione di tutte le voci di menu il menu sembra COME SE Javascript era stato disattivato nel browser. (Sembra che la creazione del menu a tendina che si ottiene utilizzando un po ‘ di Javascript nella pagina asp:menu di controllo.)

Questo comportamento è abbastanza brutto, soprattutto con un grande menu (rendering per il breve momento più di 2 o 3 righe) tutto il contenuto della pagina viene spostata verso il basso prima che salti tornare alla visualizzazione normale.

Conoscete qualche soluzione per questo problema?

Ringrazio in anticipo!

(Nota: devo dire che ho usato il ben noto CSS-friendly menu di controllo da CodePlex prima ho aggiornato a ASP.NET 4.0. Ho supposto che non ho bisogno di CSS-friendly più a controllare perché l’asp:Menu in versione 4 offre una Lista di rendering in modalità ora. Per quanto mi ricordo, non ho avuto questo sfarfallio con il CSS-friendly di controllo e penso che questo controllo non viene fatto uso di Javascript. Forse questo è stato un brutto passo. Sto cercando ora di una soluzione, senza tornare al CSS-friendly menu di controllo, se possibile.)

Edit:

Questo sfarfallio è indipendenti dal browser, anche se più evidente in IE 8 e 7. In internet explorer 7 (o modalità di Compatibilità di IE 8) è straordinario brutto dal momento che le voci di menu visualizzate in una folle disegno diagonale anche più di 5 o 6 righe.

  • Non si menziona che si sta utilizzando una pagina master, tuttavia alcune risposte a questa domanda possono essere di aiuto (non so se l’hai visto già). stackoverflow.com/questions/888245/…
  • Grazie per il link! Questo ha aiutato un sacco! Non ho visto questa domanda. Sì, sto usando le pagine master e a prima vista si presenta come la soluzione per racchiudere il menu ContentPlaceHolder sta lavorando. Devo provarlo, infine, sul live server, dato che sul mio dev macchina non ottenere questo sfarfallio molto spesso. È più evidente su un server di produzione con normale “live latenza” su internet.
  • Purtroppo il test su un server con realistico latenza ha rivelato che la soluzione per racchiudere il menu ContentPlaceHolder non ha funzionato. Il flickering è ancora lì (testato in IE 8 (con e senza modalità di compatibilità) e Firefox).
InformationsquelleAutor Slauma | 2010-07-13

 

12 Replies
  1. 33

    Se qualcuno ha ancora bisogno di una soluzione; il flickering è lì perché si dovrebbe impostare la corretta visualizzazione stile nel css del menu.

    Provate, per esempio,

    #menu ul li ul
    {
        display: none;
    }

    e

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

    Il flickering è perché il ASP.NET 4 menu utilizza javascript per impostare alcuni stili inline.

    • SÌ! Ho ancora bisogno di una soluzione. Ma ora ho uno, grazie a te! Ho solo aggiunto il display:none in #menu ul li ul e il tremolio è scomparso. Appena testato rapidamente a un server con IE 7+8, Firefox, Chrome e Opera (tutti hanno mostrato questo menu sfarfallio) e funziona bene ora. Grazie di nuovo, questo è stato davvero un grande aiuto!
    • Questa la soluzione perfetta per questo problema. Semplice ma efficace!
    • Comunque il problema per me 🙁
  2. 9

    Inoltre ho questo problema ogni volta che ho avuto un sacco di cose in pagina tra i file CSS e l’evento onload che, presumibilmente, si innesca il javascript per decorare le voci di menu. In particolare in IE8 questo ritardo per javascript per fissare lo styling è stato brutto.

    Le soluzioni da pietro e Clearcloud8 erano quasi bene per me. Io uso questo:

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

    La principale differenza che ho usato “div.menu > ul > li” che si rivolge solo alla riga superiore di elementi, invece di “div.menu ul li” che afects il sub-menu – il risultato è che le voci di sottomenu non erano la stessa larghezza, in modo che sceso in un frastagliato elenco.

    (Sto usando Visual Studio 2010 .Net Framework 4)

    • Anche io ho avuto il problema di dove ho preso il frastagliato menu. Ugh, idk perché questo controllo è che mi dia così tanti problemi–built-in non meno!
  3. 5

    Aggiungere queste righe al Sito.css file (nella cartella di Stili di VS 2010 progetto)

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

    Un’alternativa è quella di aggiungere SkipLinkText=”” per ogni voce di menu (non ho testato questo)

    • Aggiungere il SkipLinkText=”” nel menu tag funzionato perfettamente per Chrome sbarazzarsi di extra spazio sopra il menu!
  4. 3

    Ho provato la soluzione consigliata è ..

    CSS:

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

    .. e ha lavorato per risolvere il flickering, ma hanno introdotto un altro problema che si frastagliate voci di menu.

    Di rendering predefinito orientamento del menu verticale e il tremolio si verifica solo per i menu orizzontali. Il float:left e la posizione relativa di lavoro facendo crollare le voci di menu nella cella a sinistra in posizione con tutti gli elementi sovrapposti in quella zona. Questo interrompe la pagina di saltare. Il float:left riduce anche la voce di menu grandezza del testo che contiene (frastagliato problema del menu).

    Queste correzioni non sono necessari per verticale menu.

    La soluzione che funziona per me è

    CSS:

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

    In questo modo si ottiene lo stesso risultato e luoghi tutte le voci di menu in un unico spazio sulla sinistra, dove il menu sarà adottata, ma non utilizzando il float:left lascia le voci di menu con i loro larghezza predefinita di auto. L’altezza del menu prevede una costante di spazio per l’area di menu e in base all’altezza che uso per l’statico orizzontale del menu.

    Questa impostazione non causa frastagliate menu.

  5. 2

    Ho aggiunto:

    CSS:

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

    al fondo del ccs file e quando ho pubblicato l’applicazione, l’effetto di sfarfallio è stato ridotto. Prima delle modifiche, le voci di menu che copriva quasi tutta la pagina e dopo la tua soluzione solo 5 o 6 righe!!!.

    Questa è la mia pagina master:

    HTML:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SantaMaria.SiteMaster" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
    
    <script type="text/javascript" src="../Scripts/j_commons.js"></script>
    
        <form runat="server">
        <div class="page">
            <div class="header">
                <div class="title">
                    <h1>
                        <asp:Literal ID="CompanyName" runat="server"></asp:Literal>
                    </h1>
                </div>
                <div class="loginDisplay">
                    <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                        <AnonymousTemplate>
                            [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <%=Xsite.Override.getOverride("SiteMaster", "Welcome") %>    
                            <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                            [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Account/Login.aspx?ReturnUrl="/> ]
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
                <div class="clear hideSkiplink">
                    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    </asp:Menu>
                </div>
            </div>
            <div class="main" style="height:800px">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
            </div>
            <div class="clear">
            </div>
        </div>
        <div class="footer">
            
        </div>
        </form>
    </body>
    </html>

    e questo è il ccs file definitios per asp:menu (senza le nuove linee che mi incolla al fondo del file ccs):

    CSS:

    div.hideSkiplink 
    {
        background-color: /*#3a4f63;*/ #666666;
        width: 100%;
    }
    
    div.menu
    {
        padding: 2px 0px 2px 4px;
    }
    
    div.menu ul
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
        z-index: 10; /*Se estaba mostrando el submenu, mezclado con la pantalla de abajo!*/
    }
    
    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;
    }
    
    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;
    }

    Le voci di menu vengono caricati da un file xml.

    E voglio ringraziarvi per tutte le vostre risposte su “Come sbarazzarsi di brutto asp:Menu lampeggia?” Continuerò a indagare per trovare una soluzione completa. GRAZIE ANCORA!!!

  6. 1

    Stesso problema è stato con me. Ma risolto rimuovendo jquery chiamate. 🙂
    oppure è possibile scaricare e mantenere il .js script file dentro la cartella script, invece di fare riferimento ad esso online.

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

    Questo ha funzionato per me. Non era un problema fino a quando ho messo un reCaptcha nel modulo. Il mio menu è stato prodotto all’interno di una Pagina Master anche. Grazie mille!

  8. 1

    Ho avuto lo stesso problema da quando è in uso ASP.NET 4.5.1 e anche se ho provato ad usare il CSS tag di stile, da sopra, non ero in grado di evitare il flickering.
    Tuttavia, confrontando il codice HTML da vecchi siti per la nuova era chiaro, che il {display: none} tag mancanti.
    Ho semplicemente aiutato me, adattando il web.config con

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

    Questo ha contribuito come prodotto stesso HTML fonte, come in precedenza, anche se sicuramente non è una bella soluzione.

  9. 0

    La soluzione di cui sopra è stato vicino, ma non ha funzionato per me. E ‘ richiesto il lieve modifica di seguito per risolvere il problema descritto. Quando creo un nuovo ASP.NET applicazione web form del progetto con Visual Studio 2010, il CSS generato per il menu di default fa uso di “.menu” (classi CSS) per applicare lo stile, piuttosto che “#menu” (un elemento con ID “menu”).

    #menu
    – non funziona

    .menu
    – non funziona

    Quindi, in altre parole, mettere questo nel vostro file CSS vicino al fondo:

    .menu ul li ul
    {
        display: none;
    }
    
    .menu ul li 
    {
        position: relative; 
        float: left;
        list-style: none;
    }
    • cancelletto ( # ) è utilizzato per selezionare da identità . (dot) è utilizzato per selezionare la classe. Così entrambi possono essere utilizzati a seconda del contesto
  10. 0

    Questo a quanto pare ha funzionato (i suggerimenti di cui sopra) fino a quando ho appena aggiornato il mio jQuery per 2.1.1 utilizzo di nuget e iniziato ad usare il CDN (suggerito da YSLow). Ma ora che lo sfarfallio è tornato, peggio che mai. Chiunque verificare se c’è una soluzione migliore? Thanx.

    Ho trovato anche questa soluzione, ma senza fortuna:
    (nella testa)

    <style type="text/css">
                    div.menu ul li ul { display:none; }
        </style>
  11. 0

    Copia di sotto del foglio di stile il codice e incollarlo all’interno del sito.pagina master e di esecuzione perfetta e rimuovere anche il vostro menu di codice di stile..

    <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>
  12. 0

    Ho provato le idee di cui sopra (con variazioni) e alcuni fissa il dispari di rendering (il tremolio come era), ma sono tutti causati regressioni (esempio sottomenu che renderebbe troppo lontano e volare via quando ci si sposta su di loro).

    Ispirato da un’idea su un altro thread, ho provato qualcosa di diverso: nascondere il menu inizialmente e scoprire una volta che la pagina è stata caricata.

    Passo per passo: ho un invisibile classe invButton ho già avuto e utilizzare per nascondere i pulsanti, etc.

    <style type="text/css">
    .invButton {
        height: 0;
        width: 0;
        visibility: hidden;
        display: none;
        border-style: none;
        border-width: 0;
    }
    </style>

    Successivo ho impostato CssClass dell’offensiva sfarfallio menu per CssClass=”invButton”, inizia così invisibile.

    <asp:Menu runat="server" ID="Menu1" ... CssClass="invButton" ... RenderingMode="List" />

    Infine, una volta che la pagina hits ‘$(document).pronti a’ rimuovere la classe.

    <script type="text/javascript">
    $(document).ready(function () {
      $('#ctl00_Menu1').removeClass('invButton');
    });
    </script>

    Voilà, il menu rende bene nel formato corretto e non strano sfarfallio a caricare.

Lascia un commento