Documentation

Getting started

This documentation page assumes you have some knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

If you're new to using mburger, please grab a copy of the mburger script and try the tutorial.

Styling

By default, the hamburger icon adopts to its environment pretty good, the bars scale to fit and inherit their color for the parent element. The hamburger icon is pretty easy to customize too, just override some of the CSS values and variables.

Available CSS values and variables

Variables Datatype Default value Description
Values
background-color CSS value transparent The background-color for the button.
border CSS value none Add a border around the button.
border-radius CSS value 0 Gives the button rounded corners, use 100% to turn the square into a circle.
color CSS value inherit The color for the bars.
height CSS value 60px The height for the button.
width CSS value 60px The width for the button.
Variables
--mb-button-size CSS value 60px Width and height for the button.
--mb-bar-width float 0.6 Width for the bars as a float (0 = 0%, 1 = 100%), relative to the button (the bars are horizontally centered).
--mb-bar-height CSS value 4px Height for the bars (the bars are vertically centered).
--mb-bar-spacing CSS value 10px Distance between bars (approximately).
--mb-animate-timeout CSS value 0.4s Timeout before starting the animation, ensures the animation starts after the menu is fully opened.