HTML + CSS 깊이 2단계인 메뉴 드롭다운 만들기
지난 시간에 이어서 이번에는 2단계 메뉴를 만드는 방법입니다. 이전시간에 만들었던 메뉴를 그대로 활용해서 진행합니다. 따라서 이번 강좌를 이해하시는데 있어서 전 시간의 가로 형태의 1단 메뉴를 먼저 익히시고 이 글을 보시는것이 도움이 됩니다. 빠르게 참고하시라고 아래에 관련글을 남기도록 하겠습니다.
CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기
형태는 이렇습니다. 먼저 1단 메뉴는 가로 형태이고, 마우스를 올렸을 때, 세로 형태로 2단 리스트가 나오게 만드는 방법입니다. 조금 복잡하겠지만 원리만 이해하면 크게 어려운 부분은 없습니다. 그럼 한번 살펴보겠습니다.
먼저 HTML 마크업 상태 입니다. 보시면 li 안쪽에 다시한번 ul이 자리잡고 있는 것을 알 수 있습니다. 그리고 1단 ul 과 2단 ul 의 클래스값을 부여했습니다. 또한 1단은 ul이 하나지만, 2단의 ul은 1단의 li 항목 개수만큼 생성되었음을 확인할 수 있습니다.
이제 CSS 스타일을 살펴보겠습니다. 지난 시간에 이어서 그대로 업그레이드를 진행합니다. 먼저 바뀐 부분이 있습니다. #menu1 에 세로값을 주었습니다. 이유는 백그라운드 활성화 때문입니다. 그리고 바로 #menu 안에 있는 ul의 overflow:hidden; 은 없애주었습니다.
먼저 알아야 할 부분이 #menu1 .main>li 라고 하는 선택자 입니다. 이것은 .main 이라고 하는 클래스값을 가진 ul의 자식 선택자인 li 에 대해서만 스타일을 지정한다는 뜻 입니다. 왜냐하면 2단구성이다보니 2단 안쪽의 ul, li 까지 영향을 주기 때문입니다. 그러므로 1단의 li 에게만 스타일 영향을 주기 위해서 > 를 사용합니다. 안쪽에 보시면 position:relative; 라고 되어 있습니다. 이것은 차후에 다시한번 설명을 하겠습니다.
다음은 #menu1 .main>li:hover .sub 선택자의 설명 입니다. 이것은 #menu1 이라는 div 안쪽의 .main 이라고 하는 ul 의 자식 요소인 li에 hover (마우스가 올라감) 되었을 때, .sub 이라고 하는 두번째 ul에 대한 스타일을 지정하는 선택자 입니다. display:block; 이라고 되어 있으니 블록요소로 만들어 준다는 것 입니다. 하지만 여기에서의 가장 실질적인 역할은 보여지게 하는 것 입니다. 왜냐하면 보통 2단 구성 메뉴 중, 2단 메뉴는 숨겨져 있기 때문입니다.
그래서 다음 네모칸에 있는 #menu1 .main .sub 에 대한 선택자가 있습니다. 이게 바로 두번째 ul의 스타일을 지정하는 부분입니다. 안쪽의 내용들을 하나하나 설명하겠습니다.
#menu1 .main .sub {
position: absolute; → 두번째 ul li 위치를 설정. (부모요소 position:relative; 기준됨)
top: 50px; → 부모요소 position:relative; 기준으로 위에서 50px 만큼 떨어짐
left: 0; → 부모요소 position:relative; 기준으로 왼쪽에서 0px 만큼 떨어짐
width: 100%; → 부모요소의 가로 사이즈의 100% 사용
display: none; → 사라짐
}
이렇게 됩니다. 그래서 아까 #menu1 .main>li 안쪽에 position:relative; 가 있었던 것 입니다. 왜냐하면 1단 메뉴의 li 에서 하나씩 나타나게 해야 하기 때문입니다. 뒤에 나오는 나머지는 a 링크에 대한 부분입니다. 그러면 이렇게 마크업을 마무리하고 결과 화면을 보시겠습니다.
이런식으로 각 메뉴에 대한 서브메뉴들이 정상적으로 보여졌다가 사라지는것을 확인할 수 있습니다. 이것을 응용해서 자신만의 멋진 메뉴 드롭다운을 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
