logo

© Copyright 2018. All rights reserved.

Side menu

Side menu documentation and live example

Variants

Classic Lateral Simple

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="logo.png" alt="logo" /></a>
    </div>
    <div class="side-menu-fixed">
        <div class="top-area">
            <a class="brand" href="index.html">
                <img src="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">
            <nav class="sidebar-nav scroll-content">
                <ul class="side-menu">
                    <li>
                        <a href="#">
                            <i class="fa fa-home"></i>
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">Dropdown <span class="fa arrow"></span></a>
                        <ul class="collapse">
                            <li><a href="#">item 1.1</a></li>
                            <li><a href="#">item 1.2</a></li>
                            <li>
                                <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                                <ul class="collapse">
                                    <li><a href="#">item 1.3.1</a></li>
                                    <li><a href="#">item 1.3.2</a></li>
                                    <li><a href="#">item 1.3.3</a></li>
                                    <li><a href="#">item 1.3.4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">item 1.4</a></li>
                        </ul>
                    </li>
                    <li class="panel-item">
                        <span>Menu Lateral Panel<span class="fa arrow"></span></span>
                        <div class="collapse panel bg-menu" style="background-image:url(../../images/bg-gradient-1.jpg)">
                            <ul class="collapse" style="margin-top:133px;">
                                <li><a href="#">item 1.1</a></li>
                                <li><a href="#">item 1.2</a></li>
                                <li>
                                    <a href="#">Menu 1.3 <span class="fa plus-times"></span></a>
                                    <ul class="collapse">
                                        <li><a href="#">item 1.3.1</a></li>
                                        <li><a href="#">item 1.3.2</a></li>
                                        <li><a href="#">item 1.3.3</a></li>
                                        <li><a href="#">item 1.3.4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">item 1.4</a></li>
                            </ul>
                        </div>
                    </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">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                 <img src="../../images/en.png" />
             </a>
             <span class="space"></span>
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                 <img src="../../images/it.png" />
             </a>
             <hr class="space xs" />
            <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>

Installation

<script src='../HTWF/scripts/jquery.slimscroll.min.js'></script>
<script src='../HTWF/scripts/metis.menu.min.j'></script>

Main settings

Name Type Description
Page container CSS class Add class side-menu-container to body object. Example: <body class="side-menu-container"> ... </body>.
Icons Mixed To add a icon to a menu item insert <span class="sidebar-nav-item-icon fa fa-icon-name"></span><span class="sidebar-nav-item"> ... </span> and replace fa fa-icon-name with class icon you want. You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.
Font Awesome icons list Icons Mind icons list
Example:
<ul class="side-menu">
    ...
    <li>
        <a href="#">
            <span class="sidebar-nav-item-icon fa fa-home"></span>
            <span class="sidebar-nav-item">Menu item text</span>
        </a>
    </li>
    ...
</ul>
Panel item HTML To add a panel menu item insert this code into ul <ul class="side-menu"> ... </ul> obejct.
Example:
<ul class="side-menu">
    ...
    <li class="panel-item">
        <span>Lateral Panel<span class="fa arrow"></span></span>
        <div class="collapse panel bg-menu">
            ...
        </div>
    </li>
    ...
</ul>
Panel item background image HTML To add a background image to panel item add class bg-menu to menu item and add style style="background-image:url(image.jpg)"
Example:
<ul class="side-menu">
    ...
    <li class="panel-item bg-menu" style="background-image:url(image.jpg)">
        <span>Lateral Panel<span class="fa arrow"></span></span>
        <div class="collapse panel bg-menu">
            ...
        </div>
    </li>
    ...
</ul>
Lateral dropdown CSS class Add class side-menu-lateral to header object. Example: <header class="demo side-menu-header side-menu-lateral"> ... </header>.
Scroll box CSS class Add class scroll-content to nav object. Example: <aside class="sidebar scroll-content"> ... </aside>.
Plugin dependency

This feature require Slim Scroll Plugin (../HTWF/scripts/jquery.slimscroll.min.js)

Slim Scroll documentation here

Menu documentation

Menu side is part of menu component. Complete documentation here