Menu component

Inner menu Bootstrap

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.

Usage

<aside class="sidebar side-list bs-menu menu-left">
    <nav class="sidebar-nav">
        <ul class="side-menu">
            <li class="menu-subtitle">
                <a href="#">Menu base</a>
            </li>
            <li class="active">
                <a href="#A">Actors</a>
            </li>
            <li>
                <a href="#B">Anhoter Menu item</a>
            </li>
            <li>
                <a href="#C">Development code</a>
            </li>
            <li class="menu-subtitle">
                <a href="#D">Menu dropdown</a>
            </li>
            <li>
                <a href="#">
                    Item menu<span class="fa arrow"></span>
                </a>
                <ul class="collapse">
                    <li>
                        <a href="#F">
                            <span class="sidebar-nav-item-icon fa fa-code-fork"></span>
                            Fork
                        </a>
                    </li>
                    <li>
                        <a href="#G">
                            <span class="sidebar-nav-item-icon fa fa-star"></span>
                            Star
                        </a>
                    </li>
                    <li>
                        <a href="#H">
                            <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
                            Issues
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</aside> 
<aside class="sidebar side-list bs-menu menu-left">
    <nav class="sidebar-nav scroll-content" data-height="176">
        <ul class="side-menu">
            <li class="menu-subtitle">
                <a href="#">Menu with scroll box</a>
            </li>
            <li class="active">
                <a href="#">Actors</a>
            </li>
            <li>
                <a href="#">Anhoter Menu item</a>
            </li>
            <li>
                <a href="#">Development code</a>
            </li>
            <li class="menu-subtitle">
                <a href="#">Menu dropdown</a>
            </li>
            <li>
                <a href="#">
                    Item menu<span class="fa arrow"></span>
                </a>
                <ul class="collapse">
                    <li>
                        <a href="#">Sub item</a>
                    </li>
                    <li>
                        <a href="#">Sub item</a>
                    </li>
                </ul>
            </li>
            <li>
                <a>Another item</a>
            </li>
            <li>
                <a>Another item</a>
            </li>
            </li>
        </ul>
    </nav>
</aside> 
<div class="col-md-3">
    <h5>Scroll spy</h5>
    <div class="well scroll-content" 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 ...
        </div>
        <div id="chapter-B">
            <h5>Chapter B</h5>
            L'orem ipsum dolor ...
        </div>
        <div id="chapter-C">
            <h5>Chapter C</h5>
            L'orem ipsum dolor ...
            <div id="chapter-C1">
                <h5>Chapter C1</h5>
                <span>
                   L'orem ipsum dolor ...
                </span>
            </div>
            <div id="chapter-C2">
                <h5>Chapter C2</h5>
                <span>
                   L'orem ipsum dolor ...
                </span>
            </div>
            <div id="chapter-C3">
                <h5>Chapter C3</h5>
                <span>
                    L'orem ipsum dolor ...
                </span>
            </div>
        </div>
        <div id="chapter-D">
            <h5>Chapter D</h5>
            L'orem ipsum dolor ...
        </div>
    </div>
</div>
<div class="col-md-3">
    <aside id="menu-demo-spy" class="sidebar side-list bs-menu menu-left 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 <span class="fa arrow"></span>
                    </a>
                    <ul class="collapse">
                        <li>
                            <a href="#chapter-C1">Chapter C1</a>
                        </li>
                        <li>
                            <a href="#chapter-C2">Chapter C2</a>
                        </li>
                        <li>
                            <a href="#chapter-C3">Chapter C3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#chapter-D">Chapter D</a>
                </li>
            </ul>
        </nav>
    </aside>
</div> 
 

Main settings

Name Type Description
Left alignment CSS class Add class menu-left to menu object. Example: <aside class="sidebar side-list bs-menu menu-left"> ... </aside>.
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
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
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
Icons Mixed Insert code <span class="sidebar-nav-item-icon fa fa-icon-name"></span> into link code of menu item. Example: <a href="#F"><span class="sidebar-nav-item-icon fa fa-code-fork"></span>Fork</a>. Icons are by FontAwesome, you can found complete list of icons here. For change a icon replace class fa-icon-name with the class if choosen icon. Icons are a component of components - part I. Full documentation here

Menu documentation

Menu - inner Bootstap is part of menu component. Complete documentation here