[HTML & CSS] 드롭다운 메뉴 기본

 

 

   node.js 기본을 익히고 이제 웹 페이지를 제작하려던 찰나 드롭다운 메뉴 하나도 빠르게 만들지 못하는 내 자신을 발견했다. 정작 중요한게 아니라 다른걸 열심히 파고 있었단걸 깨닫고 fe의 기본인 html, css, js의 기본을 다시 탄탄히 하고자 한다. 일단 실패한 드롭다운 메뉴부터 시작해야지...

 

 

See the Pen Untitled by OnnJE (@ogtitle) on CodePen.

 

 

  일단 만든건 위와 같다. 이게 처음 막 하다보니 어떻게 원리를 적용해 드롭다운을 구현할지 생각보다 쉽지 않았다.. 그러니 나중에 봐도 쉽게 이해할 수 있게 핵심적인 부분을 정리해 보자.

 

1. 구현은 가장 깊숙한 요소부터

  실제 구현을 해보니 가장 아래의 요소 (위 드롭다운 메뉴의 경우 a 태그)부터 구현하는게 훨씬 편하다. 위 구현 예시의 경우와 같이 a 태그의 속성 설정을 통해 기본적인 너비와 높이를 설정하면(var()로 변수값을 설정했다.) 상위 요소들은 크기가 자동으로 맞춰지기 때문에 필요한 부분만 추가적으로 조작하면 된다.

 

2. dropdown menu 구현원리

 

<ul id="menu">
    <li class="menu-item">
    	<a class="menu-name" href="#">section1</a>
    </li>
    <li class="menu-item">
        <a class="menu-name" href="#">section4</a>
    </li>
    <li class="menu-item">
        <a class="menu-name" href="#">section2</a>
        <ul class="dropdown">
            <li><a class="menu-name" href="#">dropdown1</a></li>
            <li><a class="menu-name" href="#">dropdown2</a></li>
            <li><a class="menu-name" href="#">dropdown3</a></li>
        </ul>
    </li>
    <li class="menu-item">
        <a class="menu-name" href="#">section4</a>
    </li>
</ul>

 

 

  위 예시코드에서 처럼 각 컨텐츠, 메뉴는 li 태그로 구현되고 최종적으로 ul로 감싸진다. 따라서 드롭다운 메뉴는 각 메뉴에 마우스가 호버링 됐을 때, 화면에 출력이 되어야 하므로 li의 자식으로 위치하는게 이상적이다. 이 경우 드롭다운의 상위 li에 호버링 됐을시 '>' (자식 선택자)를 통해 드롭다운의 display속성을 조작하면 쉽게 구현할 수 있다.

 

3. 부모의 position:relative와 자식의 postion:absolute

  드롭다운 메뉴의 경우 position: absolute를 통해 출력되는 위치를 조정한다. 만약 이때 부모 요소에서 position: relative를 설정해놓지 않는다면, 자식은 뷰포트 좌측상단을 기준으로 설정값이 적용된다. position: relative를 설정할 경우 부모 요소를 기준으로 설정값이 적용되기 때문에 보다 쉽게 포지셔닝할 수 있다. (만약 absolute 로 설정한 뒤 offset 값을 설정하지 않는다면 기존 static일 때와 동일하게 위치하며, absolute설정시 조상 중 relative속성을 가진 요소 혹은 브라우저의 좌측 상단을 기준으로 설정된다. )