Ottieni il menu orizzontale per l'intera larghezza. Menu orizzontale fai-da-te in CSS e Html Menu a larghezza intera

Golovna / Korisne PZ

Buon pomeriggio!

Spesso è necessario creare un menu orizzontale, come se si estendesse indipendentemente sull'intera larghezza del blocco Batkiv, a seconda del numero di punti in quello nuovo.

Oggi voglio mostrarti come creare un menu del genere da solo.

Otzhe, arriverà il nostro menù:

È allungato per tutta la larghezza, quando è sospeso è visibile. Dai lati del menu è arrotondato.

HTML

...
Golovna
Notizie Tsіkavі
Un'altra voce di menu!

Per espandere il menu a tutta larghezza, ho creato tabelle con larghezza del 100%. Al tavolo della pelle div contenitore delle voci di menu. Voce di menu a riposo, prima, ultima o intermedia. div-Ti verrà assegnata una classe superiore.

Nella pelle div contenitori є 2 bіchnі bordi con posizionamento assoluto, secondo necessità per una corretta fermentazione. Se desideri modificare i bordi standard, quando cambi voce di menu, il testo salterà di 1-2 pixel, il che non va bene.

classe attivo Vіdpovіdaє per la voce di menu vibraniya che vydіlyає yogo.

Al punto della pelle, abbiamo un'immagine e un testo. In modo che tutto fosse girato nel mezzo lungo il tavolo verticale. I leader dell'autorità della visualizzazione verticale delle nostre voci di menu saranno sempre ugualmente corretti e non andranno.

REGOLE CSS

Mettiamo in ordine gli stili per il menu principale:

Menu_container (padding-top: 40px; larghezza: 100%; altezza: 47px; spaziatura bordo: 0px; ) .menu_container td ( allineamento verticale: medio; /* allineamento verticale */ ) .last_point_menu, u width: 100%; altezza: 47px; bordo: 1px solido #dadbda; indice z: 1000 posizione: relativa; confine-sinistra: nessuno; ). ( padding: 0px; vertical-align: middle; border: nessuno; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: grassetto; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertical-align: middle; border: nessuno; text-align: left; ) .inner_table_title ( pad1 padding-right: 10px ; text-transform: maiuscolo; line-height: 13px; ) .inner_table_menu td.inner_table_img (width: 30px!important; height: 30px!important; padding-left: 15px; )

Per colorare, angoli arrotondati dai lati del menu:

First_point_menu( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; bordo-alto-raggio-sinistra: 5px; bordo-basso-raggio-sinistra: 5px; bordo-destra: 1px solido #dadbda; -basso-raggio-destra: 5px;-moz-raggio-bordo-alto-destra: 5px;- moz-border-radius-bottomright: 5px; ;)

Ora il nostro menu è diventato più sgargiante:

Finché il primo elemento non ha un bordo sinistro. Yogo mi vipravimo trohi zgodom.

E ora dodamo per il menu dell'effetto al passaggio del mouse.

Menu_punto_medio:hover, .menu_ultimo_punto:hover, .menu_primo_punto:hover, .menu_punto_medio.active, .menu_ultimo_punto.active, .menu_primo_punto.active, .menu_punto_medio_menu.attivo ( background-col: gradient(top, #CAE285, #9FCB56); sfondo -image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); background-image: -webkit-linear -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); background-image: linear-gradient(to bottom, #CAE285, #9FCB56); bordo: 1px solido #9FCB56; border-color: # aec671 #9fbb62 #87ac4a; bordo sinistro: nessuno; z-index: 5000; .first_point_menu:hover, .first_point_menu.active ( bordo: 1px solido #9FCB56; colore bordo: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( bordo: 1px solido #dadbda; ( bordo: 1px solido #9FCB56; bordo-sinistra: nessuno; colore bordo: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( bordo-sinistra: nessuno; )

Ora il nostro menu sembra più ricco, ma per ora non abbiamo bordi vicino alle voci di menu. Facciamolo bene!

/* stili per bordi bianchi */ .borderLeftSecond, .borderRightSecond ( display: nessuno; posizione: assoluta; larghezza: 1px; altezza: 47px; colore di sfondo: #9fbb62; top: 0px; z-index: 1000; ) suono assoluto per i bordi */ .borderLeftSecond ( left: 0px; ) .borderRightSecond ( right: -1px; ) /* bordi attivi e al passaggio del mouse */ .active .borderLeftSecond, .active .borderRightSecond , .middle_point_menu:hover > .borderRightSecond, . last_point_menu: hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* passa al passaggio del mouse del primo e dell'ultimo punto * ) .last_point_menu.active .borderRightSecond ( display: nessuno; ) .last_point_menu:hover .borderLeftSecond ( display: block ; )

Da tutti!

Abbiamo un menu meraviglioso, allungalo per l'intera larghezza del blocco Batkiv! I punti uno contro uno quando si passa il mouse non colpiscono e il layout non salta.

Per espandere lo schema di layout del menu per il sito, se il contenitore da esso occupa l'intera larghezza, è disponibile sul lato. Con questo, il primo punto si trova sul bordo sinistro e il restante a destra e si trova tra gli elementi del bordo. Oggi ti diremo come combattere.

Ti offriamo un esempio dell'implementazione del menu della gomma quando Aiuta CSS per la tua risorsa Per questo menu, le voci sono posizionate in una riga. Javascript non è disponibile. Nel menu ci saranno spazi per una grande lista. La figura principale di un tale menu è la versatilità, poiché si manifesta nel fatto che è un numero, quindi potrebbe essere la puntura di dozhina.

Come implementare?

Il programmatore skin può suggerire il proprio modo di eseguire l'attività impostata. Per mettere tutto alla luce della tua immaginazione, uguale a professionalità e zdibnosti. La versione più ampia del problema è la tabella delle varianti. È anche ricco per qualcuno che ha esortato ad accelerare JavaScript. Tranquillo, che ha esortato ad accelerare la potenza per visualizzare i valori tavolo o cella della tabella- Mi affretto a mettere in imbarazzo. Questo metodo non può essere sufficientemente compatibile con più browser.

La nostra soluzione

La nostra proposta sarà basata su una profonda conoscenza di HTML5 e CSS3.

L'essenza del processo è il potere dell'allineamento del testo per giustificare i valori. Per coloro che dimenticano, indovinerò: l'autorità orienta il testo per l'intera larghezza del contenitore.

Con la scelta della nostra decisione, possiamo aggiungere due regole obov'yazykovyh. La prima cosa è che la larghezza del contenitore per la voce di menu può essere più piccola, testo più basso. Tobto non in una riga. Un'altra regola importante è che le parole vengano estratte allo stesso modo, indipendentemente l'una dall'altra, fino a un punto puzzolente da mentire.

Di seguito la rappresentazione del codice, che sta alla base della creazione del menu "ronzio":

HTML

< ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Blog < li>< a href= "#" >Novini < li>< a href= "#" >più popolare < li>< a href= "#" >Nuovo

ul (text-align: giustifica; overflow: nascosto; /* imposta l'iniezione laterale sul metodo */ altezza: 20px; /* tezh usuvaє zayve */ cursore: predefinito; /* imposta la forma della pannocchia sul cursore */ margine: 50px 100px 0 100px; sfondo: #eee; imbottitura: 5px ) li (visualizzazione: in linea; /* ruba le voci di menu con il testo */) li a (visualizzazione: inline-block; /* imposta l'espansione della riga del menu */ colore: #444; ) a: passa il mouse ( colore: #ff0000; ) ul: dopo ( /* modellare un'altra riga per il metodo di elaborazione */ contenuto: "1"; margine sinistro: 100% altezza: 1px; overflow: nascosto; display: blocco in linea )

Per funzionare nel buon vecchio Internet Explorer, devi aggiungere il seguente codice al CSS

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-left: 100%; ) * html ul ( /* serve solo ie6 */ height: 30px; )

Registrati i valori necessari dell'autorità e del codice, togliamo l'asse dello stesso menù gengivale:

Difetti del metodo

  1. Codice volume
  2. L'impossibilità di assegnare lo stato attivo dell'elemento tramite il selettore di classe. Tse vіdbuvaєtsya attraverso rozryv sіv ai paragrafi (yakscho è uno). La soluzione al problema sarebbe aggiungere un altro contenitore agli elementi dell'elenco.
  3. Per il menu che vedi, devi eseguire il push del codice attraverso l'overflow di afflusso negativo .

Quali browser funzionano?

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

Vitania. Non scrivo un post su html/css da molto tempo. Recentemente, dopo aver avviato un nuovo layout e, nel frattempo, averlo utilizzato su una cicala, permette di creare un menu di gomme (in quello nuovo si possono aggiungere nuovi elementi ed espandere non per aumentare, ma per continuare ad essere 100% del blocco Batkiv). Implementato oggi anche sul menu css gum.

Chi se ne frega di leggere l'articolo, puoi ammirare il video. L'autore spiega anche tutto molto bene:

Menu Gum su CSS - krok 1

Il primo passo è avviare il markup HTML, dove sarebbe senza di esso. Ale, nel nostro vipadka tutto sarà semplice:

  1. blocco ritaglio per menu
  2. il menu stesso, visualizzato tramite un elenco di markup (tag ul)
  3. bene, le voci di menu sono nel mezzo e in esse, ovviamente, c'è già un messaggio

Tutto era chiaro, l'asse è il seguente codice per me:



Visto che tutto è standard, l'asse è così:

Ora portiamo tutto nella vista richiesta, CSS viene preso per il robot.

Krok 2 - stili di base

Successivamente, aggiungerò stili al blocco obgortsa. E per me stesso, imposterò la larghezza massima su 600 pixel (solo per catturare manualmente uno screenshot, in modo che il menu si adatti), e inoltre caccerò il blocco.

avvolgere(
sfondo: #fff;
larghezza massima: 600 px
margine: 0 automatico;
}

Krok 3 - umanesimo realistico

Ora passiamo al menu stesso. Da quello nuovo (dal tag ul), rimuoverò i marcatori, aumenterò il gradiente lineare dello sfondo e, soprattutto, imposterò il display: table-row power al contenitore affinché il menu si comporti come una riga di tabella. È importante aumentare per manipolazioni a distanza.

R-menu(
sfondo: gradiente lineare(a destra, #b0d4e3 0%, #88bacf 100%);
display: riga di tabella;
stile elenco: nessuno;
}

Yak bachite, il codice guida è stato incrociato con i baffi, di cui ho scritto. A proposito, genera manualmente i gradienti utilizzando lo strumento Ultimate CSS Gradient Generator. Scriverò di più sul nuovo.

R-menu li(
allineamento verticale: inferiore;
display:tabella-cella;
larghezza: automatica;
allineamento testo: centro;
altezza: 50px;
bordo destro: 1px solido #222;
}

  • vertical-align: bottom - questo potere è necessario per farlo risaltare, in modo che il testo della voce di menu occupi 2 righe e appaia uniforme. Se espandiamo il menu, puoi vedere la potenza, aumentare la scala, in modo che i punti vengano schiacciati e il testo venga trasferito su due righe e risolviamo il problema della visualizzazione. Riaccendi la corrente e tutto andrà bene.
  • display: table-cell – abbiamo impostato il menu stesso per essere visualizzato come riga di tabella, sarebbe logico impostare uno degli elementi da visualizzare come riga di tabella. Tse obov'yazkovo.
  • larghezza: auto - la larghezza viene calcolata automaticamente, a seconda della lunghezza del testo nel paragrafo
  • text-align: center serve solo per centrare il testo nel mezzo
  • height: 50px - imposta l'altezza su 50 pixel
  • beh, border-right è solo un bordo destrorso, un tale divisore per punti

Mentre il menu sembra poco appariscente, ma niente, è giunta l'ora di portare Yogo al mastice.

Rimani, ciò che è necessario per te, - imposta gli stili per i paragrafi centrali. Qui ho questo codice:

R-menu li a (
decorazione del testo: nessuna;
larghezza: 1000px
altezza: 50px;
vertical-align: medio;
display:tabella-cella;
colore: #fff;
carattere: normale 14px Verdana;
}

Asse І ora il menu appare così:

Bene, te lo dico, ti spiego le righe:

  • power text-decoration skasovuє podkrelennya posilan, yak messo dietro umovchannyam
  • larghezza: 1000px - forse la riga più importante. È necessario impostare all'incirca la stessa larghezza, forse inferiore, ma anche superiore alla voce di menu ampia massima. Se non si desidera impostare la larghezza su 1000 pixel, impostare la larghezza della voce di menu li, per la quale la larghezza è impostata su auto, quindi consentirla in modo che per qualsiasi numero di voci nel menu sia impostata su 100 pixel di larghezza.
  • vertical-align: middle e display: table-cell - prima rende il testo verticalmente al centro e nell'altro mostra anche il testo al centro. Servono offese al potere.
  • font: è solo un insieme di impostazioni per il font. Leggi su potenza css per i caratteri in questi articoli.

Krok 4 (dietro le torri) può essere aggiunta all'interattività

Ad esempio, per cambiare il colore di una voce di menu al passaggio del mouse. Realizuєtsya tse più semplicemente, per l'aiuto della pseudo-classe.

R-menu li: passa il mouse (
colore di sfondo: #6bba70;
}

Testare il menu per la gommosità

In effetti, il menu è pronto, ma non abbiamo verificato eccessivamente la cosa più stupida: canticchieremo, come ti ho detto. Bene, aggiungerò altre 2 voci al menu:

Il menu ha perso il bordo di 600 pixel. Il resto dei punti si è appena schiacciato insieme, in modo che ne siano stati posizionati 2 nuovi.

Aggiungo 1 punto in più:

Proprio così, il menu è leggermente cambiato e l'altra voce sembra essere del tutto normale. E lo yakby non aveva il potere dell'allineamento verticale: in basso, riguardo allo yak, te l'avevo detto, il menu sarebbe stato migliore.

Cambierò il menu in tre punti.

Gli articoli sono diventati più ricchi, ma il menu stesso non è cambiato in larghezza. Axis mi e zrobili menu di gomma al 100%!

Come adattare lo yoga?

In linea di principio, poiché si imposta il blocco wrapper non su una larghezza fissa, ma su una larghezza massima, non è necessario adattarlo. La mia preferenza è impostare la potenza su larghezza massima: 600px e se la larghezza è inferiore a 600 pixel, il blocco si ridimensionerà semplicemente dietro lo schermo, senza regolare lo scorrimento orizzontale.

Bene, se vuoi cambiare qualcosa o cambiare il menu in annessi mobili ma su schermi larghi, allora i media ti aiuteranno! Buona fortuna con il sito web!

Menù Orizzontaleє elenco delle divisioni per il sito, è più logico posizionarlo al centro dell'elemento

    , e poi zasosuvat CSS-styles in yogo Elements. Tale espansione del menu è la più ampliata grazie agli ovvi progressi nella sua posizione sul sito web.

    Come creare un menu orizzontale: layout e design

    Layout HTML e stili di base per il menu orizzontale

    Per il blocco, vengono inseriti tutti gli elementi dell'elenco verticalmente, che copre l'intera larghezza dell'elemento contenitore, che copre l'intera larghezza del blocco contenitore.

    Markup HTML per la navigazione orizzontale

    Un menu orizzontale che appare al centro del tag può essere posizionato anche al centro dell'elemento

    o
    ...
    . La ragione di questo riconoscimento html dovrebbe essere una sensazione semantica, e appare anche possibilità aggiuntiva per formattare il blocco di menu.

    Іsnuє kіlka modi per diffondere їх orizzontalmente. Per la pannocchia, è necessario rilasciare gli stili del browser per le promozioni per gli elementi di navigazione:

    Ul ( list-style: nessuno; /*rimuove i marcatori dell'elenco*/ margin: 0; /*rimuove il margine superiore e inferiore, uguale a 1em*/ padding-left: 0; /*rimuove il margine sinistro, uguale a 40px*/ ) a ( decorazione del testo: nessuna; /*rimuovere la decorazione del testo */)

    Metodo 1. li (visualizzazione: in linea;)

    Robimo elementi lista mali. Di conseguenza, la puzza si espande orizzontalmente, alla curva a destra tra di loro viene assegnato uno spazio di 0,4 em (viene calcolato in base alla dimensione del carattere). Per usare lo yoga, aggiungi per li il campo negativo a destra li (margin-right: -4px;) . Abbiamo fatto una richiesta stilistica per le torri vlasnym.

    Metodo 2. li (flottante: sinistra;)

    Elenco elementi Robimo fluttuante. Di conseguenza, la puzza si diffonde orizzontalmente. L'altezza del contenitore di blocchi ul è impostata su zero. Per risolvere questo problema, aggiungi for ul (overflow: hidden;) , espandendolo e permettendogli di prendere elementi fluttuanti. Per il messaggio, aggiungi un (display: block;) e modellalo per il tuo bajan.

    Opzione 3. li (visualizzazione: inline-block;)

    Gli elementi Robimo elencano il blocco di righe. Il fetore vaga orizzontalmente, dal lato destro c'è un varco, come la prima goccia. Per il messaggio, aggiungi un (display: block;) e modellalo per il tuo bajan.

    Metodo 4. ul (visualizzazione: flex;)

    Robimo list ul con un contenitore flessibile per un modello aggiuntivo. Di conseguenza, gli elementi dell'elenco vengono impilati orizzontalmente. Dodaёmo per inviare un (display: block;) e modellarlo per il tuo bajan.

    1. Menu reattivo con l'effetto di aumentare quando si passa il mouse sopra il messaggio

    • opera
    • Di
    • Blog
    • contatto
    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( stile elenco: nessuno; margine: 40px 0 5px; riempimento: 25px 0 5px; allineamento testo: centro; sfondo: bianco; ) .menu-main li (visualizzazione: blocco in linea;) .menu- main li:after (contenuto: "|"; colore: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (contenuto: nessuno;) .menu-main a (decorazione del testo: nessuna; famiglia di caratteri: "Ubuntu Condensed", sans-serif; spaziatura delle lettere: 2px; posizione: relativa; riempimento inferiore: 20px; margine: 0 34px 0 30px; dimensione del carattere: 17px; text-transform: maiuscolo; display: inline-block; transizione: color .2s; ) .menu-main a, .menu-main a:visited (color: #9d999d;) main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( contenuto: ""; posizione: assoluta; altezza: 4px; in alto: auto; : -5px; sinistra: 50%; sfondo: #feb386; transizione: . 8s;) .menu-main a:hover:prima; hover:after, .menu-main .current:after (destra: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block; ) .menu-main li:after (contenuto: nessuno;) .menu- main a (padding: 25px 0 20px; margin: 0 30px; )

    2. Menu reattivo per un sito divertente

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( posizione: relativa; sfondo: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:prima, .top-menu:dopo ( contenuto: ""; display: blocco; altezza : 1px; bordo superiore: 3px solido #575350; bordo inferiore: 1px solido #575350; margine inferiore: 2px; ) #575350;box-shadow: 0 2px 7px #ccc; margine superiore: 2px; ) .menu-main ( stile elenco: nessuno; riempimento: 0 30px; centro; posizione: relativo; ) .menu-main:prima; ) ; . . ( decorazione del testo: nessuna; display: blocco in linea; margine: 2px 5px; riempimento: 6px 15px; famiglia di caratteri: "PT Sans", sans-serif; dimensione del carattere: 16px; colore: #777777; bordo inferiore : 1px solido trasparente; n: .3s lineare; ) .menu-main .current, .menu-main a:hover ( raggio-bordo: 3px; sfondo: #f3ece1; colore: #313131; text-shadow: 0 1px 0 #fff;@media (larghezza massima: 500px) ( .menu-main li (display: block;) )

    3. Menu reattivo con capesante

    • opera
    • Di
    • Blog
    • contatto
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( stile elenco: nessuno; riempimento: 0 30px; margine: 0; dimensione carattere: 18px; allineamento testo: centro; posizione: relativo; sfondo: bianco; ) .menu-main:after ( contenuto: ""; posizione: assoluta; larghezza: 100%; altezza: 20px; sinistra: 0; in basso: -20px; 255,255,255,0) 100%) 0 -10px; dimensione dello sfondo: 20px 20px; ripetizione in background: ripetizione-x; ). nessuno; display: blocco in linea margine: 0 15px; imbottitura: 10px 30px; famiglia di caratteri: "PT Sans Caption", sans-serif; -main a:before, .menu-main a:after ( contenuto: ""; posizione: assoluta; in alto: calc(50% - 3px); larghezza: 6px; altezza: 6px; #F58262; opacità: 0; transizione: .5s facilità di entrata e uscita; ) . corrente:prima, .menu-main a.corrente: dopo, . ) @media(max-width:680px) ( .menu-main li (display: block;))

    4. Menu reattivo sulla pagina

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( margin: 0 60px; posizione: relativo; sfondo: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,2) 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:before, .e z-index: 2; a sinistra: 0; larghezza: 100% altezza: 3px; ). margin: 0; text-align: center; ) .menu-main:before, .menu-main:after ( contenuto: ""; posizione: assoluta; larghezza: 50px; altezza: 0; top: 8px; 5A394E; trasforma: rotate(360deg); z-index: -1; ) .menu-main:before ( left: -30px; main:after ( right: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0 ); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( decorazione del testo: none; display: inline-block; Sans Caption", sans-serif; colore : bianco; transizione: .3s lineare; ) .menu-main a.current, .menu-main a:hover @media (larghezza massima: 680px) ( .top-menu (margine: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (contenuto: nessuno;) .menu-main a (display: block;) )

    5. Menu reattivo con un logo al centro

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( posizione: relativa; sfondo: rgba(34,34,34,.2); ) .menu-main ( stile elenco: nessuno; margine: 0; riempimento: 0; ) .menu-main:after ( contenuto: ""; display: tabella; chiaro: entrambi; ) .left-item (float: sinistra;) .right-item (float: destra;) .navbar-logo ( posizione: assoluta; sinistra: 50%; in alto : 50%; transform: translate(-50%,-50%); ) .menu-main a ( decorazione del testo: none; displayj: block; ; interlinea: 2px; famiglia di caratteri: "Arimo", sans -serif; font-weight: white; 0,0,.3);) @media (max-width: 830px) (.menu-main (padding-top: 90px; text-align: center;)). ; in alto: 10px; trasforma: traduciX(-50%); ) .menu-main li (float: nessuno; display: inline-block; ) -size: 16px; ) ) @media (larghezza massima: 630px) ( .menu-main li (display: block;)) )

    6. Menu reattivo con logo Zliva

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( contenuto: "" .display: table; clear: entrambi; ) .navbar-logo (display: inline-block;) . li (visualizzazione: inline-block;) .menu-main a ( decorazione del testo: none; display: block; : 2px; famiglia di caratteri: "Arimo", sans-serif; peso del carattere: grassetto; colore: #F73E24 ;transizione:.3lineare; ) . altezza: 9px;sfondo:#F73E24;posizione: assoluta;sinistra:50%;trasforma: ruota(45deg) translateX(6.5px);opacità:0;transizione:.3s lineare; (opacità: 1;) @media (larghezza massima: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (visualizzazione: blocco;) )

    Continuiamo la serie con una lezione sull'assegnazione dei menu a ciò che vedi. Nel menu orizzontale, quello che vedi, in css con le tue mani.

    Yakshcho hai bevuto qui in un vipadkovo o hai scherzato sull'implementazione del menu, quello che vedi, raja vai al ramo di Batkivsky.

    Ogni sezione avrà una descrizione del menu orizzontale che appare in CSS e HTML.

    Navigazione laterale:

    io così Il nostro compito:

    crea menu orizzontale con elenco CSS (su elenchi ul li) senza jQuery wiki che Javascript, così come senza tabella zastosuvannya

    al codice.

    Menu orizzontale che vedi

    Siamo davanti, prima di iniziare a scrivere codice, dobbiamo lavorare modello html per il menù.

    Al collegamento con tim, scho mi robimo universal menu, voglio creare yogo il più simile possibile a visnovok Menù WordPress. A mio parere, questo è uno dei codici di menu Html più semplici e universali. Sembrando così:

    Come puoi vedere dal codice, il nostro menu, che puoi vedere, sarà implementato nelle liste ul e li. Axis si presenta come questo menu senza stili CSS:

    Diciamo solo, guardando dritto in avanti, come una grande lista. Ci hanno dato la necessità di decorare il menu con stili CSS aggiuntivi.

    Menu orizzontale che ricade sui CSS

    Stili CSS per il menu, ciò che è visibile e non solo: di fatto è necessario altro. La scheda Età, che vedi, combatte sulla base della pseudo-classe: hover.

    Per il menu orizzontale che vedi, abbiamo bisogno di un asse come questo:

    #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %;altezza:auto;stile elenco:none;sfondo:#F3A601; menu1 ul li( posizione:relativa; display:blocco; float:sinistra; larghezza:auto; altezza:auto; ) #menu1 ul li a( display: block; padding:9px 25px 0px 25px; font-size:14px; font-family:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text -transform:uppercase;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

    Questa non è la fine, ma solo una parte del CSS per il menu orizzontale principale. Scriviamo gli stili per l'elenco dei menu:

    #menu1 ul li ul(position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;) meccanismo hover*/ # menu1 ul li ul li(float:none; width:100%; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; 100% box-sizing:border-box;border-top :1px solido #ffffff; ) #menu1 sfondo:#FDDC96; colore:#6572BC;

    L'asse ora sei tu. Il meccanismo stesso del declino delle realizzazioni è in una riga.

    Vedi skin dal menu:

    Riso. 2 (menu orizzontale, cosa vedi)

    Di seguito è riportata una demo-recensione del menu a discesa robotico, nonché una richiesta per una casa vacanza. (La demo verrà riprodotta sopra il lato centrale, non è necessario premere apri nella nuova finestra 🙂 o ci sono molti orsi)

    Menu orizzontale che cade a tutta larghezza

    La maggior parte di voi può dirmi di meno, dopo aver detto tali menu, come se avessi mostrato di più, innesterò dal passato e in qualche modo parteciperò alla vostra razione amico, se voglio scrivere nuovi layout con tali menu.

    Immagino che tu abbia approfittato del sedere. Html rimane invariato e ricordiamo di nuovo l'asse CSS. Puoi semplicemente prendere il codice CSS da qui e incollarlo nel calcio, oppure puoi vederlo in modalità demo mentre funziona.

    #conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: giustifica; font-size:1px; altezza-linea:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;decorazione-testo:none;pesatura-font:grassetto;trasformazione-testo:maiuscolo; :border-box; ) #menu1 ul li > a:hover; :0px; display: nessuno; larghezza: automatica; sfondo:#EBBD5B; spazio bianco:nowrap; ) #menu1 ul li:last-child ul(/*l'ultimo elemento sarà virato a destra*/ left:auto; right:0px; ) dropdown*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; box-sizing:border-box;border-top:1px solid #ffffff;) #menu1 #FDDC96; colore:#6572BC;

    Inoltre, questo culo sembra la prima volta che il menu, che cadi, la caduta stessa, si allunga nel maggese, dalla larghezza di tutte le voci di menu.

    Per altre voci di menu, questa opzione potrebbe non essere più conveniente, perché la puzza sarà fuori limite. Per togliere la corrente, è sufficiente conoscere la potenza "white-space:nowrap;" il selettore #menu1 ul li ul ho yoga.

    Di seguito puoi guardare la demo o ottenere le viste del menu orizzontale:

    Senza rivenditori, il menu si presenta così. Puoi aggiungere estensioni in html manualmente, ma se hai un CMS, ad esempio WordPress, non puoi aggiungerle manualmente.

    Menù orizzontale con i rivenditori

    Ci sono dozzine di opzioni, come su puro CSS aggiungi un marito (rozdіlyuvach) tra le voci di menu. Opzioni, come twisting::before o::after , altrimenti non duplicherò border-left, border-right.

    Ci sono situazioni, se il layout è così meraviglioso che non puoi fare a meno di jquery.

    Abbiamo molto codice html, lo colleghiamo alla libreria jQuery solo sul primo cob, quel file, che è quello vittorioso:

    Subito dopo.

    Come hai capito, è necessario creare un file script-menu-3.js e metti questo piccolo codice:

    $(documento).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

    Gli stili CSS per un tale menu devono essere tralasciati, cos'è, + lancia l'asse di questo pezzo fino alla fine:

    #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )

    Per guardare un menu così orizzontale con opzioni su jQuery, l'asse sarà così:

    Puoi dare un'occhiata alla demo o prendere il modello di menu orizzontale di seguito:

    I vantaggi di una tale soluzione sono:

    • il menu si allunga in modo dinamico;
    • esci dal rivenditore fino al punto di differenza;
    • più meravigliosamente quel coniglietto è decorato.

    Menu CSS+HTML Baghatorivneve orizzontalmente

    Poiché si trattava di bugatorivne, il menu scompare quando si passa sopra, singolarmente varto suddividerli in sottogruppi:

    1. con un vipadashkoy quando si mira a uccidere
    2. con uno splicing vapadka del terzo uguale

    Nei miei mozziconi mostro menu bagatorivneve CSS per 3 è uguale, penso che non sarà difficile capire cosa deve essere fatto.

    Menu Bagatorivneve con una scorciatoia nel libro quando si passa il mouse

    Per la pannocchia, abbiamo bisogno di un po' di ritocco al nostro html. Lì otterrai un paio di righe per la 3a riga:

    #conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: giustifica; font-size:1px; altezza-linea:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( display:block; padding:9px 45px 0px 45px; em;text-decoration:none;font-weight:bold;text-transform:uppercase;height:36px;box-sizing:border-box;) #menu1 ul li ( background: #EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) # menu1 > ul > li:last-child > ul(/*l'ultimo elemento sarà allegati sul bordo destro*/ sinistro:auto; a destra:0px; ) #menu1 ul li:hover > ul(display:block;)/*questa riga implementa il meccanismo hover*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display : block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border-box Border-top: 1px solid #ffffff; ) a( background:#FDDC96; color:# 6572BC ; ) #menu1 ul li ul li ul( top:0px; > ul ul(left:auto; right:100%;) #menu1

    I file per jQuery vengono copiati come se provenissero dal front butt. Vyrishiv lascia fuori i rivenditori, in modo che il menu sembrasse un po' migliore. Puoi, ovviamente, senza di loro.

    L'asse si presentava così:
    Ho creato 2 skin in una, per mostrare come sembro destrorso e nel mezzo.

    Di seguito puoi vedere la demo e scaricare lo stock:

    Un ricco menu che appare con un menu a discesa di fusione quando si passa il mouse sopra

    L'olio di Troch non era incluso nel titolo, ma rovina il codice.

    L'essenza di questo culo è la creazione di un menu orizzontale che cade per l'intera larghezza della goccia per l'intera larghezza + ricchezza.

    Non cambierò il codice html, puoi prenderlo dal calcio anteriore. Anche Razdіlyuvachi su jQuery è sopraffatto.

    Cambia solo CSS più e più volte:

    #conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: giustifica; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; :relative; display:inline-block;width:auto ;altezza:auto;allineamento-verticale:alto;allineamento-testo:sinistra; ) #menu1 > ul > li(posizione:statico;) :28px;larghezza:1px;sfondo:#ffffff;margine-alto:4px;) # menu1 ul li a(display:block;padding:9px 45px serif; color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text-transform:maiuscolo;altezza:36px; a :hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:no ne;larghezza:100%; altezza:0px; contenuto:" "; ) #menu1 :blocco; larghezza: 30%; galleggiante: sinistra; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ; block;float:none;width:100%;) #menu1

    L'asse del menu sarà simile a questo: L'unico momento: il sito può avere spazio sufficiente, quindi non c'è spazio per il punto estremo a destra. Questo problema può essere risolto attraverso: nth-child, ma non ho intenzione di recintare la città.

    Guarda la demo della barra dei menu orizzontale:

    Come potresti ricordare: la piastra inferiore è anche l'intera larghezza. L'asse si contorce così tanto contro gli spratti dei blocchi.

    Sono d'accordo, ne sono sicuro, voglio uno dei miei culi per te. Grazie per il rispetto.

    Tse porta malinconia e їm, e me 🙂.

    Se hai letto bene il post, ma se non sai come creare il tuo menu orizzontale, cosa puoi vedere sui css, imposta il cibo nei commenti o cerca velocemente nel sito.

    Quindi, il rajah vede il lato paterno https://website/vypadayushhee-menu/, sono selezionati tutti i menu applicati e diversi.

    Scelta degli editori

    © 2022 androidas.ru - Tutto su Android