Inner menus documentation with live examples
<aside class="sidebar mi-menu">
<nav class="sidebar-nav">
<ul class="side-menu">
<li>
<a href="#">
<i class="fa fa-info"></i>
Introduction
</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">
<i class="fa fa-star"></i>
Features
<span class="fa arrow"></span>
</a>
<ul class="collapse">
<li><a href="#">item 1.1</a></li>
<li> <a href="#">Menu 1.3</a> </li>
</ul>
</li>
</ul>
</nav>
</aside>
<aside class="sidebar mi-menu">
<nav class="sidebar-nav scroll-content" data-height="159">
<ul class="side-menu">
<li>
<a href="#">
Introduction
<span class="fa arrow"></span>
</a>
<ul class="collapse">
<li>
<a href="#">
<span class="sidebar-nav-item-icon fa fa-code-fork"></span>
The first years
</a>
</li>
<li>
<a href="#">
<span class="sidebar-nav-item-icon fa fa-star"></span>
General informations
</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
</aside>
<div class="col-md-6">
<h5>Scroll spy</h5>
<div class="well scroll-content bs-demo-menu" data-height="176" data-spy="scroll" data-target="#menu-demo-spy" data-offset="50">
<div id="chapter-A">
<h5>Chapter A</h5>
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
</div>
<div id="chapter-B">
<h5>Chapter B</h5>
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip.
</div>
<div id="chapter-C">
<h5>Chapter C</h5>
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div id="chapter-D">
<h5>Chapter D</h5>
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="col-md-6">
<aside id="menu-demo-spy" class="sidebar mi-menu scroll-spy-menu">
<nav class="sidebar-nav">
<ul class="side-menu">
<li class="active">
<a href="#chapter-A">Chapter A</a>
</li>
<li>
<a href="#chapter-B">Chapter B</a>
</li>
<li>
<a href="#chapter-C">Chapter C</a>
</li>
<li>
<a href="#chapter-D">Chapter D</a>
</li>
</ul>
</nav>
</aside>
</div>
| Name | Type | Description |
|---|---|---|
| Scroll box | CSS class |
Add class scroll-content and attribute data-height="123" to nav object, replace 123 with height in px.
Example: <aside><nav class="scroll-content" data-height="176"></nav></aside>.
Plugin dependencyThis feature require Slim Scroll Plugin ( |
| One-page scroll menu | CSS class |
To set a one-page menu that scroll on differents areas of the same page add class one-page-menu to menu object.
|
| Scroll spy | Mixed |
Add attributes data-spy="scroll" data-target="#menu-id" to content container, add id="menu-id" and class scroll-spy-menu to menu object.Scroll spy is a feature of menu-documentation. Full documentation here |
| Style minimal | CSS class |
Add class ms-minimal to menu object. Example: <aside class="sidebar ms-minimal"> ... </aside>.
|
| 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">Introduction</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-info"></span>
<span class="sidebar-nav-item">Menu item text</span>
</a>
</li>
...
</ul>
|
| Fixed area | Mixed |
To set a menu to be always visible and fixed on the screen add class fixed-area to menu object.
You can set the distance from top with attribute data-topscroll="123", replace 123 with n° of px.
Fixed area is a feature of Javascript and CSS. Full documentation here
|
Menu inner is part of menu component. Complete documentation here