하나씩 나타나는 퀵 메뉴 만들기 (SCSS & CSS)

클릭했을 때 하위 메뉴가 하나씩 나타나는 사이드 메뉴를 만들어 보겠습니다. 

결과 화면

구조 잡기

 

첫 번째는 메뉴들이 TOP에서 50픽셀 정도 위로 가있고 opacity가 0이라 영역은 있지만 보이지 않는 상태입니다. 

만약 display none을 하고 싶다면 활성화할 때에는 display block 후 top과 opacity의 값을 바꾸도록 해야 모션이 적용됩니다. 

 

두 번째는 첫 번째 메뉴에 서브 메뉴들이 겹쳐있는데 하위 메뉴를 감싸고 있는 메뉴의 zIndex가 낮아야 합니다. 그래야 뒤로 가려져 보입니다. 그리고 활성화가 되면 각 메뉴별로 left값을 주면 됩니다. 

 

먼저 마크업을 해보겠습니다. 

 

<div class="wrap">
	<div class="menu">
		<button class="menuItem">Menu</button>
		<ul class="submenu">
			<li class="subItem"><a href="#">sub1</a></li>
			<li class="subItem"><a href="#">sub2</a></li>
			<li class="subItem"><a href="#">sub3</a></li>
			<li class="subItem"><a href="#">sub4</a></li>
		</ul>
	</div>
	
	<hr style="margin:20px 0; "/>

	<div class="menu2">
		<button class="menuItem">Menu2</button>
		<ul class="submenu2">
			<li class="submenu2Item"><a href="#">sub1</a></li>
			<li class="submenu2Item"><a href="#">sub2</a></li>
			<li class="submenu2Item"><a href="#">sub3</a></li>
			<li class="submenu2Item"><a href="#">sub4</a></li>
		</ul>
	</div>
</div>

사실 저렇게 굳이 submenu를 한 번도 감싸주지 않아도 되지만, 수정과 변화가 많은 프로젝트들을 하다 보니 자연스럽게 그룹으로 되어있는 것은 꼭 한 번씩 감싸주게 되더라고요.  

 

스크립트는 간단하게 부모에게 active 클래스를 toggle 시켜주는 거라 어렵진 않습니다. 

let items = document.querySelectorAll('.menuItem');
items.forEach(function(item){
	item.addEventListener('click', function(){
		let parent = item.parentNode;
		if(parent.classList.contains('active')) {
			parent.classList.remove('active');
		} else {
			parent.classList.add('active');
		}
	})
})

그리고 스타일을 작성해보겠습니다. 

SCSS를 사용해서 작성하였고, SASS환경이 아닐 수 도 있어서 CSS도 같이 올립니다. 

 

$size: 50px;
@function submenuWidth(){
    @return $size + 10px;
};
@function getLeft($index){
    @return ($index - 1) * ($size + 10);
};
@function getDelay($index) {
    @return ($index / 10) + s;
};
/* 여기는 중요하지 않아요 start */
*,
body { margin: 0; padding: 0; font-size: 13px; color: #333; font-family: "나눔고딕", NanumGothic;}
a { display: block; text-decoration: none; color: #333; width: inherit; height: inherit;}
ul { list-style-type: none;}
button { border: 0 none; cursor: pointer;  }
.wrap { width: calc(100% - 100px); margin: 50px;}
/* 여기는 중요하지 않아요 end */
.menuCommon {
    position: relative; 
    width: 100%; 
}
.menuItemCommon {
    width: $size; 
    height: $size;
    background: pink; 
    display: inline-block; 
    text-align: center;
}
.submenuCommon {
    position: absolute; 
    z-index: 1; 
}
.subItemCommon {
    position: absolute; 
    z-index: 1; 
    width: $size; 
    height: $size; 
    background: rgb(163, 163, 163);
    text-align: center; 
}
.menu { 
    @extend .menuCommon;
    .menuItem {
        @extend .menuItemCommon;
    }
    .submenu  {
        @extend .submenuCommon;
        top: 0; 
        left: submenuWidth(); 
        .subItem {
            @extend .subItemCommon;
            top: -50px; 
            opacity: 0; 
            transition: 0.4s ease-in;
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    left: getLeft($i);
                }
            }
        }
    }
    &.active {
        .subItem {
           top: 0;
           opacity: 1; 
            @for $i from 1 through 4 {
                &:nth-child(#{$i}) {
                    transition-delay: getDelay($i);
                }
            }
        }
    }
}

.menu2 { 
    @extend .menuCommon;
    .menuItem {
        @extend .menuItemCommon;
    }
    .submenu2  {
        @extend .submenuCommon;
        top: 0; 
        left: 0; 
        z-index: -1;
        .submenu2Item {
            @extend .subItemCommon;
            top: 0; 
            left: 0;
            transition: 0.1s;
        }
    }
    &.active {
        .submenu2 {
            left: submenuWidth(); 
            z-index: 1;
            .submenu2Item {
                @for $i from 1 through 4 {
                     &:nth-child(#{$i}) {
                         left: getLeft($i);
                         z-index: $i;
                     }
                 }
             }
        }
    }
}

부모에 active가 붙었을 때에 나머지 스타일을 정의하면 됩니다. 

첫 번째 subItem에는 top의 값이 모두 0이 되지만 transition-delay를 통해 순차적으로 딜레이를 줍니다. 

transition값을 0.1~0.4로 줘야 하기 때문에 10/index로 계산하면 됩니다. 뒤에 꼭 s(Second)를 붙여주세요!

 

두 번째 subITem에는 활성화 시 각각의 메뉴에 left 값을 적용하는데, 1~4번째 index를 파라미터로 넘겨 

($width + 간격) * (index -1) 만큼 리턴해 주면 됩니다.

참고로 SCSS와 Javascript의 다른 점 중 하나는 index가 0번이 아니라 1번부터 시작하는 겁니다.

간혹 헷갈리네요.. 😣

@charset "UTF-8";
/* 여기는 중요하지 않아요 start */
*,
body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #333;
  font-family: "나눔고딕", NanumGothic;
}

a {
  display: block;
  text-decoration: none;
  color: #333;
  width: inherit;
  height: inherit;
}

ul {
  list-style-type: none;
}

button {
  border: 0 none;
  cursor: pointer;
}

.wrap {
  width: calc(100% - 100px);
  margin: 50px;
}

/* 여기는 중요하지 않아요 end */
.menuCommon, .menu, .menu2 {
  position: relative;
  width: 100%;
}

.menuItemCommon, .menu .menuItem, .menu2 .menuItem {
  width: 50px;
  height: 50px;
  background: pink;
  display: inline-block;
  text-align: center;
}

.submenuCommon, .menu .submenu, .menu2 .submenu2 {
  position: absolute;
  z-index: 1;
}

.subItemCommon, .menu .submenu .subItem, .menu2 .submenu2 .submenu2Item {
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  background: #a3a3a3;
  text-align: center;
}

.menu .submenu {
  top: 0;
  left: 60px;
}

.menu .submenu .subItem {
  top: -50px;
  opacity: 0;
  transition: 0.4s ease-in;
}

.menu .submenu .subItem:nth-child(1) {
  left: 0px;
}

.menu .submenu .subItem:nth-child(2) {
  left: 60px;
}

.menu .submenu .subItem:nth-child(3) {
  left: 120px;
}

.menu .submenu .subItem:nth-child(4) {
  left: 180px;
}

.menu.active .subItem {
  top: 0;
  opacity: 1;
}

.menu.active .subItem:nth-child(1) {
  transition-delay: 0.1s;
}

.menu.active .subItem:nth-child(2) {
  transition-delay: 0.2s;
}

.menu.active .subItem:nth-child(3) {
  transition-delay: 0.3s;
}

.menu.active .subItem:nth-child(4) {
  transition-delay: 0.4s;
}

.menu2 .submenu2 {
  top: 0;
  left: 0;
  z-index: -1;
}

.menu2 .submenu2 .submenu2Item {
  top: 0;
  left: 0;
  transition: 0.1s;
}

.menu2.active .submenu2 {
  left: 60px;
  z-index: 1;
}

.menu2.active .submenu2 .submenu2Item:nth-child(1) {
  left: 0px;
  z-index: 1;
}

.menu2.active .submenu2 .submenu2Item:nth-child(2) {
  left: 60px;
  z-index: 2;
}

.menu2.active .submenu2 .submenu2Item:nth-child(3) {
  left: 120px;
  z-index: 3;
}

.menu2.active .submenu2 .submenu2Item:nth-child(4) {
  left: 180px;
  z-index: 4;
}

 

아직은 저도 SASS를 공부하고 이리저리 적용해보고 있는 단계라서, 효율적이게 사용한 것 인지 모르겠습니다. 

그래도 분명한 것은 확실히 스타일도 모듈화 하면서 점점 프로젝트가 커지고 수정과 추가가 늘어날수록 장점이 명확해지는 것 같습니다.