© Copyright 2018. All rights reserved.
© Copyright 2018. All rights reserved.
Side menu documentation and live example
<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>
<script src='../HTWF/scripts/jquery.slimscroll.min.js'></script> <script src='../HTWF/scripts/metis.menu.min.j'></script>
| 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 dependencyThis feature require Slim Scroll Plugin ( |
Menu side is part of menu component. Complete documentation here