CSS를 사용하여 드롭다운 메뉴를 만드는 방법을 설명하겠습니다.
드롭다운 메뉴를 만들기 위해서는 지금까지 제가 블로그에 올린 내용들에 대해서 어느 정도 이해하셔야 합니다.
특히 position 속성, float 속성 등과 태그간에 부모, 자식 관계에 대해서 꼭 이해해 두셔야 합니다. 그렇지 않으면 상위메뉴와 하위메뉴가 만들어지는 과정을 이해하기 힘들 수 있습니다.
드롭다운 메뉴는 메인메뉴->하위메뉴 이런 형식으로 이루어져 있고 ul태그를 사용하여 만들어집니다.
드롭다운 메뉴를 만드는 것은 어렵지는 않지만 신경쓸 부분이 좀 있는데 지금부터 하나씩 살펴보겠습니다. 그리고 이 강의는 디자인적인 요소를 전혀 고려하지 않고 드롭다운을 만드는 핵심만 알려드립니다.
css 드롭다운 메뉴 만들기
다음과 같이 ul, li 태그로 가장 기본적인 리스트를 만들어 보았습니다.
드롭다운 목록을 만드는 첫 번째 단계가 위와 같이 메뉴 구성을 리스트로 만드는 것입니다.
이제 메인 메뉴의 형태를 잡아보겠습니다.
nav는 제일 상위에 있는 ul 태그의 id입니다. 그리고 이 ul 태그는 전체 리스트를 감싸고 있고 최상위 메뉴를 뜻합니다. 이 아래 있는 li태그로 상위 메뉴 목록 하나하나를 만든 거죠. 위 그림에서는 메인메뉴1와 메인메뉴2가 되겠네요.
어쨌든 nav에 지정한 css 스타일들을 살펴보겠습니다.
list-style :none:
원래 ul태그로 만든 리스트 목록 앞에는 ● 모양이 있습니다. list-style을 none으로 하면 ● 모양이 없어집니다.
height와 width로 메인 메뉴가 들어간 형태를 잡고 그 배경색(background)을 grey로 했습니다.
메인메뉴를 가로로 배치하기
float : left;
메인 메뉴 리스트를 가로로 배치하기 위한 속성입니다.
width : 150px;
각 메인 메뉴의 가로 공간을 적절히 정해줍니다.
position : relative ;
나중에 각 메인 메뉴(li 태그)의 하위 메뉴(자식 태그)에 position : absolute; 속성을 주기 위해 주는 속성입니다.
이렇게 해야 각 메인 메뉴에 대해서 상대적으로 서브 메뉴가 나타나는 위치를 알맞게 조정할 수 있습니다.
위 내용은 position 속성에 대한 이해가 필요합니다.
기본적으로 하위메뉴는 보이지 않아야 합니다. 하위 메뉴 선택자는 #nav ul이므로 여기에 작업을 해보겠습니다.
position : absolute;
이 속성을 준 후 하위 메뉴의 위치를 메인메뉴에 상대적으로 적절히 변경할 수 있습니다. (변경하는 방법으로) 여기에서는 left, top 속성을 쓰지 않았는데 이 속성을 이용해서 메인메뉴와 상대적으로 떨어진 정도를 정해주면 됩니다. 예) left:10; top 5;
display : none;
해당 요소가 보이지 않도록 합니다.
이제 메인 메뉴에 마우스를 올려놨을 때 하위 메뉴가 보이도록 해보겠습니다. 아래 추가된 코드는 상위 메뉴에 마우스를 올려놓을 때 (li:hover) 해당 하위 메뉴 (#nav li ul)가 보이도록 하는 코드입니다.
현재 메인 메뉴1에 마우스를 올려놓은 상태입니다. 마우스를 올려놓으면 하위 메뉴가 보입니다.
dispay : block;
해당 요소가 display : block; 속성으로 보이도록 합니다.
이제 다 끝났습니다. 추가적으로 하위 메뉴에 배경색을 입혀보겠습니다.
지금까지 아주 기본적인 CSS로 드롭다운 메뉴를 만드는 방법을 알아보았습니다.