Creazione di un menu HTML mobile utilizzando jQuery e CSS

Per tutti noi che abbiamo a che fare con pagine web lunghe e abbiamo bisogno di scorrere verso l'alto per il menu, ecco una bella alternativa: menu mobili che si muovono mentre si scorre una pagina. Questo viene fatto usando HTML, CSS e jQuery, ed è completamente compatibile con W3C.

Demo e fonte

Puoi vedere una demo di questo tutorial facendo clic sul pulsante "Demo" qui sopra. Per il download di origine, tieni presente che la libreria jQuery, il plug-in Dimensioni e il codice di ripristino di Eric Meyer non si trovano nel file ZIP.

Cosa stiamo costruendo

Questo tutorial spiega come creare un "menu mobile" usando HTML, CSS e jQuery. Per reiterare, un menu mobile rimane visibile anche se scorri una pagina web. Sono animati, quindi si muovono su e giù mentre si scorre la finestra del browser su o giù. Ti mostrerò come creare un menu mobile usando jQuery e CSS, e spero di creare qualche nuovo discepolo di jQuery: D.

Prima di continuare con la procedura di codifica, dai un'occhiata ai due scatti della schermata qui sotto. Il primo mostra una pagina web con un menu mobile in alto a destra. Ovviamente, non puoi dire che è mobile finché non lo vedi dal vivo e in effetti lo scorrimento della pagina. Quindi guarda la seconda istantanea e puoi vedere che il menu è stato spostato.

Passo 1

Iniziamo con il markup HTML per un bel menu composto da tre sottomenu:

 
 
 
 Casa 
 
 
 
 Tabella dei contenuti 
 
 Esame 
 
 wiki 
 
 
 
 Supporto tecnico 
 
 

Questo è il markup di base che useremo. La parte principale di questo bit di HTML è il

nella riga 01, che racchiude l'intero menu. Le tre liste sono utilizzate solo per dimostrare la struttura, che può essere modificata in base alle proprie esigenze. In questo caso, ci sono tre sezioni del menu, rappresentate da tre elenchi HTML non ordinati.

Per abitudine, disattivo il clic sui link fittizi (href = "#"). Per essere sicuro che un clic su un link fittizio non rimandi la pagina in cima, c'è anche un onclick = "return false;" nel . Questo metodo consente di aggiungere funzionalità di elementi di menu come lightboxing: qualcosa che richiede che la pagina rimanga nella posizione verticale corrente quando l'utente fa clic su un collegamento di menu.

Passo 2

Ora abbiamo bisogno di alcune regole CSS per applicare skin e posizionare il menu. (Ho usato il reset CSS di Eric A. Meyer, ecco perché non c'è margine: 0 o padding: 0 sull'elemento ul):

body background-color: # 000; altezza: 2000px; colore: #ccc; font: 10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;  #floatMenu position: absolute; top: 150px; a sinistra: 50%; margin-left: 235px; larghezza: 200px;  #floatMenu ul margin-bottom: 20px;  #floatMenu ul li a display: block; border: 1px solid # 999; background-color: # 222; border-left: 6px solid # 999; text-decoration: none; colore: #ccc; imbottitura: 5px 5px 5px 25px; 

L'altezza del corpo (linea 03, sopra) è stata impostata solo per avere abbastanza spazio per il nostro menu per scorrere su e giù con la pagina. Questo dovrebbe essere rimosso in uno scenario reale. Le altre due cose da prendere in considerazione sono la posizione: assoluta (riga 08) e sinistra: 50% (riga 10), entrambe nella regola CSS #floatMenu (riga 07), sopra.

L'attributo "position" viene utilizzato quando è necessario rimuovere un elemento dal flusso del documento e tenerlo in una posizione precisa nella pagina. Se si utilizza la funzione di zoom del testo del browser, un elemento con posizionamento assoluto non si muoverà, anche se il testo attorno ad esso aumenta di dimensioni.

L'attributo "sinistra" è usato per posizionare l'elemento div specifico in orizzontale. Il valore deve essere definito come percentuale nel caso in cui vogliamo un design centrato. Con un valore del 50%, il lato sinistro del contenitore è posizionato al centro della pagina. Per posizionarlo a sinistra oa destra, dobbiamo usare l'attributo "margin-left" (Linea 11), con un valore negativo per uno spostamento a sinistra e uno positivo per uno spostamento a destra.

Gli altri elementi nelle regole del foglio di stile sopra riportate personalizzano il design visivo.

Passaggio 3

Ora abbiamo un menu di tre sezioni posizionato nella parte in alto a destra della pagina. Per migliorare l'effetto di rollover delle voci di menu, aggiungiamo rispettivamente le classi di stile menu1, menu2 e menu 3 a ciascuna sezione di menu (a ciascuna

elemento). Avremo 3 sottomenu distinti usando il nostro 3
tag. Il seguente codice è una modifica del codice HTML mostrato nel passaggio 1 sopra:

 
 
... 
 
... 
 
... 
 

Ora definiamo alcuni effetti di rollover basati su hover CSS, che saranno diversi per ogni sezione di menu.

 #floatMenu ul.menu1 li a: hover border-color: # 09f;  #floatMenu ul.menu2 li a: hover border-color: # 9f0;  #floatMenu ul.menu3 li a: hover border-color: # f09; 

Ora ogni sezione del menu mostrerà un colore diverso quando il mouse passa su una voce di menu. Se lo desideri, puoi anche aggiungere regole per altri stati di collegamento menu usando: link,: visited,: hover e: pseudo classi attive. L'ordine in cui dovresti scriverli può essere facilmente memorizzato in questo modo: LoVe e HAte, dove le lettere maiuscole rappresentano la prima lettera di ogni stato.

Passaggio 4

Abbiamo un bel menu e possiamo fermarci qui, ma vogliamo quel menu mobile, quindi è ora di aggiungere un po 'di jQuery. Dovrai scaricare la libreria jQuery e il plug-in Dimensioni. Questo plugin verrà utilizzato per raccogliere informazioni sulla finestra del browser (larghezza, altezza, scorrimento, ecc.). Puoi collegare entrambi i bit del codice jQuery dal tuo file HTML nel ... sezione. Basta ricordare di cambiare il percorso dell'URL in base a dove sul server si posiziona la libreria jQuery e i file del plugin.

Avremo bisogno anche di un codice jQuery personalizzato, quindi inizia una nuova

Aggiungi il seguente codice jQuery all'interno dele