CSS 드롭다운 2단구성 한꺼번에 전체메뉴 나타나게 만들기
지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 2단 메뉴가 한꺼번에 나오는 방법에 대해서 어떻게 진행하는지에 대해 알아볼 것입니다. 무슨 뜻이냐면, 1단 li 에 마우스를 오버하면 해당 li 의 메뉴에 대한 또 하나의 2단 ul li 가 나타나게 됩니다. 예를 들자면 아래와 같은 경우 입니다.
이해 되시나요? 이런 경우 입니다. 아마 이와같은 홈페이지 메뉴 구성은 심심찮게 보셨을 것입니다. 그러면 어떻게 구현되는지 살펴보도록 하겠습니다. 모바일에서 보시는 분들도 계실 수 있으니, 최대한 이미지가 선명하게 보일 수 있도록 세로로 배치하겠습니다.
참고로 이번 강좌를 이해하기 위해서는 먼저 1단 메뉴부터 구상하는 방법에 대해서 학습하시면 좋습니다. 해당 내용을 아래에 올려두겠으니 먼저 살펴봐주시면 감사하겠습니다. 이 강좌는 과거의 메뉴 배치에 대한 연장선 입니다. 태그 요소들도 그대로 활용합니다. (특히 CSS)
CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기
HTML + CSS 깊이 2단계인 메뉴 드롭다운 만들기
위의 두 개의 강좌를 먼저 보시고 지금 이 HTML 마크업 상태를 살펴보시면 어떤 차이가 있는지 금새 파악하실 수 있으실 것입니다. 자세히 보시면 2번째 깊이의 ul li 요소들이 모두 div로 새롭게 묶여 있습니다. 그리고 클래스값을 menu2 로 부여했다는것을 알 수 있습니다. HTML 태그가 다소 복잡해졌습니다. 이제 CSS를 살펴보겠습니다.
보시면 차이점이 하나 있습니다. 먼저 화살표를 봐주세요. position:relative; 가 옮겨졌습니다. 왜 옮겨졌을까요? 2단 ul에 대해서 기준점을 정확히 잡아줘야 하는 부분입니다. 두번째 메뉴들이 absolute 상태이므로 예전에 했던 것 처럼 1단의 li 에 relative를 해주면 2단 메뉴가 li 를 기준으로 옮겨지게 됩니다. 말로는 좀 설명이 어려우니 아래를 먼저 살펴보시겠습니다.
보이시나요? 이렇게 움직이게 된다는 뜻 입니다. position:relative; 요소가 1단 메뉴인 li 에 들어가 있기 때문에 저렇게 li를 기준점을 잡아서 배치가 되기 때문입니다. 그러므로 position:relative; 를 li가 아닌, 바로 한 단계 위인 부모 요소인 ul 에 배치를 해야 저렇게 각 항목별로 나타나게 되지 않을 것 입니다. 그래서 #menu1 ul 에 넣어 준 것 입니다.
다음은 #menu1 .main>li:hover .menu2 선택자 부분 입니다. 빨간색 선택자 부분이 바뀌었습니다. .menu2는 클래스값이며, 이것은 2단 구성을 위한 div 영역이라는 것을 알 수 있습니다. 그러니까 전체 메뉴로 나오게끔 하려고 이번에 새롭게 구성한 div 영역입니다. 그 안에는 2단 메뉴 구성인 ul와 li 요소들이 들어 있습니다. 1단 메뉴인 li 에 마우스가 올라가게 되면 .menu2 가 나타나게 된다는 뜻 입니다.
그리고 저기 화살표 부분도 선택자가 변경되었습니다. 2단 메뉴가 전체적으로 보여졌다 숨겨졌다 해야 하기 때문에 방금 말씀드렸던 2단 메뉴를 감싸는 div인 .menu2를 대상으로 스타일을 주면 됩니다. 각 스타일 요소는 위의 강좌에 다 설명이 되었으니 여기에서는 생략하도록 하겠습니다.
새롭게 추가가 된 부분이 #menu1 .sub 선택자 입니다. 경로를 자세히 표현한다면, #menu1 .main li .menu2 .sub 이 됩니다. 하지만 이미 자식 선택자들이 클래스값을 각자 가지고 있으므로 간단하게 줄여서 써도 상관 없습니다. 단 모든 클래스값이 달라야겠죠? .sub 클래스값이 바로 2단 구성을 하는 ul에 해당되는 부분입니다. li는 세로 정렬이지만 ul만 가로 정렬이 되는 구조이므로 .sub에서 float:left; 를 부여한 것 입니다. 또한 1단 구성의 가로 사이즈에 대해서 4분의 1씩만 차지하면 되기 때문에 가로 사이즈를 25%로 부여했습니다. 그 밑에 있는 나머지 요소는 백그라운드와 마우스를 올렸을 때의 백그라운드 색상 지정에 대한 부분 입니다. 이렇게 마크업을 했을 때, 제일 처음에 보신 미리보기처럼 메뉴가 전체적으로 나오게 되는 것 입니다. 이 원리를 잘 응용해서 나만의 멋진 메뉴를 구성해 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
