logo

© Copyright 2018. All rights reserved.

Menu side simple

Menu live example

Back to menu documentation

Usage

<header class="side-menu-header" data-menu-anima="default">
    <div class="navbar-header">
        <a class="hamburger-button" data-menu-anima="fade-left">
            <i class="fa fa-bars"></i>
        </a>
        <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" /></a>
    </div>
    <div class="side-menu-fixed">
        <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-sm" type="submit">GO</button>
                    </span>
                </div>
            </form>
        </div>
        <aside class="sidebar mi-menu box-middle-container">
            <nav class="sidebar-nav box-middle">
                <ul class="side-menu ms-simple">
                    <li>
                        <a href="#">
                            <i class="fa fa-home"></i>
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-book"></i>
                            Portfolio
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-info"></i>
                            About
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-share"></i>
                            Services
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-users"></i>
                            Team
                        </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 2018. All rights reserved. </p>
        </div>
    </div>
</header>