Share
In questo tutorial, creerai un menu di navigazione laterale espandibile con JavaScript e CSS. Il prodotto finale apparirà come mostrato di seguito:
Per iniziare, aggiungiamo alcuni markup per il nostro menu laterale:
× Informazioni sulle funzioni Contattaci
Qui puoi vedere che abbiamo creato un div menu laterale con la classe sidenav. Successivamente abbiamo aggiunto la barra di navigazione attuale tramite a tag, e stiamo usando un SVG per la nostra icona del menu laterale.
Il al clic l'attributo dell'icona e il pulsante di chiusura attiveranno alcuni JavaScript, che aggiungeremo successivamente.
Ricorda di inserire tutto il contenuto del tuo sito web nel div contenitore in modo che scorra a destra.
Successivamente, aggiungiamo il JavaScript per creare il openNav e closeNav funzioni.
Infine, avremo bisogno di personalizzare la nostra pagina con alcuni CSS per il menu laterale e i nostri collegamenti:
/ * Il menu di navigazione laterale * / .sidenav height: 100%; / * 100% a tutta altezza * / larghezza: 0; / * 0 width - cambia questo con JavaScript * / position: fixed; / * Rimani in posizione * / z-index: 1; / * Rimani in cima * / in alto: 0; a sinistra: 0; background-color: # 111; / * Nero * / overflow-x: nascosto; / * Disabilita scroll orizzontale * / padding-top: 60px; / * Posiziona il contenuto 60px dall'alto * / transizione: 0,5 s; / * 0.5 secondo effetto di transizione per scorrere nel sidenav * / / * Il menu di navigazione collega * / .sidenav a padding: 8px 8px 8px 32px; decorazione del testo: nessuna; font-size: 25px; colore: # 818181; blocco di visualizzazione; transizione: 0.3s / * Quando passi il mouse sui link di navigazione, cambia il loro colore * / .sidenav a: hover, .offcanvas a: focus color: # f1f1f1; / * Posiziona e modella il pulsante di chiusura (in alto a destra) * / .sidenav .closebtn position: absolute; inizio: 0; a destra: 25px; font-size: 36px; margin-left: 50px; / * Contenuto della pagina di stile: utilizzalo se desideri spingere il contenuto della pagina verso destra quando apri la navigazione laterale * / #main transition: margin-left .5s; imbottitura: 20px; overflow: hidden; width: 100%; body overflow-x: hidden; / * Aggiungi un colore di sfondo nero alla barra di navigazione superiore * / .topnav background-color: # 333; overflow: nascosto; / * Modella i collegamenti all'interno della barra di navigazione * / .topnav a float: left; blocco di visualizzazione; colore: # f2f2f2; allineamento del testo: centro; imbottitura: 14px 16px; decorazione del testo: nessuna; font-size: 17px; / * Cambia il colore dei link su hover * / .topnav a: hover background-color: #ddd; colore nero; / * Aggiungi un colore al collegamento attivo / corrente * / .topnav a.active background-color: # 4CAF50; colore bianco; / * Sugli schermi più piccoli, dove l'altezza è inferiore a 450px, cambia lo stile del sidenav (meno padding e una dimensione del font più piccola) * / @media screen e (max-height: 450px) .sidenav padding-top: 15px; .sidenav a font-size: 18px; a svg transition: all .5s ease; &: hover #transform: ruotare (180 gradi); #ico display: none; .menu background: # 000; display: nessuno; imbottitura: 5px; larghezza: 320 px; @include border-radius (5px); #transition: tutti gli anni '50 si adattano; a display: block; colore: #fff; allineamento del testo: centro; imbottitura: 10px 2px; margine: 3px 0; decorazione del testo: nessuna; sfondo: # 444; &: nth-child (1) margin-top: 0; @include border-radius (3px 3px 0 0); &: nth-child (5) margin-bottom: 0; @include border-radius (0 0 3px 3px); &: hover background: # 555;
Nota: Il body overflow-x: hidden; è necessario per garantire che una scroll orizzontale non venga visualizzata quando si utilizza questa opzione con il proprio CSS esistente.
Ora puoi dare un'occhiata al tuo menu e provarlo nel tuo browser.
Se vuoi creare il menu JavaScript laterale usando jQuery, puoi farlo sostituendo il JavaScript che ho fornito in precedenza con la seguente sezione:
Accentsconagua
$ ('. topnav a'). click (function () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). click (function () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);Per far apparire il menu senza animazioni di diapositive, è sufficiente apportare modifiche alla proprietà CSS transizione, come mostrato in una forma abbreviata di seguito:
.sidenav transition: 0s; #main transition: margin-left 0s;
Questo farà apparire istantaneamente la modifica poiché non vi è alcun ritardo specificato in transizione. L'impostazione predefinita che abbiamo usato è 0.5s.
La creazione di un menu laterale richiede solo poche righe di codice e non è necessario utilizzare molte risorse. Inoltre, se jQuery è già nella pagina per altre attività, il lavoro può essere eseguito con un numero leggermente inferiore di righe di codice e personalizzato ulteriormente.
Rendere il codice reattivo in grado di funzionare con risoluzioni diverse dello schermo del dispositivo è semplicemente un caso di modifica del CSS aggiungendo query multimediali per i casi specifici.
Per fare questo, potresti voler personalizzare il tuo menu con un framework CSS come Bootstrap o Bulma.
