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
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.
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
passiamo poi al nav partendo dal burger button
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%
Non ci rimane ora che definire lo script js per l’apertura
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