Left menu

                              
<div id="wrap">                          
  <div class="leftArea">
      <ul class="leftMenu">
          <li>
              <span>
                  <a href="#" title="홈">Home</a>
              </span>
          </li>
          <li>
              <span title="Menu01">Menu01
              <svg width="30" height="18" viewBox="0 0 700 700">
                <path d="m350 446.25c-4.4805 0-8.9609-1.7148-12.371-5.1289l-245-245c-6.8438-6.8438-6.8438-17.902 0-24.746l52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l180.12 180.13 180.13-180.12c6.8438-6.8438 17.902-6.8438 24.746 0l52.5 52.5c6.8438 6.8438 6.8438 17.902 0 24.746l-245 245c-3.4141 3.4102-7.8945 5.125-12.375 5.125z">
                </path>
              </svg>              
              </span>
              <ul class="leftSubMenu">
                  <li>
                      <a href="#" title="Sub menu01">Sub menu01</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu02">Subm menu02</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu03">Sub menu03</a>
                  </li>
              </ul>
          </li>
          <li>
              <span title="Menu02">Menu02<
                <svg width="30" height="18" viewBox="0 0 700 700">
                  <path d="m350 446.25c-4.4805 0-8.9609-1.7148-12.371-5.1289l-245-245c-6.8438-6.8438-6.8438-17.902 0-24.746l52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l180.12 180.13 180.13-180.12c6.8438-6.8438 17.902-6.8438 24.746 0l52.5 52.5c6.8438 6.8438 6.8438 17.902 0 24.746l-245 245c-3.4141 3.4102-7.8945 5.125-12.375 5.125z">
                  </path>
                </svg>                    
              </span>
              <ul class="leftSubMenu">
                  <li>
                      <a href="#" title="Sub menu01">Sub menu01</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu02">Subm menu02</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu03">Sub menu03</a>
                  </li>
              </ul>
          </li>
          <li>
              <span title="Menu03">Menu03<
                <svg width="30" height="18" viewBox="0 0 700 700">
                  <path d="m350 446.25c-4.4805 0-8.9609-1.7148-12.371-5.1289l-245-245c-6.8438-6.8438-6.8438-17.902 0-24.746l52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l180.12 180.13 180.13-180.12c6.8438-6.8438 17.902-6.8438 24.746 0l52.5 52.5c6.8438 6.8438 6.8438 17.902 0 24.746l-245 245c-3.4141 3.4102-7.8945 5.125-12.375 5.125z">
                  </path>
                </svg>  
              </span>
              <ul class="leftSubMenu">
                  <li>
                      <a href="#" title="Sub menu01">Sub menu01</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu02">Subm menu02</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu03">Sub menu03</a>
                  </li>
              </ul>
          </li>
          <li>
              <span title="Menu04">Menu04<
                <svg width="30" height="18" viewBox="0 0 700 700">
                    <path d="m350 446.25c-4.4805 0-8.9609-1.7148-12.371-5.1289l-245-245c-6.8438-6.8438-6.8438-17.902 0-24.746l52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l180.12 180.13 180.13-180.12c6.8438-6.8438 17.902-6.8438 24.746 0l52.5 52.5c6.8438 6.8438 6.8438 17.902 0 24.746l-245 245c-3.4141 3.4102-7.8945 5.125-12.375 5.125z">
                    </path>
                </svg>  
              </span>
              <ul class="leftSubMenu">
                  <li>
                      <a href="#" title="Sub menu01">Sub menu01</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu02">Subm menu02</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu03">Sub menu03</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu04">Sub menu04</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu05">Sub menu05</a>
                  </li>
                  <li>
                      <a href="#" title="Sub menu06">Sub menu06</a>
                  </li>
              </ul>
          </li>
      </ul>
  </div>
</div>

                              
.leftArea{position: fixed; left: 0; width: 300px; height: 100%;
overflow-y: auto; z-index: 1100;background-color: #1C253D;box-shadow: 0px 0px 3px 2px rgba($color: #fff, $alpha: 0.5);
  >.leftMenu{
    >li{position: relative; cursor: pointer;
      span svg{position: relative; display: block; padding: 16px 0; text-indent: 28px;
      font-family: 'Noto Sans Light'; font-size: 22px; color: $cfff; transition: .5s;
        &:after{content: ''; width: 30px;height: 18px; position: absolute; top: 50%; right: 28px; transition: .5s;
        transform: translateY(-50%); fill: currentColor;}
      }
      a{display: block;}
      >a{display: block;}
      >ul.leftSubMenu{display: none; background-color: #273147; 
        li{height: 55px; line-height: 57px;
          a{display: block; font-family: 'Noto Sans'; font-size: 18px; color: rgba($color: #fff, $alpha: 0.8);
          text-indent: 50px; font-family: 'Noto Sans Light';
            &:hover{background-color: #485162;}
          }
          &.active{
            a{color: $emphasisType01;}
          }
        }
      }
      &.active{
        span{background-color: #5869F0;
          svg{transform: translateY(-50%) rotate(180deg);}
        }
      }
    }
  }
}

                              
.leftArea {
  position: fixed;
  left: 0;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  z-index: 1100;
  background-color: #1C253D;
  -webkit-box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.5);
          box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.5);
}

.leftArea > .leftMenu > li {
  position: relative;
  cursor: pointer;
}

.leftArea > .leftMenu > li span {
  position: relative;
  display: block;
  padding: 16px 0;
  text-indent: 28px;
  font-family: 'Noto Sans Light';
  font-size: 22px;
  color: #fff;
  -webkit-transition: .5s;
  transition: .5s;
}

.leftArea > .leftMenu > li span svg {
  content: '';
  width: 30px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 28px;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  fill: currentColor;
}

.leftArea > .leftMenu > li a {
  display: block;
}

.leftArea > .leftMenu > li > a {
  display: block;
}

.leftArea > .leftMenu > li > ul.leftSubMenu {
  display: none;
  background-color: #273147;
}

.leftArea > .leftMenu > li > ul.leftSubMenu li {
  height: 55px;
  line-height: 57px;
}

.leftArea > .leftMenu > li > ul.leftSubMenu li a {
  display: block;
  font-family: 'Noto Sans';
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  text-indent: 50px;
  font-family: 'Noto Sans Light';
}

.leftArea > .leftMenu > li > ul.leftSubMenu li a:hover {
  background-color: #485162;
}

.leftArea > .leftMenu > li > ul.leftSubMenu li.active a {
  color: #266bf7;
}

.leftArea > .leftMenu > li.active span {
  background-color: #5869F0;
}

.leftArea > .leftMenu > li.active span svg {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

                              
$(function(){
    $('.leftArea .leftMenu > li > span').on({
        "click":function(){
            $(this).next('.leftSubMenu').slideToggle();
            $(this).parent('li').toggleClass('active').siblings('li').removeClass('active').find('.leftSubMenu').slideUp();
        }
    });
});

다운로드

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.