drop down menu

drop down menu

안녕하세요 TriplexLab 입니다 :)
오늘은 drop down menu 직접 만들어 봅시다.

<form action="">
      <h1>드롭다운 직접 만들어보자</h1>
      <div class="dropdown">
        <button type="button" class="dropdown-toggle">
          선택해주세요
        </button>

        <ul class="dropdown-menu">
          <li class="dropdown-item">
            <button type="button" value="1" class="dropdown-option">
              메뉴1
            </button>
          </li>
          <li class="dropdown-item">
            <button type="button" value="2" class="dropdown-option">
              메뉴2
            </button>
          </li>
          <li class="dropdown-item">
            <button type="button" value="3" class="dropdown-option">
              메뉴3
            </button>
          </li>
          <li class="dropdown-item">
            <button type="button" value="4" class="dropdown-option">
              메뉴4
            </button>
          </li>
          <li class="dropdown-item">
            <button type="button" value="5" class="dropdown-option">
              메뉴5
            </button>
          </li>
          <li class="dropdown-item">
            <button type="button" value="6" class="dropdown-option">
              메뉴6
            </button>
          </li>
        </ul>
      </div>
      <button type="submit" class="next-button" disabled>다음</button>
</form>

 

*{box-sizing:border-box;margin:0}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100vh;padding-bottom:30px;font-family:'Spoqa Han Sans Neo',sans-serif;color:#3f4150;background-color:#f4f7fa}
li,ul{list-style-type:none;padding-left:0;margin-left:0}
button{font-family:'Spoqa Han Sans Neo',sans-serif;font-size:15px;line-height:1;letter-spacing:-.02em;color:#3f4150;background-color:#fff;border:none;cursor:pointer}
button:active,button:focus{outline:0;box-shadow:none}
.title{width:200px;margin-bottom:16px}
.title img{width:100%;height:auto}
form{padding:40px;background-color:#fff;border-radius:6px}
form h1{margin-bottom:8px;font-size:16px;font-weight:500;letter-spacing:-.02em;color:#3f4150}
.dropdown{position:relative;z-index:1;width:300px;margin-bottom:8px}
.dropdown-toggle{width:100%;height:50px;padding:0 16px;line-height:50px;color:rgba(133,136,150,.5);text-align:left;border:1px solid rgba(224,226,231,.75);border-radius:6px;transition:border-color .1s ease-in}
.dropdown-toggle.selected{color:#3f4150;border-color:rgba(224,226,231,1)}
.dropdown-toggle:active{border-color:rgba(224,226,231,1)}
.dropdown-menu{position:absolute;z-index:2;top:calc(100% + 4px);left:0;width:100%;max-height:0;overflow:hidden;background-color:#fff;border:1px solid transparent;border-radius:6px;transition:border-color .2s ease-in,padding .2s ease-in,max-height .2s ease-in,box-shadow .2s ease-in}
.dropdown-menu.show{padding:8px 0;max-height:280px;border-color:rgba(224,226,231,.5);box-shadow:0 4px 9px 0 rgba(63,65,80,.1)}
.dropdown-option{width:100%;height:44px;padding:0 16px;line-height:44px;text-align:left}
.dropdown-option:hover{background-color:#f8f9fa}
.next-button{display:block;width:100%;height:44px;padding:0 16px;line-height:44px;color:#f8f9fa;background-color:#1b1c32;border-radius:6px;transition:background-color 150ms ease-in}
.next-button:disabled{background-color:#e0e2e7;cursor:not-allowed}

 

(function() {
  const DROPDOWN = document.querySelector('.dropdown')
  const TOGGLE_BUTTON = document.querySelector('.dropdown-toggle')
  const MENU = document.querySelector('.dropdown-MENU')
  const OPTIONS = document.querySelectorAll('.dropdown-option')
  const NEXT_BUTTON = document.querySelector('.next-button')

  TOGGLE_BUTTON.onclick = function() {
  	MENU.classList.toggle('show')
  };

  TOGGLE_BUTTON.onblur = function() {
  	MENU.classList.remove('show')
  };

  const OPTION = function () {
  	const VALUE = this.textContent.trim()
  	TOGGLE_BUTTON.textContent = VALUE
  	TOGGLE_BUTTON.classList.add('selected')
  	NEXT_BUTTON.removeAttribute('disabled')
  };

  OPTIONS.forEach(function (item) {
  	item.addEventListener('click', OPTION)
  });
})();

 

여기까지 작업한 것을 한번 정리해 봤습니다.
궁금하신 분들은 얼마든지 다운로드하여서  Test 해 보세요~

dropDown.zip

0.00MB