Prototipo di “Bubble menu” animato.

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.