Inner menus

Inner menus documentation with live examples

Variants

Vertical Horizontal

Scroll spy

Chapter A
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

Chapter B
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.

Chapter C
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Chapter D
Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Usage

<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>

Main settings

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 dependency

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

Slim Scroll documentation here
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

Complete documentation and external resources

Documentation

Menu documentation

Menu inner is part of menu component. Complete documentation here