CodePen Embed - rNxRNZK

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

<button style="display:block; margin-left:auto;" onclick="SideBar__show();">보기</button>
<button style="display:block; margin-left:auto;" onclick="SideBar__hide();">닫기</button>

<div class="side-bar">
  <nav class="menu-box-1">
    <ul>
      <li>
        <a href="#" class="block">1차 메뉴 아이템 1</a>
        <ul>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 11</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 2</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 3</a>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 4</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="block">1차 메뉴 아이템 2</a>
        <ul>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 12</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 2</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 3</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="block">2차 메뉴 아이템 4</a>
            <ul>
              <li><a href="#" class="block">3차 메뉴 아이템 1</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 2</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 3</a></li>
              <li><a href="#" class="block">3차 메뉴 아이템 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="block">1차 메뉴 아이템 3</a>
      </li>
      <li>
        <a href="#" class="block">1차 메뉴 아이템 4</a>
      </li>
    </ul>
  </nav>
</div>

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.side-bar {
  position:fixed;
  top:0;
  left:0;
  width:300px;
  height:100%;
  background-color:#efefef;
  z-index:1;
  opacity:0;
  visibility:hidden;
}

.side-bar-actived .side-bar {
  opacity:1;
  visibility:visible;
}

.side-bar .menu-box-1 ul > li > a:not(:only-child)::after {
  content:"[+]";
}

.side-bar .menu-box-1 > ul ul > li > a {
  visibility:hidden;
  opacity:0;
  transition: visibility 0s, opacity 0s;
}

.side-bar .menu-box-1 ul > li.selected > ul > li > a {
  visibility:visible;
  opacity:1;
  transition: visibility .3s .3s, opacity .3s .3s;
}

.side-bar .menu-box-1 ul > li.selected > a:not(:only-child)::after {
  content:"[-]";
}

.side-bar .menu-box-1 > ul ul {
  background-color:red;
  position:absolute;
  top:0;
  left:100%;
  width:0;
  transition:width .3s;
  height:100%;
}

.side-bar .menu-box-1 ul > li.selected > ul {
  z-index:1;
}

.side-bar .menu-box-1 ul.hover > li > ul {
  width:100%;
}

.side-bar .menu-box-1 > ul ul.hover > li > ul {
  width:120%;
}

function SideBar__init() {
  $('.side-bar ul > li').mouseenter(function() {
    // 선택된 li
    var $li = $(this);
    
    // 선택된 li의 부모
    var $ul = $li.parent();

    // 선택된 녀석에게 selected 부여, 이것과 상관없이 모든 형제들의 자식은 ul은 활성화된다. 다만 z-index에 의해서 이 녀석의 자식만 보인다.
    $li.addClass('selected');
    
    // 선택된 녀석들의 후손들 중에서, 기존에 활성화 된것들 정리
    $li.find('.hover, .selected').removeClass('hover').removeClass('selected');
    // 형제들의 후손들 중에서, 기존에 활성화 된것들 정리
    $li.siblings('.selected').find('.hover, .selected').removeClass('hover').removeClass('selected');
    // 형제들 중에서, 기존에 활성화 된것들 정리
    $li.siblings('.selected').removeClass('selected');

    // 내가 선택한 녀석이 자식인 ul이 있다면
    // 나를 포함한 모든 형제가 자식인 ul을 활성화 하도록, 부모에게 hover 클래스 삽입
    if ( $li.find(' > ul').length > 0 ) {
      $ul.addClass('hover');
    }
    else {
      $ul.removeClass('hover');
    }

    return false;
  });
}

function SideBar__show() {
  $('html').addClass('side-bar-actived');
}

function SideBar__hide() {
  $('.side-bar .hover').removeClass('hover');
  $('.side-bar .selected').removeClass('selected');
  $('html').removeClass('side-bar-actived');
}

$(function() {
  SideBar__init();
})

This Pen is owned by 지윤 on CodePen. It is a fork of this Pen.

See more by @leejiyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.