GW Navigation

by slawe

HTML

<nav id="navigation">
  <ul id="main-nav">
    <li>
      <a href="#">Menu item 1</a>
      <button class="collapse"></button>
      <ul class="sub-nav">
        <li><span class="icon"></span><a href="#">Sub Item 1</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 1</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 1</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 1</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 1</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu item 2</a>
      <button class="collapse"></button>
      <ul class="sub-nav">
        <li><span class="icon"></span><a href="#">Sub Item 2</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 2</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 2</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 2</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu item 2</a>
      <button class="collapse"></button>
      <ul class="sub-nav">
        <li><span class="icon"></span><a href="#">Sub Item 3</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 3</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 3</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 3</a></li>
        <li><span class="icon"></span><a href="#">Sub Item 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav#navigation {
  background-color: #e0e0e0;
  border: 1px solid #ddd;
  width: 125px;
}
nav#navigation ul {
  padding-left: 0;
  list-style: none;
}
nav#navigation ul li.expanded .sub-nav {
  max-height: 1080px;
}
nav#navigation ul li.expanded .collapse:before {
  content: "\25B2";
}
nav#navigation ul li.active > a {
  display: inline-block;
  background-color: green;
  color: #e0e0e0;
}
nav#navigation ul li a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #333;
  padding: 3px 0px;
}
nav#navigation ul li .collapse {
  display: inline-block;
  position: relative;
  padding: 0;
  float: right;
  width: 20px;
  height: 20px;
}
nav#navigation ul li .collapse:before {
  content: "\25BC";
}
nav#navigation ul .sub-nav {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms;
}
nav#navigation ul .sub-nav li {
  position: relative;
  padding-left: 20px;
  border-left: 0 solid green;
  transition: border 200ms;
}
nav#navigation ul .sub-nav li:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(0, 128, 0, 0.1);
  transition: width 300ms;
  z-index: -1;
}
nav#navigation ul .sub-nav li:hover {
  border-width: 5px;
}
nav#navigation ul .sub-nav li:hover:before {
  width: 100%;
}

JavaScript

var ul = $('#main-nav');

ul.find('button').click( function(){
  
  $(this).parent()
  .siblings().removeClass('expanded').end()
  .toggleClass('expanded');
  
});

ul.find('a').click( function(){
  
  ul.find('li').removeClass('active');
  
  $(this).parent()
  .siblings().removeClass('active').end()
  .toggleClass('active');
  
});

ul.find('li.active').each(function(){
  var $this = $(this);
  
  if($this.parent().parent().prop("tagName") == 'li') {
    $this.parent().parent().addClass('expanded');
  }
});