logo

© Copyright 2016. All rights reserved.

Menu component

Side menu hamburger button

Usage

<header class="demo fixed-top">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar navbar-main">
            <div class="container">
                <div class="navbar-header">
                    <a class="hamburger-button" data-menu-anima="fade-left" style="display:blocK">
                        <i class="fa fa-bars"></i>
                    </a>
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="side-menu-fixed hamburger-menu">
        <div class="top-area">
            <a class="brand" href="index.html">
                <img src="images/logo.png" alt="logo">
            </a>
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">GO</button>
                    </span>
                </div>
            </form>
        </div>
        <aside class="sidebar mi-menu scroll-content">
            <nav class="sidebar-nav">
                <ul class="side-menu">
                    <li>
                        <a href="#">
                            <span class="sidebar-nav-item-icon fa fa-home"></span>
                            <span class="sidebar-nav-item">Home</span>
                        </a>
                    </li>
                    <li class="panel-item">
                        <span>Another lateral Panel<span class="fa arrow"></span></span>
                        <div class="collapse panel bg-menu">
                            <ul class="collapse" style="margin-top:107px;">
                                <li><a href="#">Latest news</a></li>
                                <li><a href="#">Some features</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </nav>
        </aside>
        <div class="bottom-area">
            <div class="social-group">
                <a target="_blank" href="#"><i class="fa fa-facebook-square"></i></a>
                <a target="_blank" href="#"><i class="fa fa-twitter-square"></i></a>
                <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
                <a target="_blank" href="#"><i class="fa fa-youtube-square"></i></a>
            </div>
            <p>© Copyright 2016. All rights reserved. </p>
        </div>
    </div>
</header>

Main settings

Name Type Description
HTML initialization Mixed You can set a hamburger menu in two steps:
1 ) Add button <a class="hamburger-button" data-menu-anima="fade-left"><i class="fa fa-bars"></i></a>
2 ) Add to menu the class hamburger-menu.
Example:
<header>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar navbar-main">
            <a class="hamburger-button" data-menu-anima="fade-left">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </div>
    <div class="side-menu-fixed hamburger-menu">
        ...
    </div>
</header> 
Menu open animation HTML Add attribute data-menu-anima="animation-name" to hamburger menu object. Example <a class="hamburger-button" data-menu-anima="fade-left"> ... </a> Animations list available on animation page.
Plugin dependency

This feature require Animations component (../css/animations.css)

Animations documentation here

Menu side documentation

Menu side hamburger is part of menu side component. Complete documentation here