The first half of the project was writing the CSS for the menu button itself. The button consists of two lines created using a CSS class, and the ‘after’ pseudo class to create a plus button that will later turn into an X. The other buttons that expand out on click are always visible, but positioned absolutely behind the initial plus button and only expand out when called from a JavaScript click event. The animations were written in CSS as well, using the addition class ‘open’.

CSS declarations for ‘open’ appended to the button group was used to tell the hidden buttons where to move to relative to their initial position and given a transition property to control easing of animation.

Font-awesome was used for the additional icons of the hidden buttons.

A simple, 3-line script was written using jQuery to control the click event of the button. The function defined a click event for the ‘btn-trigger’ class (referring to the plus button on top) and searches up the DOM to find the button group class using the ‘.closest’ method. The function then targets that class and toggles ON the ‘open’ class. This function works in reverse to allow for closing of the menu by toggling OFF the ‘open’ class.