Menu component

Inner menu

Examples


Scroll spy
Chapter A
L'orem ipsum dolor, consectetur adipisicing elit, 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
L'orem ipsum dolor, consectetur adipisicing elit, 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
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Chapter C1
L'orem ipsum dolor, consectetur adipisicing elit, 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 C2
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Chapter C3
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor.
Chapter D
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, 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 <span class="fa plus-times"></span></a>
                        <ul class="collapse">
                            <li><a href="#">item 1.3.1</a></li>
                        </ul>
                    </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>
            L'orem ipsum dolor, consectetur adipisicing elit, 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>
            L'orem ipsum dolor, consectetur adipisicing elit, 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>
            L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua.
            <div id="chapter-C1">
                <h5>Chapter C1</h5>
                <span>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip.
                </span>
            </div>
            <div id="chapter-C2">
                <h5>Chapter C2</h5>
                <span>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam.
                </span>
            </div>
            <div id="chapter-C3">
                <h5>Chapter C3</h5>
                <span>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor.
                </span>
            </div>
        </div>
        <div id="chapter-D">
            <h5>Chapter D</h5>
            L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. L'orem ipsum dolor, consectetur adipisicing elit, 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" style="margin-top:34px">
        <nav class="sidebar-nav">
            <ul class="side-menu">
                <li class="active">
                    <a href="#chapter-A" onclick="return false">Chapter A</a>
                </li>
                <li>
                    <a href="#chapter-B" onclick="return false">Chapter B</a>
                </li>
                <li>
                    <a href="#chapter-C">
                        Chapter C <span class="fa arrow"></span>
                    </a>
                    <ul class="collapse">
                        <li>
                            <a href="#chapter-C1" onclick="return false">Chapter C1</a>
                        </li>
                        <li>
                            <a href="#chapter-C2" onclick="return false">Chapter C2</a>
                        </li>
                        <li>
                            <a href="#chapter-C3" onclick="return false">Chapter C3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#chapter-D" onclick="return false">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 (../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-icon-name with class icon you want. Icons are a feature of Font Awesome. Complete icons list here
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 components - base. Full documentation here

Complete documentation and external resources


Menu documentation

Menu inner is part of menu component. Complete documentation here