Come creare un menù mobile fullsize con CSS3 e jQuery

1 Agosto 2018 Simone Baldassin sviluppo, web

Siete già in spiaggia a rosolarvi a dovere o in mezzo ai monti a scalare cime tempestose? Poco importa perché noi non andiamo mai in vacanza (più o meno) e voi di certo non potete fare a meno del vostro smartphone o del vostro tablet per poter leggere e pubblicare sui vostri social preferiti quindi eccoci qui.

Ma immaginate se i siti web non fossero mobile friendly? Non oso nemmeno pensarci, sarebbe una ecatombe.

Naturalmente sappiamo bene che così non è e questo grazie a CSS3 e jQuery che ci forniscono metodi assolutamente utili alla causa e spesso in maniera più semplice di quanto si possa pensare.

Immaginiamo per esempio di volere realizzare un menù desktop/mobile come quello del sito affinity.serif.com/it/

La sua caratteristica è quella di utilizzare uno slideDown – slideUp per aprirsi e chiudersi ma anche di essere completamente fullsize, ovvero, il menù aperto riempie tutto lo spazio disponibile.

Non perdiamo altro tempo e prepariamo il nostro file index, colleghiamo un bel foglio di stile normalizzando le occorrenze standard (da buon sviluppatore o semplice web designer dovresti sapere a cosa mi riferisco), prendiamoci un bel Google fonts e facciamo un collegamento remoto alla libreria jQuery come quello di seguito (ricorda di incollarlo prima della chiusura del body)

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

Partiamo dal file index dove andiamo ad inserire queste righe di codice HTML

css

Creiamo ora una cartella js con un file che chiameremo custom.js e andiamo a implementare il tutto dopo lo script della libreria principale come da figura.

css

Dentro questo file andremo ad inserire il nostro script

Passiamo ora a formattare il nostro foglio di stile ma non dimentichiamoci di salvare una bella immagine a piacere di grandi dimensioni (1440×1200) nella nostra cartella img che chiameremo bg-main in estensione jpg e un logo a piacere con estensione png che chiameremo semplicemente logo

Prima header e logo

css

passiamo poi al nav partendo dal burger button

css

e infine menù e main. Vediamo come il nav nascosto sia in position e ricopra tutto lo spazio disponibile grazie alle proprietà width: 100% e height: 100%

css

css

Non ci rimane ora che definire lo script js per l’apertura

css

e il gioco è fatto. Come potete constatare da soli non esistono grosse difficoltà nella realizzazione di questo tipo di struttura dove, naturalmente, sta poi a voi definire colori, immagini e contenuti utili.

Ancora nessun commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Clicca qui e Approfitta del Credito d’Imposta Formazione 4.0