[javascript] HTML 드롭다운 메뉴 만들기 (drop-down)

참고: https://www.freecodecamp.org/news/html-drop-down-menu-how-to-add-a-drop-down-list-with-the-select-element/

드롭다운 메뉴는 다양한 웹 사이트, 응용프로그램, 웹 페이지에서 목록을 표시하기 위해 사용하고 있습니다. 이를 사용하여 네비게이션 메뉴, 양식 옵션 등을 만들 수 있습니다. 이러한 것 들을 보다보면 메뉴를 만드는게 얼마나 복잡할지 짐작할 수 있습니다. 사실 경우에 따라 조금 복잡한 경우도 있습니다.

드롭다운 메뉴는 사용자가 메뉴를 클릭하거나 마우스 커서를 올리면 아래로 쭉 펼쳐지는 옵션 목록입니다. 또한 이 메뉴는 사용자가 다시 클릭하거나 커서를 빼면 사라집니다.

이 포스트에서는 웹 페이지에 드롭다운 메뉴를 추가하는 방법을 살펴보겠습니다. 또한 사용 가능한 다양한 옵션과 마우스 커서의 호버로 작동하는 드롭다운 메뉴를 만드는 방법을 알아보겠습니다.

HTML 드롭다운 목록을 만드는 방법

HTML에서는 기본적으로 <select> 태그와 <option> 태그로 드롭다운 목록을 만들 수 있습니다. 이는 주로 form에서 옵션 목록 중 하나를 선택할 때 많이 사용합니다. <select> 태그에는 name 및 id 두 가지 속성이 있습니다.

<select name="" id="">
  <option value="">...</option>
  // ...
</select>

form에서 선택 항목을 제출할 때 select 태그의 name 속성을 사용하여 드롭다운을 구분합니다. label 태그의 for 속성과 select 태그의 id 값을 맞춰 둘을 연결할 수 있습니다.

<label for="languages">List of Languages:</label>
<select name="" id="languages">
  <option value="">...</option>
  // ...
</select>

select 태그에는 disabled(select 필드 비활성화), required(form에서 사용 시 필수 선택) 등의 옵셔널 불린 타입의 속성도 있습니다.

<select name="" id="languages" required>
  // ...
</select>

// Or

<select name="" id="languages" disabled>
  // ...
</select>

select 태그 안에는 여러개의 option 태그를 넣을 수 있습니다. option 태그에는 option이 선택 되었을 때 전달해줄 값을 가지는 value 라는 속성이 있습니다.

<select name="language" id="language">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="c++">C++</option>
  <option value="java">Java</option>
</select>

select 태그와 마찬가지로 option 태그에도 disabled(메뉴에서 option 비활성화), selected(페이지가 처음 로드되었을 때 첫 번째 옵션이 아닌 selected로 표시된 option이 선택되도록) 등의 옵셔널 속성이 있습니다.

See the Pen select option drop-down by shinyks (@shinyks) on CodePen.

 

 

마우스 호버 드롭다운 만드는 방법

다양한 최신 웹 페이지를 보면 대부분 드롭다운 메뉴가 있음을 알 수 있습니다. 이러한 메뉴는 관련된 링크를 하나로 묶는 네비게이션 용도로 사용됩니다. 대부분의 경우 메뉴에 마우스를 가져가면 드롭다운 목록이 나타납니다.

이러한 메뉴를 한번에 만들어주는 HTML 코드는 없기 때문에 여러가지 방법으로 만들어야합니다. CSS 스타일을 사용하면 사용자가 메뉴 위로 마우스를 가져가면 드롭다운 목록을 표시하거나 숨길 수 있습니다. 이를 위한 가장 좋은 접근 방법은 메뉴와 드롭다운을 포함하는 div를 만드는 것 입니다.

<div class="dropdown">
  <button>Profile</button>
  <div class="dropdown-options">
    <a href="#">Dashboard</a>
    <a href="#">Setting</a>
    <a href="#">Logout</a>
  </div>
</div>

이 div는 컨테이너 역할을 하며 position은 relative로 display는 inline-block으로 설정하여 드롭다운이 메뉴 밑에 보이도록 합니다.

.dropdown {
  display: inline-block;
  position: relative;
}

원한다면 button과 dropdown-options를 스타일링 할 수도 있습니다. 여기서 가장 중요한 style은 호버 효과를 내기 위해 dropdown-options를 보이지 않게 하는 것 입니다. 그 다음 마우스가 메뉴에 호버되면 목록을 보여주기 위해 display를 block으로 설정하는 것 입니다.

.dropdown-options {
  display: none;
  position: absolute;
  overflow: auto;
}

.dropdown:hover .dropdown-options {
  display: block;
}

아래의 codepen을 참고해서 더 멋지게 스타일링 할 수도 있습니다.

See the Pen hover drop-down by shinyks (@shinyks) on CodePen.

정리

이 포스트에서는 select 태그를 사용하여 드롭다운 목록을 만드는 방법을 알아봤습니다. 마우스 호버 효과를 처리하기 위해 CSS로 호버 드롭다운 메뉴를 만드는 방법도 알아봤습니다.

관련 글

CSS responsive grid (flexbox)