Tra ieri e oggi, lo staff Skimbu.it ha deciso di dedicare un grande spazio sul blog all’iPad, la magica tavoletta di Apple in vendita in Italia da ieri. Grazie ad Alberto e a Francesco, che hanno ricevuto i rispettivi dispositivi al day one, viene offerta una copertura completa sul device made in Cupertino: dalle prime impressioni a ciò che non sapete sull’iPad a molto altro ancora.

Tuttavia, nonostante tutto questo trafficare, non ci siamo dimenticati del nostro settimanale appuntamento con il PSD della settimana. Per l’undicesimo appuntamento, ho deciso di proporvi il progetto del magnifico share button che vedete nell’immagine in apertura.

Dopo aver scaricato il file tramite il bottone posto qui sotto, troverete una cartella con al suo interno il PSD della settimana. Ovviamente sarà dovere vostro poi ritagliare ed esportare le immagini e scrivere l’eventuale codice HTML per l’utilizzo che ne volete fare.

Struttura

La struttura di questo file è abbastanza complessa, tuttavia, una volta scaricato il file, non vi sarà difficile raccapezzarvi all’interno dei diversi livelli e gruppi. Ecco i livelli in cui si struttura:

• Button, un gruppo contenente tutti i livelli inerenti al bottone vero e proprio del menu a scorrimento. In particolare all’interno troviamo il gruppo icon (che contiene i livelli della parte sinistra del pulsante, ovvero quella con il cerchio e la freccia), il livello del testo e il gruppo bg (contente i livelli che vanno a formare lo sfondo del bottone)
• List, un gruppo che contiene i livelli della lista vera e propria, ovvero della parte che compare quando il bottone è cliccato. Se toglierete dalla vista tale gruppo vi si presenterà il bottone non cliccato. Esso si divide in cinque gruppi item (i gruppi contenenti i livelli degli elementi della lista. In particolare uno di essi è denominato active e uno hover e sono rispettivamente i gruppi contenenti i livelli dell’elemento cliccato e di quello selezionato) e bg (un gruppo contenente i livelli dello sfondo della lista)
• Background il livello dello sfondo

Utilizzi

Il primo utilizzo che viene in mente alla vista del progetto è, ovviamente, di farne un pulsante per condividere qualcosa, magari i post in un tema wordpress.

Malgrado questo impatto, si può decidere di utilizzare il progetto come layout di una qualsiasi lista o, con le opportune modifiche, si può anche utilizzarlo come un bottone di qualsivoglia genere, e creare un classico dropdown menu.

Per programmare al meglio il codice per realizzare il progetto, qualsiasi utilizzo abbiate deciso di farne, vi consiglio di seguire questa guida, che ho creato tempo fa proprio per illustrare come creare un menu a scomparsa con jQuery.