Metis Menu Example

by rodrigorf

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<link rel="stylesheet" href="//rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <ul class="metismenu" id="menu">
            <li class="active">
              <a href="#" aria-expanded="true">
                <span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
                <span class="sidebar-nav-item">metisMenu</span>
                <span class="fa arrow"></span>
              </a>
              <ul aria-expanded="true">
                <li>
                  <a href="https://github.com/onokumus/metisMenu">
                    <span class="sidebar-nav-item-icon fa fa-code-fork"></span> Fork
                  </a>
                </li>
                <li>
                  <a href="https://github.com/onokumus/metisMenu">
                    <span class="sidebar-nav-item-icon fa fa-star"></span> Star
                  </a>
                </li>
                <li>
                  <a href="https://github.com/onokumus/metisMenu/issues">
                    <span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span> Issues
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" aria-expanded="false">Menu 0 <span class="fa arrow"></span></a>
              <ul aria-expanded="false">
                <li><a href="#">item 0.1</a></li>
                <li><a href="#">item 0.2</a></li>
                <li><a href="http://onokumus.com">onokumus</a></li>
               ...

JavaScript

$(function() {
  $('#menu').metisMenu({
    toggle: false // disable the auto collapse. Default: true.
  });
  
  $('#menu ul > li').addClass('collapse');
});