Friday Fun XXXVI

Aloha,

back from my vacation I've found a nice little menu control on the web and thought that might be a good candidate for my next Friday Fun component.
It's not really something special and it only took me last sunday morning to create it but it's fun :)
To give you an idea here are two screenshots that show the menu in open and in closed state...

So it's a simple button and when you press this button it's outer ring will grow to the menu which can contain up to 4 menu items.
The best usage for this control might be on a mobile application where you can put it on the bottom. The menu itself is translucent so that you can see the background shining through.
For the icons I make use of the really nice icon library called Ikonli of my colleague and friend Andres Almiray. The Ikonli library contains a lot of different icons but I only added the Material and MaterialDesign icons to the control. So if you would like to use for example the Fontawesome icons you need to add the appropriate dependency to your build.gradle e.g.

compile 'org.kordamp.ikonli:ikonli-fontawesome-pack:1.6.0'

Please find more information about the supported icon packs here.
The following code snippet will show you how to set the menu up...

FunMenu funMenu = new FunMenu();

funMenu.setItem1IconCode(MaterialDesign.MDI_CALENDAR);
funMenu.setItem2IconCode(Material.GROUP);
funMenu.setItem3IconCode(Material.MAIL);
funMenu.setItem4IconCode(Material.FAVORITE);

funMenu.setOnItem1MousePressed(e -> System.out.println("Icon 1 pressed"));
funMenu.setOnItem2MousePressed(e -> System.out.println("Icon 2 pressed"));
funMenu.setOnItem3MousePressed(e -> System.out.println("Icon 3 pressed"));
funMenu.setOnItem4MousePressed(e -> System.out.println("Icon 4 pressed"));

As you can see it's really easy. When clicking an item the menu will automatically go back to the closed state.

You can style the menu by using CSS, here is the default CSS file so that you know what you have to override in your custom CSS file. (to be honest I was to lazy to create styleable properties for the parameters...sorry :) )...

.menu {
    -fx-background-radius: 1024;
    -fx-background-color : #ffcb4d65;
}

.menu-item {
    -fx-background-radius: 1024;
    -fx-background-color : transparent;
}

.menu-item-icon {
    -fx-icon-color: white;
}

.rotating-button {
    -fx-background-radius: 1024;
    -fx-background-insets: 0;
    -fx-background-color : #ffcb4d;
}

.cross {
    -fx-scale-shape     : true;
    -fx-shape           : "M 29 23 L 29 29 L 23 29 C 21.3431 29 20 30.3431 20 32 

                           C 20 33.6569 21.3431 35 23 35 L 29 35 L 29 41 

                           C 29 42.6569 30.3431 44 32 44 C 33.6569 44 35 42.6569 35 41 

                           L 35 35 L 41 35 C 42.6569 35 44 33.6569 44 32 

                           C 44 30.3431 42.6569 29 41 29 L 35 29 L 35 23 

                           C 35 21.3431 33.6569 20 32 20 

                           C 30.3431 20 29 21.3431 29 23 Z";
    -fx-background-color: white;
}

Here is a little video that shows the menu in action...



And if you are interested in the source code you can find it on github as always.

In principle that's all for today...so keep coding... :)