grace-menu v1.0.5
Grace Menu
A elegant and mobile support menu. The name is a tribute to Grace Hopper.
Implementing Grace Menu
Add the Grace Menu style:
@import 'node_modules/grace-menu/dist/css/bundle';
Add Grace Menu script:
require('grace-menu')
Create the parent-element in wich will be the Grace Menu (i.e
.grace-menu-parent
- this name is optional). Stylize this element the way you want.
Inside this parent-element, create a div with class
grace-menu-container
Now, you can create the
.grace-menu-body
component. Here will be the code to be inserted in Grace Menu. This element must be sibling of.grace-menu-container
and everything inside this element can be stylized. Use your creativity!
The last step is create the button that open and close the Grace Menu. In this button, put the class
grace-menu-toggler
. This button will toggle the menu visibility
Options:
If you want specify a button just to open or just to close menu, use the classes grace-menu-opener
and grace-menu-closer
You're welcome to make changes to project (animations and styling), but is necessary include the files above so satisfatory operation.
Functional tips
Here comes a list of elements you will need to make the Grace Menu works
.grace-menu-container
The container where grace-menu will be inserted.grace-menu-body
The element who will be inserted inside the grace menu..grace-menu-toggler
The element who will toggle the grace menu's exibition.grace-menu-opener
The element who will open the grace menu.grace-menu-closer
The element who will close the grace menu.grace-menu-body
This element will be putted inside the grace menu. Use this element to insert title, menu items, text or whatever you want (tags html).
Styling tips
In the grace menu you can stilyze two core elements: .grace-menu
and .grace-menu-background
. The other elements (those who are in the .grace-menu-body) you can style in the way you want based in class you selected in your html