Let's have fun
Let's have fun
Menu
Info
This framework's menu is a vertical navigation menu that collapses at the specified breakpoint. The menu can be placed anywhere on the screen for additional navigation. It has 4 breakpoints. The breakpoints are: sm(smartphone), md(tabled), lg(laptop/PC) and xl(PC).
Menu
menu
menu-toggle
active
has-child
sm
md
lg
xl
<button class="menu-toggle md"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button>
<nav class="menu md">
<ul>
<li><a class="active" href="">Home</a></li>
<li><a class="has-child" href="javascript:void(0);">Dropdown</a>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
</ul>
</nav>
Menu colors
Black
menu-black
<button class="menu-toggle md menu-black"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-black">
White
menu-white
<button class="menu-toggle md menu-white"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-white">
Gray
menu-gray
<button class="menu-toggle md menu-gray"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-gray">
Blue
menu-blue
<button class="menu-toggle md menu-blue"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-blue">
Green
menu-green
<button class="menu-toggle md menu-green"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-green">
Teal
menu-teal
<button class="menu-toggle md menu-teal"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-teal">
Red
menu-red
<button class="menu-toggle md menu-red"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-red">
Yellow
menu-yellow
<button class="menu-toggle md menu-yellow"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-yellow">
Orange
menu-orange
<button class="menu-toggle md menu-orange"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-orange">
Brown
menu-brown
<button class="menu-toggle md menu-brown"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-brown">
Purple
menu-purple
<button class="menu-toggle md menu-purple"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-purple">
Pink
menu-pink
<button class="menu-toggle md menu-pink"><i class="icon icon-menu"></i> <span class="float-right">Menu</span></button> <nav class="menu md menu-pink">