친절한효자손 취미생활

지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 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%로 부여했습니다. 그 밑에 있는 나머지 요소는 백그라운드와 마우스를 올렸을 때의 백그라운드 색상 지정에 대한 부분 입니다. 이렇게 마크업을 했을 때, 제일 처음에 보신 미리보기처럼 메뉴가 전체적으로 나오게 되는 것 입니다. 이 원리를 잘 응용해서 나만의 멋진 메뉴를 구성해 보시기 바랍니다. 끝.




"친절한효자손 취미생활" 을 검색!


알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

또한 비밀댓글의 경우는 질문 내용을 공개하고 답글을 해드리고 있으니 참고하시기 바랍니다.