드롭다운 메뉴 만들기 (HTML/CSS) : kuzuro

드롭다운 메뉴란, 마우스를 가져가면 숨겨져있던 하위 메뉴가 나오는 방식의 메뉴입니다. 계층구조의 메뉴에 사용하기 적합하고, 상위 메뉴만 보여주고 필요한 경우에만 하위 메뉴를 보여주므로 공간적으로도 유용합니다.

먼저 기본적인 목록을 작성합니다.

<!doctype html>
<html>
<head>
    <title>드롭다운 메뉴</title>
</head>
<body>

<div id="container">
<ul>
    <li>메뉴 1</li>
    <li>메뉴 2</li>
    <li> 메뉴 3</li>
    <li>메뉴 4</li>
    <li>메뉴 5</li>   
</ul>
</div>
</body>
</html>

실행하면 심심한 화면이 반깁니다.

이제 하위 메뉴를 추가합니다. 하위 메뉴는 상위 메뉴의 <li> ~ </li>내부에 들어가있습니다.

<!doctype html>
<html>
<head>
    <title>드롭다운 메뉴</title>
</head>
<body>

<div id="container">
<ul>
    <li>메뉴 1</li>
    <li>
        메뉴 2
        <ul>
            <li>메뉴 2-1</li>
            <li>메뉴 2-2</li>
            <li>메뉴 2-3</li>
        </ul>   
    </li>
    <li>
        메뉴 3
        <ul>
            <li>메뉴 3-1</li>
            <li>메뉴 3-2</li>
            <li>메뉴 3-3</li>
        </ul>   
    </li>
    <li>메뉴 4</li>
    <li>메뉴 5</li>      
</ul>
</div>
</body>
</html>

여전히 심심하지만, 적어도 상위와 하위정도는 구분할 수 있습니다.

이제 각 요소에 클래스를 추가합니다. 클래스명은 역할에 맞는 고유명이 좋습니다만, 저는 네이밍 센스가 없어서 대충 지었습니다.

<!doctype html>
<html>
<head>
    <title>드롭다운 메뉴</title>
</head>
<body>

<div id="container">
<ul class="myMenu">
    <li class="menu1">메뉴 1</li>
    <li class="menu2">
        메뉴 2
        <ul class="menu2_s submenu">
            <li>메뉴 2-1</li>
            <li>메뉴 2-2</li>
            <li>메뉴 2-3</li>
        </ul>   
    </li>
    <li class="menu3">
        메뉴 3
        <ul class="menu3_s submenu">
            <li>메뉴 3-1</li>
            <li>메뉴 3-2</li>
            <li>메뉴 3-3</li>
        </ul>   
    </li>
    <li class="menu4">메뉴 4</li>
    <li class="menu5">메뉴 5</li>   
</ul>
</div>
</body>
</html>

상위 메뉴와 하위 메뉴 모두 고유한 클래스가 부여되었으며, 하위 메뉴는 고유한 클래스명외에도 submenu라는 클래스가 있습니다. 이 클래스는 하위 클래스를 모두 선택할 때 사용하는 용도로 사용됩니다.

이제 CSS, 즉 스타일을 추가합니다. 스타일은 <head> ~ </head>내부에 들어갑니다.

<style>
    ul, ol, li { list-style:none; margin:0; padding:0; }
   
    ul.myMenu {}
    ul.myMenu > li { display:inline-block; width:80px; padding:5px 10px; background:#eee; text-align:center; }
    ul.myMenu > li ul.submenu { display:none; }
</style>

실행해보면, 상위 메뉴만 보이게되며 회색의 박스로 바뀐걸 알 수 있습니다.

하위 메뉴 선택자인 ul.myMenu > li ul.submenu의 내부 코드 display:none; 를 주석처리합니다.

숨겨져있던 하위 메뉴가 나오게되는데, 하위 메뉴가 있는 메뉴2와 메뉴3은 4줄로 되어있기 때문에 다른 메뉴와 높이 차이가 생겨서 위 화면처럼 보이게 됩니다.

ul.myMenu > li 와 ul.myMenu > li ul.submenu에 포지션(position)을 이용하여 자리를 잡아주게되면

이렇게 어느정도 모양을 잡아갑니다.

하위 메뉴의 디자인은 상위 메뉴와 같게할 예정이므로, 상위 메뉴의 코드를 그대로 재활용합니다.

<style>
    ul, ol, li { list-style:none; margin:0; padding:0; }
   
    ul.myMenu {}
    ul.myMenu > li { display:inline-block; width:80px; padding:5px 10px; background:#eee; text-align:center; position:relative; }
    ul.myMenu > li ul.submenu { /* display:none;*/ position:absolute; top:30px; left:0; }
    ul.myMenu > li ul.submenu > li { display:inline-block; width:80px; padding:5px 10px; background:#eee; text-align:center; }
</style>

이제 디자인이 통일되었습니다.

ul.myMenu > li ul.submenu의 주석부분을 제거하여, 다시 적용되도록 하고, ul.myMenu > li:hover ul.submenu { display:block; }를 추가합니다.

:hover는 가상선택자로서, 마우스가 해당 요소 위에 올라갔을 경우에 적용되는 선택자입니다.

즉 ul.myMenu > li ul.submenu { display:none; }는 마우스가 올라가지 않았을 때 보이지 않고(display:none;) ul.myMenu > li:hover ul.submenu { display:block; }는 마우스가 올라갔을 때 보이게(display:block;) 됩니다.

메뉴2와 메뉴3에 마우스를 올리면 하위 메뉴가 나옵니다.

마우스가 현재 어떤 메뉴 위에있는지 확인하기 위해 CSS 코드를 추가합니다.

모든 메뉴를 배경과 같은 색(#eee)의 테두리를 주고(border:1px solid #eee;), 마우스가 올라갔을 때 배경색을 흰색(#fff)으로 변경되게 합니다.

<style>
    ul, ol, li { list-style:none; margin:0; padding:0; }
   
    ul.myMenu {}
    ul.myMenu > li { display:inline-block; width:80px; padding:5px 10px; background:#eee; border:1px solid #eee; text-align:center; position:relative; }
    ul.myMenu > li:hover { background:#fff; }
    ul.myMenu > li ul.submenu { display:none; position:absolute; top:30px; left:0; }
    ul.myMenu > li:hover ul.submenu { display:block; }
    ul.myMenu > li ul.submenu > li { display:inline-block; width:80px; padding:5px 10px; background:#eee; border:1px solid #eee; text-align:center; }
    ul.myMenu > li ul.submenu > li:hover { background:#fff; }
</style>

이제 마우스가 올라간 메뉴는 배경색이 바뀌게 되어, 사용자가 어느 메뉴에 마우스를 올리고 있는지 알 수 있게 됩니다.

마지막으로 작업이 완료되었으면 CSS를 정리합니다. 중복되는 코드를 합치거나 HTML의 순서와 같게 하거나, 프로젝트의 규칙에 맞도록 수정합니다.

위 화면에서 초록색 네모 안에 있는 코드와 파랑색 네모 안에 있는 코드는 동일한 기능을 가진 코드입니다.

초록색 코드는 기능의 순서대로 되어있고, 파랑색 코드는 같은 코드끼리 묶어두었습니다. 개인이나 팀이 정한 기준에 맞게 정리하여 작업할 때 불필요한 지체가 없도록 주의합니다.