menu

by Talsja

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<ul class="navigation ">
  <li class="navigation-header">
    <span>PROJECTEN</span> <i title="" class="fa fa-menu" data-original-title="Main pages"></i>
  </li>
  <li><a href="#"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>

  <li class="active">
    <a href="#"><i class="fa fa-gear"></i> <span>Color system</span></a>
    <ul>
      <li><a href="#">Primary palette</a></li>
      <li><a href="#">Info palette</a></li>
      <li class="navigation-divider"></li>
      <li><a href="#">Pink palette</a></li>
      <li><a href="#">Violet palette</a></li>
    </ul>
  </li>
  <li class="">
    <a href="#"><i class="fa fa-user"></i> <span>Starter kit</span></a>


    <ul>
      <li><a href="#l">Pills component</a></li>
      <li><a href="#">Accordion and navs</a></li>
      <li><a href="#">Buttons</a></li>
    </ul>
  </li>

  <li>
    <a href="#"><i class="fa fa-image"></i> <span>Gallery</span></a>
    <ul>
      <li><a href="#">Media grid</a></li>
      <li><a href="#">Media with titles</a></li>
      <li><a href="#">Media with description</a></li>
      <li><a href="#">Media library</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-warning"></i> <span>Error pages</span></a>
    <ul>
      <li><a href="#">Error 403</a></li>
      <li><a href="#">Error 404</a></li>
      <li><a href="#">Error 405</a></li>
      <li><a href="#">Error 500</a></li>
      <li><a href="#">Error 503</a></li>
      <li><a href="#">Offline page</a></li>
    </ul>
  </li>
 <li>
									<a href="#"><i class="fa fa-tree"></i> <span>Menu levels</span></a>
									<ul>
										<li><a href="#"><i class="fa fa-IE"></i> Second level</a></li>
										<li>
											<a href="#"><i class="fa fa-firefox"></i> Second level with child</a>
											<ul >
												<li><a href="#"><i class="fa fa-android"></i> Third level</a></li>
												<li>
													<a...

CSS

.navigation {
    list-style: outside none none;
    margin: 0;
    padding: 10px 0;
}
.navigation, 
.navigation li {
    position: relative;
}

.navigation {
    list-style: outside none none;
    margin: 0;
    padding: 10px 0;
}
.navigation .hidden-ul {
    display: none;
}

.navigation li + li {
    margin-top: 1px;
}
.navigation li + .navigation-header {
    margin-top: 10px;
}
.navigation li a {
    color: rgba(255, 255, 255, 0.75);
    display: block;
    text-decoration:none;
    transition: background 0.15s linear 0s, color 0.15s linear 0s;
}          
  
.navigation li a:focus,   
.navigation li a:hover {
    background-color: #f5f5f5;
    color: #333;
  text-decoration:none;
  
}
.navigation li a > i {
    float: left;
    margin-right: 15px;
    margin-top: 2px;
    top: 0;
    transition: opacity 0.2s ease-in-out 0s;
}
.navigation li a > i.pull-right {
    margin-left: 15px;
    margin-right: 0;
}

.navigation li.disabled > a,
.navigation li.disabled > a:focus, 
.navigation li.disabled > a:hover {
    background-color: transparent;
    color: inherit;
    cursor: not-allowed;
    opacity: 0.3;
}

.navigation li > .has-ul {
    padding-right: 36px;
    position: relative;
}
.navigation li > .has-ul::after {
    content: "";
    display: block;
    font-family: FontAwesome;
    font-size: 16px;
    line-height: 1;
    margin-top: -8px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: rotate(0deg);
    transition: -webkit-transform 0.2s ease-in-out 0s;
}

.navigation li.active > .has-ul::after {
      transform: rotate(90deg);
  }
.navigation li.active > .hidden-ul{

}

.navigation li.navigation-divider {
    background-color: rgba(255, 255, 255, 0.1);
    height: 1px;
    margin: 10px 0;
}
 .navigation li.navigation-divider {
    background-color: #eee;
}

.navigation li:not(.active) .label-transparent {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.navigation > li > a {
    font-weight: 500;
    min-height:...

JavaScript

var   $menu = $('.navigation');
  $menu.find("li.active").parents("li").addClass("active");
  $menu.find("li").not(".active").has("ul").children("ul").addClass("hidden-ul");
  $menu.find("li").has("ul").children("a").addClass("has-ul");

  $menu.find("li").has("ul").children("a").on("click", function (e) {
  e.preventDefault();
  $(this).parent("li").not(".disabled").toggleClass("active").children("ul").slideToggle(250);
  $(this).parent("li").not(".disabled").siblings(":has(.has-ul)").removeClass("active").children("ul").slideUp(250);


  });