La funzione 'Dashboard' su un Mac sembra fantastica, e il menu che ti permette di aggiungere / rimuovere i widget è una funzionalità ben progettata. Un effetto simile può aggiungere un nuovo livello di funzionalità a un sito Web, fornendo un semplice menu a scorrimento nella parte superiore di una pagina. Questo tutorial ti guiderà attraverso il processo dall'inizio alla fine.
Prima di iniziare, potresti provare la demo o scaricare il codice sorgente completo qui.
A partire da Photoshop
1) Crea uno sfondo per ripetere la griglia.
Inizia creando un'immagine di 56 (W) x 64 (H) px in Photoshop. Quindi crea una sfumatura a 3 colori che va da # 111111 a # 313131 e infine torna a # 111111. Dovrebbe sembrare come questo.
Ora è il momento di aggiungere le fossette.
Seleziona lo strumento pennello e scegli un pennello quadrato di 2 px e # 000000. Crea un nuovo livello e assicurati che sia selezionato. Inizia facendo un punto ovunque su questo nuovo livello. Ora sposta quel punto 3px dalla parte superiore dell'immagine e 1px dal lato sinistro. È quindi possibile duplicare questo livello 11 volte (in modo da avere una riga di 12 punti in totale) e ogni volta spostare il punto verso il basso di 5 px.
Ora puoi unire tutti questi livelli (ad eccezione dello sfondo). Duplica questa nuova riga di punti 6 volte e ogni volta sposta la riga a destra di 8 pixel.
Usando la prima riga creata, duplicala ancora una volta e spostala a 4 pixel a destra e 2 pixel in basso. Questa nuova riga può anche essere duplicata 6 volte e ciascuna spostata a destra di 8 px. Ora dovresti avere lo sfondo della dashboard.
2) Trova un pacchetto di icone come quello usato in questo tutorial. Il mio è stato trovato su: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/
3) Creare un'area di testo per i suggerimenti dell'icona.
Crea una nuova immagine 292px (W) x 34px (H) e crea un nuovo livello. Elimina il livello di sfondo. Ora disegnate nuovamente un tracciato rettangolo arrotondato proprio come abbiamo fatto per l'icona, tuttavia questa volta vuole essere 290px (W) x 32px (H) e renderlo di nuovo una selezione riempiendolo con un bianco. Imposta il riempimento su questo livello al 10%. Ora tutto ciò che resta da fare è aggiungere un 1px bianco attorno ad esso lasciandoti questo. (Ho messo uno sfondo nero nell'esempio che non avresti, solo così puoi vedere come dovrebbe essere)
Ora siamo pronti per inserire HTML e CSS e farlo!
HTML e CSS
Per creare questo esempio, avrai bisogno dell'ultima versione di J-Query.
La prima cosa da fare è preparare l'HTML. Avremo bisogno dei tag DIV, uno come contenitore generale di tutto, che garantirà che il dashboard si estenda per tutta la larghezza della finestra del browser. L'altro fungerà da contenitore per le icone, mantenendole contenute entro una larghezza di 945 px. Questo per garantire che siano tutti visibili sulle risoluzioni dello schermo più comuni.
A potete vedere da questo ho allegato un foglio di stile chiamato index.css, ho aggiunto alcuni stili su quel foglio di stile per garantire che questi DIV abbiano l'aspetto e il rendimento che desidero.
L'immagine di sfondo ha una ripetizione x su di essa per consentire all'immagine di estendersi per tutta la larghezza della finestra del browser. L'altezza dovrebbe essere della stessa altezza del gratingRepeat.png creato in precedenza.
Il contenitore avanzato ha una larghezza di 945px su di esso per consentire anche alle più piccole risoluzioni dello schermo di visualizzare completamente il dashboard. Io disegno sempre i miei siti web a un minimo di 1024 x 768 perché questo tende ad essere la risoluzione dello schermo più comune al momento della scrittura. Inoltre, avendo margine: auto impostato sul container, il browser centrerà le icone indipendentemente dalla larghezza del browser. Perché ciò funzioni, l'elemento deve avere una larghezza impostata.
La prossima cosa che dobbiamo aggiungere è l'UL, che manterrà tutte le nostre icone.
Come puoi vedere, a ogni LI è associata una classe diversa. Questo è così che possiamo assegnare diversi attributi a ciascuna icona. Assicurati di assegnare un nome alle classi affinché corrispondano all'icona in modo che tu possa capire dove mettere tutto.
Per prima cosa passeremo attraverso le aree principali dello styling su UL e LI.
In primo luogo, lo stile lista UL: nessuno toglie punti elenco indesiderati. Ho anche messo una spaziatura: 0 e margine: 0 qui, questo dovrebbe fermare qualsiasi problema di compatibilità del browser ponendo cose in aree inaspettate. Ho inserito questi attributi in UL sul sito perché utilizzeremo un altro UL in un secondo momento e anche queste impostazioni verranno applicate.
Sulla lista avanzata ho scelto di posizionare le icone usando il metodo float. (Trovo che questo mi dia il massimo controllo sul posizionamento.) La larghezza è importante quando si fa galleggiare per garantire un posizionamento preciso. Ho scelto 645px perché dobbiamo lasciare spazio per l'area dei suggerimenti, che verrà aggiunto in seguito.
Al LI di questo UL è stata quindi data un'altezza e una larghezza (stessa altezza e larghezza delle icone) e poi fluttuato a sinistra. In questo modo la LI viene posizionata su una linea orizzontale sovrascrivendo l'allineamento verticale predefinito di UL. Il margine sinistro qui è posizionato su ogni singola LI, il che significa che ci sarà uno spazio di 15px tra ogni icona.
La prossima sezione di CSS deve essere ripetuta e leggermente modificata per ogni classe di icone. Includerò un esempio di guida. È molto semplice, imposta lo sfondo su icon.png e poi imposta lo sfondo per lo stato del passaggio del mouse dell'icona. Ciò significa che quando l'icona viene posizionata sopra (in tutti i browser eccetto IE6) l'icona cambierà colore.
Assicurati di replicare questa modifica della classe per ogni icona che scegli di utilizzare. Assicurati di cambiare anche l'immagine che usano come sfondo.
Infine, aggiungeremo l'area Tip e lo modificheremo. L'HTML è molto simile a quello del set di icone. Usando UL e LI. Tuttavia, usiamo solo una LI con una serie di DIV CLASSE diverse al suo interno.
Mentre questo può sembrare un pezzo scoraggiante di codice, in realtà è molto semplice. Ogni DIV si riferisce a un'icona e utilizzando CSS solo uno o nessun DIV sarà visibile alla volta. Assicurati di assegnare a ogni DIV una classe separata relativa all'icona che verrà evidenziata. Questo sarà necessario nel passaggio successivo.
Per iniziare, ho diffuso l'UL giusto e gli ho dato una larghezza. Questo posizionerà l'area della punta a destra delle icone, poiché la larghezza data all'icona UL consente a entrambi gli elementi di sedersi sulla stessa linea.
Ho quindi dato alla classe uno sfondo, caricando in textArea.png creato in precedenza. Questo è stato dato in altezza per renderlo visibile.
Devo visualizzare tutte le classi DIV: nessuna significa che ogni DIV all'interno della LI verrà inizialmente nascosto. Useremo javascript per abilitarli in seguito.
Ogni DIV è impostato per avere la stessa altezza e larghezza di textArea.png, in questo modo possiamo posizionare il testo in modo preciso. Allineamento del testo: il centro sposta tutto il testo al centro del DIV e quindi dell'area di testo. Infine, l'altezza della linea: 35px; assicura che il testo sia centrato verticalmente. Questo valore sarà diverso a seconda della dimensione del font e della scelta della font-family, potrebbe essere necessario un po 'di tentativi ed errori.
Infine, avremo bisogno di un pulsante per fare in modo che la dashboard sia visibile. Al di fuori dei due DIV abbiamo creato inserire un collegamento e dargli una classe di anticipoMenuBtn. Questo sarà necessario quando lo chiamerai all'interno del javascript in seguito.
Se lo carichi in un browser, potrai vedere la dashboard in alto e le icone cambieranno colore quando metti il tuo mouse sopra di loro, molto eccitante!
Ora è il momento di aggiungere la funzionalità javascript. Assicurati di inserire tutti i javascript successivi all'interno dei tag HEAD nella parte superiore della pagina.
Questo primo blocco di codice alterna la visibilità del dashboard quando si fa clic sul pulsante advanceMenuBtn. Per assicurarti che il dashboard inizi a essere invisibile, devi ora posizionare uno schermo: nessuno sul DIV advanceMenu nel CSS.
La seconda riga di questo blocco imposta la funzione in modo che sia pronta per essere eseguita quando la pagina è pronta e caricata, il che significa che funzionerà ogni volta che la pagina sarà visibile. La riga successiva si focalizza su advanceMenuBtn e imposta un'altra funzione da eseguire quando si fa clic su quel pulsante. Quando si usa JQuery per mettere a fuoco gli elementi, la sintassi utilizzata è molto simile a quella dei CSS. In primo luogo dichiari il tipo di elemento con 'a' e quindi dichiari la classe usando '.advanceMenuBtn.'
La riga successiva chiama quindi la dashboard e dichiara quale funzione deve essere eseguita e indica una variabile che indica come eseguire? slideToggle è una funzione JQuery incorporata nel framework e con variabili di velocità diverse ad essa collegate. Puoi scegliere tra lento, normale o veloce. La dashboard ora apparirà nascosta durante la visualizzazione della pagina. Cliccando sul link apparirà la dashboard.
L'ultimo pezzo di javscript farà sì che l'area di testo mostri la mancia quando l'utente passa sopra un'icona. Ancora una volta questo script è molto ripetitivo, quindi ti mostrerò un esempio che deve essere leggermente modificato per le altre icone.
Questo script è di nuovo molto semplice e molto efficace. Ancora una volta la funzione è pronta per essere utilizzata quando la pagina viene caricata, come indicato dalla terza riga. La riga successiva quindi chiama l'icona con una classe di informazioni e imposta una funzione da eseguire quando l'utente posiziona il mouse su di essa.
Successivamente la classe che visualizza la parte di testo associata a quell'icona viene focalizzata e detta a ".show" quando ciò accade. Questa funzione deve quindi essere invertita in modo che vengano visualizzati altri frammenti di testo quando vengono posizionate altre icone.
Le ultime righe eseguono esattamente l'inverso della prima funzione cambiando "mouseover" in "mouseout" e ".show" in ".hide"
Queste due funzioni devono quindi essere ripetute per ogni icona cambiando le classi che vengono chiamate per coordinarsi con l'icona in questione.
Ora dovremmo essere pronti a vederlo funzionare integralmente!
Guarda la demo e scarica qui il codice sorgente completo
Ben fatto e spero che tu possa metterlo a frutto.
Si noti che a causa di IE6 non capendo la funzione: hover questo esempio sarà di uso molto limitato in quel particolare browser. Tuttavia ci sono correzioni che possono essere trovate usando javascript.
Prosems - Ecommerce Web Design e soluzioni di sviluppo