A Pen by Rplus.

index.jade

- var menus = [{text: 'menu 1', link: '###'}, {text: 'menu 2', tip: 'menu-tip', submenu: [{text: 'sub-2-1', link: '###', tip: 'menu-tip'}, {text: 'sub-2-2', link: '###', tip: 'menu-tip'}] }, {text: 'menu 3', submenu: [{text: 'sub-3-1', link: '###', tip: 'menu-tip'}, {text: 'sub-3-2', link: '###'}, {text: 'sub-3-3', link: '###'}, {text: 'sub-3-4', link: '###', tip: 'menu-tip'}] }, {text: 'menu 4', link: '###'}];

.side(data-icon='M')
  ul.side-menu
    each list in menus
      li.side__list
        if list.submenu
          if list.tip
            a.side__item.side__item--sub(data-tip=list.tip, href=list.link)= list.text
          else
            a.side__item.side__item--sub(href=list.link)= list.text
          ul.side__submenu
            each sublist in list.submenu
              li.side__sublist
                if sublist.tip
                  a.side__subitem(href=sublist.link, data-tip=sublist.tip)= sublist.text
                else
                  a.side__subitem(href=sublist.link)= sublist.text
        else
          if list.tip
            a.side__item(data-tip=list.tip, href=list.link)= list.text
          else
            a.side__item(href=list.link)= list.text

form.custom-icon
  input(type='text', placeholder='change menu char-icon', pattern='.{1}', title='only one character', size='15')
  button(type='submit') 就決定是你了！
  
  // the readability of jade's araay is so bad...
  
  pre.
    support:
    ---
    + layout
    max-height: IE 8+
    rem: IE 9+

    + effect
    bachground-clip: IE 9+
    background-image:gradient: IE 10+
    transition: IE 10+
    transform: IE 10+

jade-practice:-multi-level-menu.markdown

jade practice: multi level menu

A Pen by Rplus on CodePen.

License.

script.js

/*
you can use js to change the menu char-icon easily~
*/

var changeForm = document.querySelector('.custom-icon'),
    changeBtn = changeForm.getElementsByTagName('button')[0],
    changeInput = changeForm.getElementsByTagName('input')[0],
    side = document.querySelector('.side');

changeBtn.addEventListener('click', function () {
  changeInput.value = ('' === changeInput.value)?('M'):(changeInput.value[0]);
  side.setAttribute('data-icon', changeInput.value);
});

changeForm.onsubmit = function() {
  return false;
};

style.stylus

body {
  background-color: #999;
}

// IE 8 dont support rem, and i'm tired to set fallback...
$supportIE8 = false;

rem(n)
  if $supportIE8 {
    n / 16px rem
  } else {
    unit(n, px)
  }

$menu-trans {
  transition: all .3s linear 0s;
}

$menu-item {
  position: relative;
  background-repeat: no-repeat;
  &:hover {
    color: #ccc;
    overflow: initial;
  }
  
  // tip style
  &[data-tip] {
    &:after {
      $border-w = rem(7);
      content: 'this is \a' attr(data-tip);
      min-width: rem(70);
      max-width: 100%;
      position: absolute;
      top: 30%;
      left: 0;
      z-index: -1;
      padding: 0 rem(10) $border-w;
      background-color: #333;
      border-top: $border-w solid darken(@background-color, 10%);
      border-left: $border-w - rem(2) solid transparent;
      background-clip: padding-box;
      opacity: 0;
      transition: all .3s;
    }
    &:hover {
      &:after {
        opacity: 1;
        left: 105%;
      }
    }
  }
}

.side {
  width: rem(170);
  position: absolute;
  left: (rem(1) - @width); // 1px for side :hover be actived easily
  background-color: #333;
  text-align: center;
  color: #ccc;
  cursor: pointer;
  transition: left .3s .5s; // give some time for delay hidding menu
  
  // menu char-icon
  &:after {
    content: attr(data-icon);
    position: absolute;
    width: 1.5em;
    height: @width;
    line-height: @height;
    top: 0;
    right: (- @width);
    background-color: #333;
    font-weight: 900;
    font-size: 1.5em;
    text-indent: rem(-1); // reset side menu panel effect line
    @extend $menu-trans;
  }
  &:hover {
    left: 0;
    transition: left .3s;
    &:after {
      background-color: #555;
    }
  }

  // reset style
  ul {
    padding-left: 0;
    margin: 0;
  }
  li {
    list-style-type: none;
  }
  a {
    display: block;
    text-decoration: none;
    color: #aaa;
    text-shadow: 0 1px #111;
  }
}
.side-menu {
  padding-bottom: rem(1);
  padding-right: rem(1);
  overflow: hidden; // some tip at side__list
  .side:hover & {
    overflow: initial;
  }
}

.side__submenu {
  transition: max-height .2s; // reduce two animation delay time
  max-height: 0;
  overflow: hidden;
  background-color: #444;
  background-image: linear-gradient(to bottom, rgba(20,20,20,.2), transparent 15%, transparent 85%, rgba(20,20,20,.2));
  .side__list:hover & {
    max-height: rem(300);
    @extend $menu-trans;
  }
  &:hover { // tricky skill for showing tips popup
    overflow: initial;
  }
}

.side__item {
  @extend $menu-trans;
  @extend $menu-item;
  padding: rem(10) 0;
  background-image: linear-gradient(to bottom, transparent 85%, rgba(20,20,20,.2));
  text-transform: capitalize;
  cursor: pointer;
  &:hover {
    background-color: rgba(#ddd, .06);
  }
}

.side__item--sub {

  // submenu char-icon
  &:before {
    content: '▶';
    position: absolute;
    top: rem(8);
    right: rem(10);
    font-size: 1.2em;
    color: #555;
    transition: all .3s;
    transform-origin: 36% 50%;
  }
  &:hover {
    &:before {
      transform: rotateZ(90deg);
      text-shadow: 1px 0 1px #111;
    }
  }
}

.side__subitem {
  @extend $menu-trans;
  @extend $menu-item;
  padding: rem(5) 0;
  background-image: -webkit-radial-gradient(50% 90%, closest-corner, rgba(#000, .07), transparent);
  .side & {
    color: #999;
  }
  &:hover {
    background-color: rgba(#fff, .06);
  }
}


.custom-icon {
  position: fixed;
  top: 50%;
  right: 0;
}