Come può essere utilizzato Flexbox per creare una barra di navigazione?
Flexbox è la scelta migliore per creare una barra di navigazione soprattutto quando si tratta di reattività. Flexbox rende gli elementi facili da allineare all'interno del contenitore, fornisce spaziatura e consente automaticamente agli articoli di adottare modifiche in base allo spazio disponibile. A causa della sua compatibilità tra browser, lo stile rimane lo stesso su più versioni di browser.
Questo articolo dimostra come creare una barra di navigazione utilizzando il layout Flexbox che includerà:
- Struttura della barra di navigazione
- Styling di Navbar e logo
- Styling delle voci di menu
- Styling del pulsante e pulsante di ricerca
Come può essere utilizzato Flexbox per creare una barra di navigazione?
La barra di navigazione consente all'utente di attraversare più pagine Web sul sito Web. Contiene una barra di ricerca, icone sociali e molti altri. Seguire i passaggi dettagliati di seguito per creare una barra di navigazione utilizzando il layout Flexbox:
Passaggio 1: struttura della barra di navigazione
Il primo passo è creare una struttura per la barra di navigazione utilizzando HTML. Ad esempio, la barra navy contiene "logo "," voci di menu "e" barra di ricerca"Con un invio"pulsante":
La spiegazione del codice sopra è la seguente:
- Innanzitutto, crea un "Tag all'interno del ""Tag. Contiene tutti gli elementi che diventano parte della barra di navigazione.
- Per tenere il "logo"Dell'azienda/sito Web, crea un""Tag e assegnarlo una classe di"loghi". Più tardi, questa classe viene utilizzata per aggiungere uno stile al logo.
- Successivamente, usa l'elenco non ordinato "
- Alla fine, crea il "ingresso"Campo con un tipo"testo", E usa un"pulsante"Che è avvolto all'interno del"”Tag di classe"ricerca".
Dopo aver eseguito il codice sopra, la pagina web appare così:
L'output mostra che la struttura della barra navic è stata visualizzata sullo schermo.
Passaggio 2: Styling di navbar e logo
Innanzitutto, seleziona il “nav"Selettore elemento che seleziona il""Tag dal file HTML. Successivamente, selezionare l'immagine del logo e Div accedendolo tramite "loghi"Classe e applicare le proprietà CSS come di seguito:
navdisplay: flex;
Giustify-Content: spazio-spazio;
ALIGE-ITMS: CENTRO;
Background-color: #333;
imbottitura: 10px;
.loghi
margine-destra: auto;
.logos img
larghezza: 100px;
La spiegazione dello snippet di codice sopra è:
- Prima il "flettere" E "spazialeI valori "sono impostati su"Schermo" E "giustificare il contenuto" proprietà. Queste proprietà allineano il div fianco a fianco e impostano il "navTag come "flettere" disposizione.
- Quindi, i valori di "centro", "#333" E "10px"Sono assegnati al"allineare","colore di sfondo", E "imbottitura"Proprietà, rispettivamente. Queste proprietà CSS vengono utilizzate per un migliore processo di visualizzazione.
- Alla fine, selezionare l'immagine del logo e dargli un "larghezza"Di 100px e imposta il"auto"Valore per il"margine-destra" proprietà.
Dopo l'esecuzione del codice sopra, la pagina Web assomiglia a questa:
L'output di cui sopra visualizza che il layout Flex è impostato su "nav"Tag e l'immagine del logo è impostata sul lato sinistro.
Passaggio 3: stile delle voci di menu
Per applicare gli stili sui pulsanti di menu, selezionare le classi DIV corrispondenti e applicare le seguenti proprietà CSS:
.menùdisplay: flex;
stile elenco: nessuno; margine: 0;
imbottitura: 0;
.elemento del menu
Margine: 0 10px;
.MenuIUTEM A
Colore: #FFF;
DECORAZIONE DEL TESTO: Nessuno;
La spiegazione del codice sopra è:
- Innanzitutto, impostare le voci di menu come elementi Flex fornendo i valori di "flettere" E "nessuno" al "Schermo" E "stile elenco" proprietà.
- Quindi, assegna zero come valore al CSS "imbottitura" E "margine" proprietà. Ciò rimuove tutti i margini predefiniti e l'imbottitura applicati agli elementi dell'elenco.
- Successivamente, seleziona il “elemento del menuClasse "e"ancora"Elemento residente in esso. Inoltre, imposta il colore dell'elemento su "#F F F".
- Alla fine, fornire "nessuno"Come valore per rimuovere gli stili predefiniti al CSS"decorazione del testo" proprietà.
Dopo aver aggiunto il codice sopra, la pagina web ora appare così:
L'output visualizza che le voci di menu sono ora disegnate.
Passaggio 4: styling del pulsante e pulsante di ricerca
Utilizzando i selettori di elementi diretti, selezionare "ingresso" E "pulsante"Elementi HTML nel file CSS. E applicare le seguenti proprietà CSS per migliorare la visibilità dell'utente:
ingressoimbottitura: 5px;
confine: nessuno;
Radius di confine: 3px 0 0 3px;
Button
Background-color: #555;
Colore: #FFF;
confine: nessuno;
imbottitura: 5px 10px;
raggio di confine: 0 3px 3px 0;
Cursore: puntatore;
Di seguito è riportata la spiegazione del codice sopra:
- Utilizzare il "imbottitura","confine", E "raggio di confine"Per applicare lo stile al campo di input.
- Imposta il valore di "#555" E "#F F F" al "sfondo" E "colore del testo"Proprietà per l'elemento pulsante.
- Dopodiché, imposta il “Pointer" E "nessuno"Come valore per il"cursore" E "confine" proprietà.
- Altre proprietà CSS possono anche essere utilizzate per rendere il design più reattivo e accattivante.
Dopo aver eseguito lo snippet del codice sopra, l'output sembra così:
L'output visualizza che la barra di navigazione è ora creata con successo utilizzando Flexbox.
Conclusione
Per creare una barra di navigazione utilizzando Flexbox Imposta il “flettere" E "spaziale"Valori al"Schermo"E le proprietà" giustificate-contenenti "all'interno del""Tag. Dopodiché, fornisci "flettere"Come valore per la proprietà di visualizzazione per l'elenco non ordinato"". Alla fine, le proprietà CSS vengono applicate per modellare gli elementi HTML residenti all'interno del “"Tag. Questo articolo ha spiegato l'utilizzo di Flexbox per creare una barra di navigazione.