부트스트랩 기반

HTML

<section>

    <ul class="sidebar-menu">

        <li class="header">MAIN NAVIGATION</li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a>

                </li>

            </ul>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-files-o"></i>

                <span>Layout Options</span>

                <span class="label label-primary pull-right">4</span>

            </a>

            <ul class="treeview-menu" style="display: none;">

                <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a>

                </li>

                <li class=""><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">

                <i class="fa fa-th"></i> <span>Widgets</span>

                <small class="label pull-right label-info">new</small>

            </a>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-pie-chart"></i>

                <span>Charts</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Morris</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Flot</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a>

                </li>

            </ul>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-laptop"></i>

                <span>UI Elements</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> General</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Icons</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Modals</a>

                </li>

            </ul>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-edit"></i> <span>Forms</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Editors</a>

                </li>

            </ul>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-table"></i> <span>Tables</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">

                <i class="fa fa-calendar"></i> <span>Calendar</span>

                <small class="label pull-right label-danger">3</small>

            </a>

        </li>

        <li>

            <a href="#">

                <i class="fa fa-envelope"></i> <span>Mailbox</span>

                <small class="label pull-right label-warning">12</small>

            </a>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-folder"></i> <span>Examples</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Profile</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Login</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Register</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a>

                </li>

            </ul>

        </li>

        <li class="treeview">

            <a href="#">

                <i class="fa fa-share"></i> <span>Multilevel</span>

                <i class="fa fa-angle-left pull-right"></i>

            </a>

            <ul class="treeview-menu">

                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a>

                </li>

                <li>

                    <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>

                    <ul class="treeview-menu">

                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a>

                        </li>

                        <li>

                            <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>

                            <ul class="treeview-menu">

                                <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a>

                                </li>

                                <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a>

                </li>

            </ul>

        </li>

        <li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a>

        </li>

        <li class="header">LABELS</li>

        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a>

        </li>

        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a>

        </li>

        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a>

        </li>

    </ul>

</section>

CSS

.sidebar-menu{list-style:none;margin:0;padding:0;background-color:#222d32}

.sidebar-menu>li{position:relative;margin:0;padding:0}

.sidebar-menu>li>a{padding:12px 5px 12px 15px;display:block;border-left:3px solid transparent;color:#b8c7ce}

.sidebar-menu>li>a>.fa{width:20px}

.sidebar-menu>li:hover>a,.sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}

.sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}

.sidebar-menu>li .label,.sidebar-menu>li .badge{margin-top:3px;margin-right:5px}

.sidebar-menu li.header{padding:10px 25px 10px 15px;font-size:12px;color:#4b646f;background:#1a2226}

.sidebar-menu li>a>.fa-angle-left{width:auto;height:auto;padding:0;margin-right:10px;margin-top:3px}

.sidebar-menu li.active>a>.fa-angle-left{transform:rotate(-90deg)}

.sidebar-menu li.active>.treeview-menu{display:block}

.sidebar-menu a{color:#b8c7ce;text-decoration:none}

.sidebar-menu .treeview-menu{display:none;list-style:none;padding:0;margin:0;padding-left:5px}

.sidebar-menu .treeview-menu .treeview-menu{padding-left:20px}

.sidebar-menu .treeview-menu>li{margin:0}

.sidebar-menu .treeview-menu>li>a{padding:5px 5px 5px 15px;display:block;font-size:14px;color:#8aa4af}

.sidebar-menu .treeview-menu>li>a>.fa{width:20px}

.sidebar-menu .treeview-menu>li>a>.fa-angle-left,.sidebar-menu .treeview-menu>li>a>.fa-angle-down{width:auto}

.sidebar-menu .treeview-menu>li.active>a,.sidebar-menu .treeview-menu>li>a:hover{color:#fff}

JS

$.sidebarMenu = function(menu) {

    var animationSpeed = 300;

    $(menu).on('click', 'li a', function(e) {

        var $this = $(this);

        var checkElement = $this.next();

        if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) {

            checkElement.slideUp(animationSpeed, function() {

                checkElement.removeClass('menu-open');

            });

            checkElement.parent("li").removeClass("active");

        }

        //If the menu is not visible

        else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {

            //Get the parent menu

            var parent = $this.parents('ul').first();

            //Close all open menus within the parent

            var ul = parent.find('ul:visible').slideUp(animationSpeed);

            //Remove the menu-open class from the parent

            ul.removeClass('menu-open');

            //Get the parent li

            var parent_li = $this.parent("li");

            //Open the target menu and add the menu-open class

            checkElement.slideDown(animationSpeed, function() {

                //Add the class active to the parent li

                checkElement.addClass('menu-open');

                parent.find('li.active').removeClass('active');

                parent_li.addClass('active');

            });

        }

        //if this isn't a link, prevent the page from being redirected

        if (checkElement.is('.treeview-menu')) {

            e.preventDefault();

        }

    });

}

$.sidebarMenu($('.sidebar-menu'));