Share
L'animazione e il feedback visivo sono ottimi modi per assistere un utente nella navigazione e nell'interazione con un sito web. Mentre tradizionalmente Adobe Flash era il goto per qualsiasi cosa animata, in questi giorni con la magia di javascript possiamo evitare del tutto il Flash. Oggi costruiremo un fantastico menu di navigazione animata usando solo CSS e jQuery.
Il menu che stiamo costruendo può essere visto nello screenshot qui sotto. Puoi anche vedere la versione finale funzionante qui.
Ho intenzione di rompere questo tutorial in cinque sezioni come segue:
Prima di tutto vediamo cosa dobbiamo fare qui.
Quindi ecco un'idea approssimativa di cosa dovremmo fare:
Ora la maggior parte delle volte usiamo
Quindi, per riassumere
casadiServizisoluzionicontatto
Potrebbe aiutare a mostrare la struttura delle directory che sono. La struttura della directory è la seguente:
Presumo che tu abbia una conoscenza di base nel trattare con Photoshop, quindi non darò istruzioni troppo dettagliate sulla creazione delle risorse.
Ci sono molte cose che dobbiamo creare.
Si noti che se si desidera saltare questo passaggio è possibile scaricare il file zip completo dei file alla fine del tutorial ed estrarre le mie copie!
Ok, creiamo lo sfondo dell'intestazione. Apri Photoshop e crea una tela di 1x180 px, oppure puoi ingrandirla e ritagliare l'immagine.
Crea un livello e assegnagli un gradiente lineare con Preset in primo piano su Sfondo per 171 px, questo sarà il gradiente principale.
Crea un altro livello e dargli un gradiente lineare con Preset in primo piano trasparente per circa 10px nella parte inferiore del primo livello per un effetto ombra.
Ecco come dovrebbe essere, è 100x181 px che successivamente ritagliamo a 1x181 px.
Salva questo come 'Hdr-bkg.png' nel nostro 'IMG' cartella.
Successivamente, creeremo il titolo del contenuto. Ancora una volta, apri Photoshop e crea 934x284 px.
Crea un rettangolo arrotondato usando lo strumento appropriato, seleziona la forma creata, crea un nuovo livello, aggiungi un gradiente e dona un po 'di ombra.
Quindi avremo qualcosa di simile a questo:
Salva questo come 'Content-title.png' nel 'IMG' cartella.
Ora creiamo le risorse necessarie per la navigazione. Abbiamo bisogno di due set di navigazione e una scatola bianca.
La scatola bianca è semplice. Basta creare un rettangolo arrotondato di circa 98 px x 58 px e dipingerlo con il bianco. Assicurati che lo sfondo sia trasparente.
Salva questo come 'White.jpg' nel 'IMG' cartella.
Per l'elemento di navigazione, apri Photoshop e crea un documento 490 x x 58 px.
Crea un rettangolo arrotondato con circa 98 px x 58 px e inseriscici del testo. Avremo bisogno di due copie di ogni testo.
Ho applicato una piccola ombra su ogni testo, ovviamente questo è facoltativo. Puoi scegliere i tuoi colori da mettere qui.
Ora basta duplicare questo strato lungo la linea orizzontale. Applica colori e testo diversi.
Salva questo come 'Nav.jpg' nel 'IMG' cartella.
Infine, per la striscia di sfondo ho semplicemente usato uno strumento online chiamato Stripe Generator. L'output è simile a questo:
Puoi vedere le mie impostazioni qui.
Ovviamente potresti creare la striscia da solo in Photoshop, ma perché non usare invece un piccolo e semplice strumento web :-)
Ora buttiamo giù il nostro codice HTML.
menu animato lucido casadiServizisoluzionicontatto
Questo è molto pratico secondo la nostra gameplan spiegata al punto 1.
Ho aggiunto un collegamento a un file 'main.css' che deve ancora essere creato e
Ho anche aggiunto alcuni riferimenti ad alcuni file javascript. Poiché ogni elemento di navigazione è unico, ho assegnato a ciascun elemento un ID.
Avremo ancora bisogno di uno stile comune per ciascuna voce del menu, questo renderà più facile per noi gestire lo stile nelle fasi successive.
Avremo anche una casella bianca sopra ogni voce di navigazione, quando passiamo il mouse sopra il menu o una voce di menu viene selezionata, quindi avremo bisogno di un'altra
menu animato lucido casadiServizisoluzionicontatto
Salva questo come 'Index.html'. Fino a questo punto abbiamo questa come nostra pagina HTML:
Applichiamo uno stile di base alla pagina Web. Inizieremo definendo lo sfondo e aggiungendo un'area di intestazione.
body background: url (... /img/body-bkg.jpg) scroll di ripetizione; margine: 0; padding: 0; .containe r margin: 0pt auto; larghezza: 950 px; #header background: url (... /img/hdr-bkg.jpg) scroll-x scroll; altezza: 181px;
Salva questo come 'Main.css' nel 'Css' cartella.
Ora abbiamo qualcosa che assomiglia a:
Ora aggiungiamo lo stile a ciascuna voce del menu. Ricorda che vogliamo la casella bianca nella parte superiore di ciascuna voce di menu,
quindi la posizione deve essere impostata su assoluto. Aggiungi il seguente stile nel nostro file 'main.css'.
#navigation height: 60px; #home, #home div, #about, #about div, #services, #services div, #solutions, #solutions div, #contact, #contact div height: 80px; position: absolute; larghezza: 97px; float: sinistra; #home, #about, #services, #solutions, #contact background-image: url (... /img/nav.jpg); background-attachment: scroll; background-repeat: no-repeat; top: 171px; #home background-position: 0px -25px; margin-left: 6px; #about background-position: -98px -25px; margin-left: 105px; #services background-position: -196px -25px; margin-left: 204px; #solutions background-position: -294px -25px; margin-left: 303px; #contact background-position: -392px -25px; margin-left: 402px; #home div, #about div, #services div, #solutions div, #contact div background-image: url (... /img/white.jpg); background-attachment: scroll; background-repeat: no-repeat; background-position: 0px -60px;
Ora abbiamo :
Un problema, il link appare in cima alle voci del menu, rimuoviamolo con un enorme rientro del testo, eliminandolo efficacemente dallo schermo.
Aggiungi questo al nostro foglio di stile.
.pri-nav a display: block; text-decoration: none; text-trattino: -30000px;
Ora sarà simile a questo:
Abbiamo ancora un problema, vorremmo che il menu di navigazione appaia sotto l'ombra dell'intestazione. Possiamo ottenere ciò modificando il nostro stile di intestazione.
#header background: url (... /img/hdr-bkg.jpg) scroll-x scroll; altezza: 181px; position: absolute; z-index: 100; / * assicurati che l'intestazione sia sopra l'area di navigazione * / top: 0px; a sinistra: 0px; width: 100%;
Ora, dato che abbiamo usato un file .png con trasparenza, dovrebbe apparire così:
Perfezionare! Aggiungiamo il contenuto in modo che possiamo ottenere il nostro script di animazione.
.content margin-top: 160px; # content-title background: url (... /img/content.jpg) scroll no-repeat; altezza: 323px; position: absolute; width: 100%;
Per prima cosa scarica l'ultimo script jQuery e inseriscilo nel 'Js' cartella.
L'animazione è fondamentalmente una manipolazione dello stile di posizione in background.
Sfortunatamente jQuery ha un bug nell'animazione dello stile di posizione in background. Ma non preoccuparti! Alexander Farkas ha creato un plugin che risolve questo problema.
Scarica il file e rinominalo jquery-bp.js e conservarlo nel 'Js' cartella.
C'è qualcosa che dobbiamo capire prima di procedere. Cito dalla documentazione del plugin:
A causa di alcuni bug del browser (ad esempio Firefox, devi impostare la tua posizione iniziale (iniziale) in linea:
- Ovviamente puoi farlo anche con JavaScript (jQuery):
$ ('# background'). css (backgroundPosition: '10px 20px');
Va bene ora che lo capiamo, iniziamo. Imposteremo lo stile della posizione del backgroud per ogni oggetto all'inizio del nostro script.
// id per ciascuna delle voci di menu var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos ();); function setBkgPos () for (i = 0; i < nav.length; i++ ) $(nav[i]).css(backgroundPosition: i*(-98) + 'px -25px'); $(nav[i] + ' div').css( backgroundPosition: '0px -60px');
Salva questo come '' Navigation.js nel 'Js' cartella.
Ora legheremo 3 eventi a ciascuna delle voci del menu. Possiamo farlo invocando la funzione bind.
$ (document) .ready (function () setBkgPos (); // associa l'evento a funzionare qui per (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); );
Ogni volta che un utente passa sopra l'elemento di navigazione, il nostro script chiamerà la funzione 'mMouseOver'.
Quando l'utente esce dall'elemento di navigazione, il nostro script chiamerà la funzione 'mMouseOut'.
E quando l'utente fa clic sull'elemento di navigazione, il nostro script chiamerà la funzione 'mClick'.
Creiamo una "story board" per il nostro mouse sull'animazione.
Su 'Mouse Over':
Okay aggiungiamo queste funzioni sotto lo script precedente:
Accentsconagua
function _getHPos (id) for (i = 0; i < nav.length; i++ ) if ( '#' + id == nav[i] ) return i*(-98); return 0; function mMouseOver(e) $(this) // stop any animation that took place before this .stop() // step 1. change the image file and change the cursor .css(backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer') // step.2 move up the navigation item a bit .animate( backgroundPosition:'(' + _getHPos( this.id ) +'px -30px',"fast", // this section will be executed after the step.2 is done function() $(this) .children() // step. 3 move the white box down .animate(backgroundPosition:'(0px -40px)',20) // step 4. move the white box down .animate(backgroundPosition:'(0px -20px)',"fast"); $(this) // step 4. move the navigation item down .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)',"fast") // step 5. move the navigation item to its final position .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)',"fast"); // store the parent element id for later usage var parent = this; $(this) .children() // step 5. move the white box to its final position .animate( backgroundPosition:'(0px -45px)',"fast", // this section will be executed after the step.2 is done function() // step.6 change the image to its original image $(parent).css(backgroundImage: 'url(img/nav.jpg)'); ); ); Devo spiegare diverse cose qui:
Ora è fatto. Creiamo "story board" per l'evento "mouse out"
Su 'Mouse Out':
Il codice:
function mMouseOut (e) $ (this) // interrompe qualsiasi animazione che abbia avuto luogo prima di questo .stop () // step.1 sposta in giù l'elemento di navigazione .animate (backgroundPosition: '(' + _getHPos (this.id) + 'px 40px)', "fast", // questa sezione verrà eseguita dopo che il passaggio 1 è stato eseguito function () // step.2 white box move veramente fast $ (this) .children (). animate ( backgroundPosition: '(0px 70px)', "veloce"); // passaggio 3. sposta l'elemento di navigazione su $ (this) .animate (backgroundPosition: '(' + _getHPos (this.id) + 'px -40px ) ', "veloce", // questa sezione sarà eseguita dopo che il punto 3 è stato eseguito function () // step 4. sposta l'oggetto di navigazione nella sua posizione originale $ (this) .animate (backgroundPosition:' ( '+ _getHPos (this.id) +' px -25px) ', "fast", // questa sezione sarà eseguita dopo che il punto 4 è stato eseguito function () // sposta la casella bianca nella sua posizione originale, pronta per la prossima animazione $ (this) .children (). css (backgroundPosition: '0px -60px');))) .css (backgroundImage: 'url (img / nav.jpg)', cursore: "); Quasi lì! Ora dobbiamo gestire quando un utente fa clic sull'elemento di navigazione.
function mClick (e) location.href = this.id;
Ovviamente puoi indicare dovunque ti trovi in questa posizione. Questa particolare funzione indirizzerà il tuo browser a [current_url] / [navigation_id] così per 'home' sarà '[current_url] / home', per 'about' sarà '[current_url] / about' e così via.
Certo, abbiamo bisogno di un indicatore quando siamo già su una pagina. Per questo abbiamo bisogno di un'altra classe CSS.
Chiameremo quella classe 'attiva'. Ad esempio, se ora siamo a "casa", il file HTML diventerà:
casa
O se siamo a "circa" diventerà:
di
e così via.
Quindi ora l'idea è che dopo che una pagina è stata caricata, il nostro script controllerà per vedere quale elemento di navigazione ha la classe 'attiva'.
Applichiamo quindi un effetto di animazione. E dobbiamo assicurarci che ogni altro evento ('mouseover', 'mouseout', 'click') non causerà alcun effetto di animazione su questo oggetto 'attivo'.
Per questo abbiamo bisogno di cambiare il nostro codice un po '. Ecco il codice completo dopo le modifiche:
var site_url = "; var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos (); per (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); for ( i = 0; i < nav.length; i++ ) // element with 'active' class will start animation if ( $(nav[i]).get(0).className.indexOf('active') >= 0) $ (nav [i]) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px -30px', "fast", function () $ (this). children () .animate (backgroundPosition: '(0px -40px)', 20) .animate (backgroundPosition: '(0px -20px)', "fast"); $ (this) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px 50px)', "fast") .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px 25px)', "veloce "); var parent = this; $ (this) .children () .animate (backgroundPosition: '(0px -45px)'," fast ", function () $ (parent) .animate (backgroundPosition: ' ('+ _getHPos (parent.id) +' px 25px) ', "fast"); $ (parent) .css (backgroundImage:' url (img / nav.jpg) '););) ; rompere; ); E con questo abbiamo tutto il nostro piccolo menu.
Scarica una ZIP del sito
Visualizza una demo!
