Menu Burger
An animated menu bar can be created using the data-navi="menu-burger" attribute.
There are currently 3 different menu-burger designs which are the balance,
equal and dots. The following are the different types:
Balance
<div class="balance c-sea-blue" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
</div>
Equal
<div class="equal c-sea-blue" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
</div>
Dots
<div class="dots c-sea-blue" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
</div>
The image below is a representaion of what happens when the "open" class is applied on the menu burger.
regardless of the menu burger type.
Dots (class of "open" was added on the menu-burger parent)
<div class="dots open c-sea-blue" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
</div>
The switch menu-burger can also contain items within its internal space. This can be achieved by adding an element
with a menu-box class within the menu burger. The element will only be visible when the menu box has
a class of open just as shown below:
Dots (class of "open" was added on the menu-burger parent)
<div class="equal open c-sea-blue" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
<div class="menu-box pxs-4 bd-1">
<span>Item 1</span><br>
<span>Item 2</span><br>
<span>Item 3</span><br>
</div>
</div>
The postion of the menu box above can be redefined by using the class selector
[data-navi="menu-burger"] .menu-box. A toggle effect is shown below:
Click on the switch to toggle the switch
<div class="equal open c-sea-blue toggled relative" data-navi="menu-burger">
<div class="bar-top bar-small"></div>
<div class="bar-mid"></div>
<div class="bar-btm bar-small"></div>
<div class="menu-box pxs-4 bd-1">
<span>Item 1</span><br>
<span>Item 2</span><br>
<span>Item 3</span><br>
</div>
</div>
<script>
$('.toggled[data-navi="menu-burger"]').click(function(){
$(this).toggleAttr("open")
}))
</script>
Without defining the position of the menu-box, the menu box item may seem to scale in rather than slide in.
The menu-box can be postioned to slide down from left to right tl-r or from right to left
tr-l. These is done by applying utility classes tr-l or tl-r to the menu-box
element itself. Example is shown below:
Yeah! Just a bit of css will help align our menu box properly
The style below was applied to the first and second menu switches above
<style>
.customized [data-navi="menu-burger"] .menu-box.tr-l{
right: 1.5em;
}
.customized [data-navi="menu-burger"] .menu-box.tl-r{
left: 1.5em;
}
</style>