Continuando con esempi di vari elementi dell'interfaccia utente del sito Web che possono essere realizzati senza Javascript, oggi descriverò come creare un menu a scorrimento utilizzando puro CSS.
Abbiamo bisogno di input per determinare la visibilità del menu: ovvero, se è selezionato, il menu è visibile e viceversa.
label è il nostro pulsante hamburger associato all'input.
ul – il blocco del menu stesso.
Ora CSS(scritto solo per browser WebKit: Opera 16+, Safari, Chrome).
Il nostro menù:
Menu nascosto (visualizzazione: blocco; posizione: fissa; stile elenco: nessuno; riempimento: 10px; margine: 0; dimensioni del riquadro: border-box; larghezza: 200px; colore di sfondo: #eee; altezza: 100%; in alto: 0; sinistra: -200px; transizione: sinistra .2s; z-index: 2; -webkit-transform: TranslateZ(0); -webkit-backface-visibility: nascosto; )
C'è molta libertà per le persone creative qui, ma i parametri principali sono larghezza e sinistra. Devono avere lo stesso valore, ma a sinistra è negativo. Pertanto, nascondiamo il nostro menu a sinistra dello schermo. Ho anche aggiunto un'animazione di transizione: left .2s per rendere più bello il processo di uscita dallo schermo.
Puoi anche progettarlo come preferisci. Ho realizzato un semplice pulsante grigio con strisce bianche nell'angolo in alto a sinistra. Qui ho aggiunto anche animazioni per il pulsante stesso e per le strisce (solo per bellezza).
Ora, la cosiddetta “magia”:
Ticker del menu nascosto: selezionato ~ .btn-menu ( a sinistra: 160px; ) .ticker del menu nascosto: selezionato ~ .menu-hidden ( a sinistra: 0; ) .ticker del menu nascosto: selezionato ~ .btn-menu span.first ( -webkit-transform: ruota (45 gradi); top: 10px; ) .hidden-menu-ticker:selezionato ~ .btn-menu span.second ( opacità: 0; ) .hidden-menu-ticker:selezionato ~ .btn-menu span.third ( -webkit-transform: ruota (-45 gradi); superiore: -10px; )
I selettori CSS3 ci permettono di determinare lo stato di una casella di controllo e di applicare, in base a questo, alcune proprietà per gli elementi vicini: controllato ~ . In questo esempio, con un input “checked”, spostiamo il menu button.hidden-menu-ticker:checked ~ .btn-menu a sinistra di 160 pixel, il menu sul bordo sinistro.hidden-menu-ticker:checked ~ .menu-nascosto . Gli stili rimanenti sono scritti per le strisce del pulsante menu, in modo che quando premuti si trasformino in una croce e viceversa.
Al momento, usando jQuery puoi fare qualsiasi cosa su un sito web, devi solo decidere se il tuo sito ne ha bisogno. Ci sforziamo tutti di rendere il sito il più user-friendly possibile, in modo che sia piacevole per lui navigare nel sito e sia il più semplice possibile. Il menu gioca un ruolo importante quando un visitatore “cammina” attraverso il tuo sito. E in questo tutorial creeremo un menu scorrevole che può nascondersi e apparire quando l'utente ne ha bisogno.
Interessanti anche i menù scorrevoli:
Un esempio può essere visto qui:
Scaricamento
In questo tutorial utilizzeremo il plugin jQuery - "jQuery.mmenu.js". Può essere scaricato dal collegamento - download.
Come usare?
Parte HTML
Innanzitutto, colleghiamo le librerie e gli stili necessari:
1
2
3
4
5
<tipo di collegamento = "testo/css" rel = "foglio di stile" href = "css/jquery.mmenu.css" / >
<tipo di collegamento = "testo/css" rel = "foglio di stile" href = "css/demo.css" / >
<tipo script = "testo/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<tipo di script = "testo/javascript" src = "js/jquery.mmenu.js" >
Poi decideremo la struttura del menù. Ad esempio, per mostrare come funziona, creerò un menu con elementi nidificati. Ma il tuo potrebbe essere più semplice:
Un po' sopra il menu inseriremo un interruttore in modo che l'utente possa aprirlo/chiuderlo:
Abbiamo finito con la struttura HTML, ora passiamo agli stili.
Come Menu di navigazione sul posto, menu del profilo utente ecc. possono essere nascosti e appariranno quando si fa clic e si passa il mouse. Qualcuno potrebbe dire che ciò influisce sull’usabilità della pagina. Non credo, perché la pagina diventa più pulita, il che significa che è più facile navigare. Una persona non si confonde in una montagna di collegamenti. Oggi ho preparato una raccolta pannelli scorrevoli, che sono nascosti nella pagina per impostazione predefinita. Chiamare menù, è necessario fare clic o passare il mouse sopra l'icona corrispondente. Questa tecnica è arrivata al web design dalle applicazioni mobili, dove è impossibile disporre molti elementi su uno schermo. Nel corso del tempo, tali pannelli sono migrati sui siti web. Questa raccolta sarà utile, prima di tutto, agli sviluppatori mobili. Con una risoluzione dello schermo bassa questo è ciò che apparirà. navigazione in uscita e su monitor normali e di grandi dimensioni puoi creare il solito menu a cui tutti sono abituati. In questo modo, una persona con un dispositivo mobile non si confonderà nel tuo sito, poiché è abituata a utilizzarlo da tempo pannelli scorrevoli, perché tutte le applicazioni del suo smartphone funzionano secondo lo stesso principio. Vorrei sottolineare che questa raccolta include plugin, che sono affilati solo per siti mobili e su monitor ampi il loro utilizzo risulterà inappropriato. Sebbene esistano anche pannelli universali adatti a qualsiasi sito web. Guarda la demo e scegli ciò che si adatta alle tue esigenze. I pannelli a discesa funzionano su . Implementare un menu di questo tipo sul tuo sito web non sarà difficile e i siti web degli sviluppatori contengono istruzioni dettagliate su come utilizzare il loro prodotto. Presto stiamo pianificando una riprogettazione del sito web Postovoy e utilizzeremo uno dei plugin jquery che vengono presentati di seguito. COSÌ. Portiamo alla vostra attenzione una raccolta di 20 plugin per il pannello scorrevole a discesa jquery per il tuo sito web. Non dimenticare di lasciare commenti.
Menu laterale scorrevole
Bel menu di navigazione scorrevole in jquery sotto forma di pannello scorrevole. Ideale sia per un sito mobile che per uno normale.
Transizioni per navigazioni fuori schermo
Un plugin estremamente potente che ti consente di organizzare un pannello scorrevole, che verrà visualizzato con vari effetti di animazione, incluso il 3D. Il plugin include 14 effetti di animazione.
jPanelMenu
Il pannello di navigazione è progettato nello stile delle applicazioni iOS. Un menu facile e veloce che faciliterà lo sviluppo di un sito mobile.
Ricrea il menu di Google Nexus
Il pannello scorrevole è realizzato per analogia con il menu di Google Nexus.
bigSlide: barra di navigazione delle diapositive in Jquery
Il pannello scorrevole è adatto sia per un sito mobile che per uno normale. Per richiamarlo è necessario cliccare sull'icona raffigurante tre strisce.
Menu a pressione multilivello
Il plugin Jqutry funziona in modo simile a bigSlide. Il pannello viene richiamato cliccando sull'icona. Il vantaggio di questo menu è che supporta una struttura a più livelli.
Menù principale della scatola
Una bellissima barra di navigazione con effetto 3D.
Menu con bordi animati
Facendo clic sul segno più nell'angolo dello schermo, viene visualizzata una piccola barra laterale con icone. Per nasconderlo è necessario fare clic sull'icona con il simbolo "-".
Snap.js
Il pannello scorrevole è progettato per dispositivi mobili. Il menu si richiama trascinando lo schermo con il cursore del mouse o, se su dispositivo mobile, con un dito.
Menu Scorri e Premi
|
Meny
Un plugin Jquery che ti consente di implementare una fantastica barra di scorrimento di navigazione con un effetto 3D sul tuo sito web.
mb.jquery
A differenza di altri pannelli, appare nella parte superiore dello schermo anziché spostarlo. Puoi inserire qualsiasi codice HTML, testo o qualsiasi cosa tu voglia nel blocco.
Dock Android
Il pannello è progettato per i siti mobili e si trova nella parte inferiore dello schermo. Quando si fa clic, vengono visualizzate le icone in cui è possibile inserire eventuali collegamenti.
Pannello scorrevole con contenuto
Il fantastico pannello scorrevole è progettato su due livelli. Il primo è il menù. Il secondo è il contenuto. Ora questo effetto è molto popolare tra designer e sviluppatori web. Puoi trovare molte applicazioni. Il mailer di Microsoft funziona secondo un principio simile.
Non hai trovato una risposta alla tua domanda? Guarda qui
Creazione di un menu laterale scorrevole utilizzando puro CSS
Aggiorna il framework alla versione più recente
Posta casuale. Generatore di indirizzi e-mail. Opzione Gmail per creare un indirizzo email temporaneo