Vai al contenuto

Prototipo di “Bubble menu” animato.

Scritto da:

carlopeluso

Il “Bubble Menù” (menù a bolle) permette di visualizzare voci di menu a partire da un singolo bottone (un’estensione del floating action button per gli amanti del Material Design), un ottimo modo per “esplodere” o ramificare delle sotto-voci di menu a partire da una singola voce. Ne ho realizzato un esempio:

E’ stato creato con LESS, animazioni CSS, e un semplice mockup in HTML.

Ho voluto animare il bottone che mostra varie tipologie di mezzi di trasporto a partire dall’icona di una mappa. Le sotto-voci hanno un’entrata animata secondo la curva di bezier (che gli da l’effetto elastico per poi stabilirsi sulla posizione voluta). Avendo voluto seguire un posizionamento pentagonale, ho calcolato le posizioni delle icone tramite questo strumento online, che dato un centro di coordinate (0,0) calcola le coordinate x ed y di ogni vertice, passate alla funzione translate.

TODO: in futuro il bottone avrà la funzione di mouse hover e si aprirà solo al passaggio del mouse sul bottone arancione.

Articolo precedente

Layout in stile "Masonry Grid" usando la proprietà css-column.

Articolo successivo

Scroll evoluto con la proprietà CSS scroll-snap.

Unisciti alla discussione

Lascia un commento

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