Hamburgers are great replacement for menu icons. In material design, hamburgers can be used to trigger various navigation components. In this post, i will show how to add hamburgers to your JavaFX application. I have made a thorough tutorial for JFXHamburger Transition.
JFoenix library provides (Read about setting up material design library for JavaFX) JFXHamburger class for implementing Hamburger. It can be dragged and dropped using Scene Builder as you can see from above video.
JFXHamburger without transition support is merely a 3 parallel lines. But when you associate it with some cool transition, it will become awesome. So let's have a look in to the transitions.
This transition creates a back arrow from the 3 parrallel lines (Hamburger). This can be created by passing the created Hamburger object as parameter to the HamburgerBackArrowBasicTransition class.
The animation is triggered using play() method. The state of the transition ( either arrow or hamburger) is toggled via setRate() method.
As you can see, at first the trasition rate is set to -1 which is the hamburger. When the user clicks on the hamburger, it is then changed by multiplying with -1, ie to 1. Now the Hamburger will turn into a arrow. For further clicks on the hamburger, it will iterate between -1 and 1.
This Transition Converts the hamburger to a close form. Usage of this one is very similar to the above except the class used.
This transition converts the hamburger to a close form like before, with a cool transition.
This transition converts the hamburger to a forward arrow.