advanced sidebar menu (multi level - unlimited navigation)

advanced-sidebar-menu-multi-level-unlimited-navigation.markdown

advanced sidebar menu (multi level - unlimited navigation)

multi level and unlimited advanced sidebar navigation

A Pen by Raul Quispe on CodePen.

License.

index.html

<div class="sidebar-navigation">
  <strong class="title">Pajamas</strong>
  <ul>
    <li><a href="#">Brand <em class="mdi mdi-chevron-down"></em></a>
      <ul>
        <li><a href="#">Brand personality </a></li>
        <li><a href="#">Tone of voice </a></li>
        <li><a href="#">Brand guidelines <em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">The GitLab logo</a></li>
              <li><a href="#">Colors</a></li>
              <li><a href="#">Typography</a></li>
              <li><a href="#">Buttons</a></li>
              <li><a href="#">Iconography</a></li>
              <li><a href="#">Content</a></li>
            </ul>
          </li>
        </li>
        <li><a href="#">Resources </a></li>
      </ul>
    </li>
    <li><a href="#">Marketing <em class="mdi mdi-chevron-down"></em></a>
      <ul>
        <li><a href="#">Get started</a>
          <ul>
            <li><a href="#">Personas </a></li>
          </ul>
        </li>
        <li><a href="#">Resources </a></li>
      </ul>
    </li>
    <li><a href="#">Product <em class="mdi mdi-chevron-down"></em></a>
      <ul>
        <li><a href="#">Get started <em class="mdi mdi-chevron-down"></em></a>
          <ul>
            <li><a href="#">Structure </a></li>
            <li><a href="#">Personas </a></li>
            <li><a href="#">Status </a></li>
          </ul>
        </li>
        <li><a href="#">Foundations <em class="mdi mdi-chevron-down"></em></a>
          <ul>
            <li><a href="#">Colors </a></li>
            <li><a href="#">Iconography </a></li>
            <li><a href="#">Motion </a></li>
            <li><a href="#">Illustration </a></li>
            <li><a href="#">Typography </a></li>
            <li><a href="#">Interactions </a></li>
            <li><a href="#">Savings and feedback </a></li>
          </ul>
         </li>
         <li><a href="#">Layout <em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">Spacing</a></li>
              <li><a href="#">Grid</a></li>
            </ul>
          </li>
         </li>
         <li><a href="#">Components <em class="mdi mdi-chevron-down"></em></a>
          <ul>
            <li><a href="#">Alerts </a></li>
            <li><a href="#">Avatars </a></li>
            <li><a href="#">Badges </a></li>
            <li><a href="#">Banners </a></li>
            <li><a href="#">Navigation </a></li>
            <li><a href="#">Broadcast messages </a></li>
            <li><a href="#">Buttons </a></li>
            <li><a href="#">Checkboxes </a></li>
            <li><a href="#">Code snippets </a></li>
            <li><a href="#">Data tables </a></li>
            <li><a href="#">Data visualization </a></li>
            <li><a href="#">Dropdowns </a></li>
            <li><a href="#">File uploader </a></li>
            <li><a href="#">Filters </a></li>
            <li><a href="#">Forms </a></li>
            <li><a href="#">Labels </a></li>
            <li><a href="#">Links </a></li>
            <li><a href="#">Lists </a></li>
            <li><a href="#">Modal </a></li>
            <li><a href="#">Notifications </a></li>
            <li><a href="#">Pagination </a></li>
            <li><a href="#">Popovers </a></li>
            <li><a href="#">Progress bars </a></li>
            <li><a href="#">Radio buttons </a></li>
            <li><a href="#">Search </a></li>
            <li><a href="#">Segmented control </a></li>
            <li><a href="#">Skeleton loader </a></li>
            <li><a href="#">Sorting </a></li>
            <li><a href="#">Spinner </a></li>
            <li><a href="#">Tabs </a></li>
            <li><a href="#">Sorting </a></li>
            <li><a href="#">Toasts </a></li>
            <li><a href="#">Toggles</a></li>
            <li><a href="#">Tooltips </a></li>
          </ul>
         </li>
         <li><a href="#">Regions <em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">Empty states</a></li>
              <li><a href="#">Navigation</a></li>
            </ul>
         </li>
         <li><a href="#">Content <em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">Voice & tone</a></li>
              <li><a href="#">Terminology</a></li>
              <li><a href="#">Punctuation</a></li>
            </ul>
         </li>
         <li><a href="#">Usability <em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">Internationalization</a></li>
              <li><a href="#">Helping users</a></li>
            </ul>
         </li>
         <li><a href="#">Resources<em class="mdi mdi-chevron-down"></em></a>
            <ul>
              <li><a href="#">Design resources</a></li>
            </ul>
         </li>
        </li>
      </ul>
    </li>
    <li><a href="#">Research <em class="mdi mdi-chevron-down"></em></a>
      <ul>
        <li><a href="#">Get Started</a></li>
        <li><a href="#">Toolkit</a></li>
        <li><a href="#">First Look</a></li>
      </ul>
    </li>
    <li><a href="#">Accessibility <em class="mdi mdi-chevron-down"></em></a>
      <ul>
        <li><a href="#">Statement of Compliance</a></li>
        <li><a href="#">Best practices</a></li>
      </ul>
    </li>
    <li><a href="#">Contribute</a></li>
  </ul>
</div>

script.js

$(function(){
  var $ul   =   $('.sidebar-navigation > ul');
  
  $ul.find('li a').click(function(e){
    var $li = $(this).parent();
    
    if($li.find('ul').length > 0){
      e.preventDefault();
      
      if($li.hasClass('selected')){
        $li.removeClass('selected').find('li').removeClass('selected');
        $li.find('ul').slideUp(400);
        $li.find('a em').removeClass('mdi-flip-v');
      }else{
        
        if($li.parents('li.selected').length == 0){
          $ul.find('li').removeClass('selected');
          $ul.find('ul').slideUp(400);
          $ul.find('li a em').removeClass('mdi-flip-v');
        }else{
          $li.parent().find('li').removeClass('selected');
          $li.parent().find('> li ul').slideUp(400);
          $li.parent().find('> li a em').removeClass('mdi-flip-v');
        }
        
        $li.addClass('selected');
        $li.find('>ul').slideDown(400);
        $li.find('>a>em').addClass('mdi-flip-v');
      }
    }
  });
  
  
  $('.sidebar-navigation > ul ul').each(function(i){
    if($(this).find('>li>ul').length > 0){
      var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      var pIntPLeft   = parseInt(paddingLeft);
      var result      = pIntPLeft + 20;
      
      $(this).find('>li>a').css('padding-left',result);
    }else{
      var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left');
      var pIntPLeft   = parseInt(paddingLeft);
      var result      = pIntPLeft + 20;
      
      $(this).find('>li>a').css('padding-left',result).parent().addClass('selected--last');
    }
  });
  
  var t = ' li > ul ';
  for(var i=1;i<=10;i++){
    $('.sidebar-navigation > ul > ' + t.repeat(i)).addClass('subMenuColor' + i);
  }
  
  var activeLi = $('li.selected');
  if(activeLi.length){
    opener(activeLi);
  }
  
  function opener(li){
    var ul = li.closest('ul');
    if(ul.length){
      
        li.addClass('selected');
        ul.addClass('open');
        li.find('>a>em').addClass('mdi-flip-v');
      
      if(ul.closest('li').length){
        opener(ul.closest('li'));
      }else{
        return false;
      }
      
    }
  }
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@mixin transition($time){
  -webkit-transition: all $time linear;
  -moz-transition: all $time linear;
  -o-transition: all $time linear;
  transition: all $time linear;
}

$font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";;

$primary-color: #ecf0f1; //#f1c40f
$text-color: #2e2e2e;

body{
  margin: 0;
  padding: 0;
  font-family: $font-family;
  font-size: 14px;
  line-height: 16px;
  color: $text-color;
  background-color: #eee;
}

.sidebar-navigation{
  webkit-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16);
    position: fixed;
    z-index: 400;
    background-color: #fff;
    border-right: 1px solid #ccc;
    width: 256px;
    height: 100%;
    left: 0;
    top: 0;
    overflow-y: auto;
  
  .title{
    display: block;
    font-size: 14px;
    line-height: 16px;
    background-color: #fff;
    align-items: center;
    font-weight: 600;
    padding: 16px;
    border-bottom: 1px solid #ccc;
  }
  
  ul{
    margin: 0;
    padding: 0;
    li{
      display: block;
      a{
        position: relative;
        display: block;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: $text-color;
        @include transition(.3s);
        
        em{
          font-size: 24px;
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          padding: 5px;
          border-radius: 50%
        }
      }
      
      &:hover,
      &.selected{
        > a{
          background-color: rgba(0,0,0,.06);
        }
      }
      
      ul{
        display: none;
        li {
          font-weight: 400;
        }
        
        &.open{display: block}
        li{
          a{
            color: darken($primary-color, 60%);
            border-color: rgba(white, .1);
            font-weight: 400;
          }
          &:hover,
          &.selected{
            > a{
              background-color: darken($primary-color, 2%);
              
              &:before{margin-right: 10px}
            }
          }
          
          &.selected.selected--last{
            > a{
              background-color: darken($primary-color, 30%);
              color: #fff;
              &:before{background-color: #fff}
            }
          }
        }
      }
    }
  }
}

$colour1: lighten($primary-color, 5%);
$colour2: lighten($primary-color, 10%);
$colour3: lighten($primary-color, 15%);
$colour4: lighten($primary-color, 20%);
$colour5: lighten($primary-color, 25%);
$colour6: lighten($primary-color, 30%);
$colour7: lighten($primary-color, 35%);
$colour8: lighten($primary-color, 40%);
$colour9: lighten($primary-color, 45%);
$colour10: lighten($primary-color, 50%);

$colors: $colour1, $colour2, $colour3, $colour4, $colour5, $colour6, $colour7, $colour8, $colour9, $colour10;

@each $colour in $colors {
    $i: index($colors, $colour);
    .subMenuColor#{$i} {
        background-color: $colour;
    }
}

styles

<link href="https://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet" />