Menu a discesa puro CSS / HTML

Menu a discesa puro CSS / HTML In questo tutorial creeremo un classico menu orizzontale su puro CSS....
Animiamo il menu orizzontale mentre puntiamo.
Descrivi il menu a discesa CSS / HTML

Menu a discesa puro CSS / HTML
In questo tutorial creeremo un classico menu orizzontale su puro CSS. Ha icone nelle liste. Quando si punta a un elemento, cambia in modo fluido il colore del pulsante e del testo, viene aggiunta un'ombra. Gli elenchi a discesa possono essere creati su più livelli e la cosa principale è implementata semplicemente su CSS3 puro.
La continuazione di questa lezione qui - parte 2 Menu orizzontale VERSIONE MOBILE ".
Vedi la penna POyzbW di Denis ( @Dwstroy ) attivo CodePen .
Nella lezione usa:
display: flex;
utilizzare la transizione;
posizionare gli elementi con la posizione.

HTML struttura del menu orizzontale

Innanzitutto, scrivi il codice sotto il menu orizzontale. Apriamo il nostro ambiente di sviluppo nel mio caso, questo è PhpStorm, creare un file index.html, prescrivere il frame html: 5, sostituire lang con ru.

Tutti i meta verranno eliminati tranne che per la codifica, registrerò il mio titolo " Menu Tom ".

Tra il corpo scriviamo il tag header, e in esso c'è un blocco con la classe .dws-menu che conterrà il nostro menu. Successivamente, la struttura sarà la seguente, creare elenchi nella quantità di cinque pezzi. In ogni elenco ci sarà un collegamento con l'attributo href = "#". Quindi andrò all'icona con la classe .fa .fa-

Facciamo pressioni per applicare.

Scriviamo il nome delle voci del menu ( Home, Prodotti, Servizi, Notizie, Contatti ).

Quindi, seleziona e connetti le icone. Vai al sito, selezioneremo le icone per queste voci di menu:

Scarica l'archivio dal sito con le icone, estrai i suoi contenuti sul tuo computer, copia la cartella dei caratteri e la cartella css nel tuo ambiente di sviluppo.

La cartella dei font contiene caratteri di icone e la cartella css contiene i loro stili. Gli stili compressi possono essere rimossi font-awesome.min, colleghiamo il font non compresso-awesome.css.

In index.html colleghiamo le icone e registriamo ogni elemento con il suo stile di icona ( casa , carrello della spesa , ingranaggi , elenco di controllo , busta aperta ).

Abbiamo creato il frame principale, creato un sottomenu dopo la descrizione dello stile principale, e ora creeremo un file in cui descriveremo gli stili principali del menu orizzontale style.css e collegarlo a index.html. Per verificare che gli stili siano collegati, crea una cartella img, in essa inserirò un'immagine arbitraria sullo sfondo. Scriviamo la connessione dell'immagine usando lo sfondo.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Come vediamo, tutto è stato visualizzato e quindi procederemo alla descrizione degli stili.

Prima di tutto, ripristiniamo tutti i rientri, che i diversi browser possono impostare di default:

.dws-menu * {margin: 0; padding: 0; }

Imposta l'intestazione su 200 picchi. e assegnare quale è possibile scaricare e connettere separatamente a se stessi sul sito, nel caso, scrivere caratteri aggiuntivi.

header {margin: 200px; famiglia di font: Cuprum, Arial, Helvetica, sans-serif; }

Nascondi i marcatori negli elenchi:

.dws-menu ul, .dws-menu ol {list-style: none; }

Le liste saranno visualizzate orizzontalmente con display: lino, e lo faremo al centro:

.dws-menu> ul {display: flex; justify-content: center; }

Nell'intestazione indenteremo solo la parte superiore, scriveremo un margine superiore.

header { margin-top: 200px; famiglia di font: Cuprum, Arial, Helvetica, sans-serif; }

Progettiamo il nostro menu, impostiamo il colore dei pulsanti, il carattere, ecc.

Seleziona i link nav> ul li e rendili elementi di blocco. Imposta lo sfondo del menu, scrivi i rientri, specifica la dimensione, il colore, rimuovi il carattere di sottolineatura e imposta i titoli in lettere maiuscole.

.dws-menu> ul li a {display: block; sfondo: #ececed; imbottitura: 15px 30px 15px 40px; font-size: 14px; colore: # 454547; decorazione del testo: nessuna; text-transform: maiuscolo; }

Quindi posiziona le icone, assegna gli elenchi alla posizione: relativa; per ulteriore allineamento delle icone:

.dws-menu> ul li {position: relativo; }

Successivamente, selezioniamo le icone, le posizioniamo in modo assoluto, facciamo rientro dall'alto a 15 picchi, dai 12 picchi a sinistra, aumentiamo le dimensioni a 18 picchi.

.dws-menu> ul li> a i.fa {posizione: assoluta; inizio: 15px; a sinistra: 12px; dimensione del font: 18px; }

Assegna il separatore sotto forma di un bordo agli elenchi, seleziona il primo elemento LI, imposta il bordo. Selezioniamo l'ultimo elemento LI e assegniamo un bordo simile.

.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }

Creare delimitatori per gli elenchi di LI:

.dws-menu> ul li {position: relativo; border-right: 1px solid # c7c8ca; }

Il menu ha acquisito l'aspetto, quindi è possibile passare alla descrizione degli stili durante il passaggio del mouse.

Animiamo il menu orizzontale mentre puntiamo.

Selezionare i collegamenti e assegnare un colore al blocco e assegnare il colore del collegamento stesso con l'icona al bianco. Aggiungiamo un'altra ombra scura. Con l'aiuto della transizione in 0,3 secondi faremo un aspetto liscio:

.dws-menu li a: hover {background: # 454547; colore: #ffffff; box-shadow: 1px 5px 10px -5px nero; transizione: tutti i 0.3 secondi; }

E per rendere questo effetto scomparire senza problemi, aggiungi questo stile al link a tuo agio:

.dws-menu> ul li a {display: block; sfondo: #ececed; imbottitura: 15px 30px 15px 40px; font-size: 14px; colore: # 454547; decorazione del testo: nessuna; text-transform: maiuscolo; transizione: tutti i 0.3 secondi; }

Il menu principale è finito e puoi procedere alla descrizione del sottomenu e dei sottomenu incorporati in essi.

Descrivi il menu a discesa CSS / HTML

A proposito di aprire index.html e aggiungere, ad esempio, un menu aggiuntivo ai prodotti. Inserisci l'UL tra gli elenchi di LI e inseriscici cinque liste, che conterranno collegamenti con l'attributo herf = "#".

ul> li * 5> a [href = "#"]

Premiamo per applicare, scrivere il nome degli articoli ( Abbigliamento, Elettronica, Cibo, Strumenti, Vita. Chimica ).

<ul> <li> <a href="#"> Abbigliamento </a> </ li> <li> <a href="#"> Elettronica </a> </ li> <li> <a href = "#"> Cibo </a> </ li> <li> <a href="#"> Strumenti </a> </ li> <li> <a href="#"> Vita. chimica </a> </ li> </ ul>

Quindi apri style.css e descrivi gli stili del sottomenu.

Selezioniamo la seconda lista e assegniamo la posizione: assoluta; , impostiamo la larghezza minima a 150 picchi.

/ * sub menu * / .dws-menu li ul {position: absolute; larghezza minima: 150 px; }

Scriviamo agli elenchi di confine a 1 picco.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Per i collegamenti nel sottomenu, imposteremo i rientri a 10 picchi., Rimuovere la trasformazione del testo e rendere lo sfondo un paio di toni di sfondo più scuro: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; Trasformazione del testo: nessuno; sfondo: # e4e4e5; }

Quindi crea un altro sottomenu. Vai al file di markup e ad esempio nel modulo "Elettronica" per analogia come abbiamo fatto prima. Descriviamo i titoli degli articoli ( fotocamere, computer, telefoni ) e salviamo.

<li> <a href="#"> Elettronica </a> <ul> <li> <a href="#"> Fotocamere </a> </ li> <li> <a href="#"> Computer </a> </ li> <li> <a href="#"> Telefoni </a> </ li> </ ul> </ li>

Sono stati portati fuori, ma nascosti sotto il menu principale, ora posizione: assoluta; UL annidato e spostarlo sul picco 150. al lato:

.dws-menu li> ul li ul {position: absolute; a destra: -150 px; inizio: 0; }

Successivamente, faremo apparire il sottomenu quando si prendono di mira gli elementi principali del menu principale, per questo aggiungiamo display: nessuno; e quindi nascondere tutti i punti interni.

/ * sub menu * / .dws-menu li ul {position: absolute; larghezza minima: 150 px; display: nessuno; }

E per il loro aspetto, selezioneremo gli elenchi al passaggio del mouse e li visualizzeremo con l'aiuto di display: block; .

.dws-menu li: hover> ul {display: block; }

Ora puoi aggiungere menu multi-livello semplicemente copiando il blocco UL, cambiando i suoi elementi.

<ul> <li> <a href="#"> Home </a> </ li> <li> <a href="#"> prodotti </a> <ul> <li> <a href="#"> Abbigliamento </a> <ul> <li> <a href = "#"> Scarpe </a> </ li> <li> <a href="#"> Giacche </a> </ li> <li> <a href="#"> Pantaloni </a> < / li> </ ul> </ li> <li> <a href="#"> Elettronica </a> <ul> <li> <a href="#"> Fotocamere </a> </ li> <li> <a href="#"> Computer </a> </ li> <li> <a href="#"> Telefoni </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Cibo </a> </ li> <li> <a href="#"> Strumenti </ h a> </ li> <li> <a href="#"> Gen. chimica </a> </ li> </ ul> </ li> <li> <a href="#"> Servizi </a> <ul > <li> <a href="#"> Servizio 1 </a> </ li> <li> <a href="#"> Servizio 2 </a> </ li> <li> <a href = "#"> Servizio 3 </a> </ li> </ ul> </ li> <li> <a href="#"> Notizie </a> </ li> <li> <a href="#"> Contatti </a> </ li> </ ul>

Quindi finiamo i pulsanti con i pulsanti. Io uso, ho creato diversi Preset, puoi creare il tuo, nel mio caso, copio questo codice e lo metto nel posto in background che ho scritto prima.

.dws-menu> ul li a {display: block; / * Permalink: questo gradiente: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; Custom +3 * / background: # c9c9c9 ; / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (in alto, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente lineare (in basso, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; font-size: 14px; colore: # 454547; decorazione del testo: nessuna; text-transform: maiuscolo; transizione: tutti i 0.3 secondi; } .dws-menu li a: hover {/ * Permalink - questo gradiente: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Vecchi browser * / sfondo: -moz-linear-gradient (in alto, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (in alto, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente lineare (in basso, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px nero; transizione: tutti i 0.3 secondi; }

Se lo desideri, questo menu può essere progettato per lo stile che siamo adatti a te sul sito, basta solo generare un colore e sostituirlo nel codice. Si è rivelato un menu orizzontale semplice e allo stesso tempo piacevole, realizzato in puro CSS.

Menu a discesa puro CSS / HTML

HTML struttura del menu orizzontale

Animiamo il menu orizzontale mentre puntiamo.

Descrivi il menu a discesa CSS / HTML

Lascia un commento: