CSS 3단 메뉴 드롭다운 소스 코드

지난 시간에 이어서 오늘은 그 응용편으로 3단 메뉴를 구성해 보겠습니다. 2단 메뉴에서 한단계 더 깊은 형태이기 때문에 크게 어렵지는 않을 것 입니다. 3단 메뉴이므로 ul 태그가 총 3개 들어갑니다. 어떤 식으로 들어가는지 살펴보시겠습니다. 어떤 메뉴인지 잘 감이 안 오시면 아래의 예시를 먼저 살펴봅시다.

이것이 메인 메뉴가 가로형태인 3단 메뉴 구성의 예시 입니다. 어떤 형태인지 아시겠죠? 그러면 먼저 html 마크업 상태를 살펴보겠습니다.

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

우선 head 영역외 기타 마크업 상태는 뺐습니다. 딱 필요한 본문에 들어갈 div 영역에 대해서만 표시합니다. 이건 먼저 가로 형태의 메뉴에서 세로로 깊이가 두번 들어가는 메뉴 형태 입니다. 중간 중간에 2단까지 해서 끝난 메뉴들도 있는데 기호에 따라서 추가로 ul 그룹을 삽입하시면 3단 메뉴로 만들 수 있습니다. 그러면 CSS 스타일 상태를 살펴보겠습니다.

/*가로메뉴형*/

#menu {

height: 50px;

background: #fcc;

}

.main1 {

width: 600px;

height: 100%;

margin: 0 auto;

}

.main1>li {

float: left;

width: 25%;

line-height: 50px;

text-align: center;

position: relative;

}

.main1>li:hover .main2 {

left: 0;

}

.main1>li a {

display: block;

}

.main1>li a:hover {

background: #B21016;

color: #fff;

font-weight: bold;

}

.main2 {

position: absolute;

top: 50px;

left: -9999px;

background: #ccc;

width: 120%;

}

.main2>li {

position: relative;

}

.main2>li:hover .main3 {

left: 100%;

}

.main2>li a, .main3>li a {

border-radius: 10px;

margin: 10px;

}

.main3 {

position: absolute;

top: 0;

background: #6BD089;

width: 80%;

left: -9999px;

/*left: 100%;*/

/*display: none;*/

}

.main3>li a:hover {

background: #085820;

color: #fff;

}

여기에서 .main3 클래스 부분을 살펴보겠습니다. 이 부분은 3번째 ul에 해당하는 부분으로, 보통은 display:none; 으로 처리하는게 대부분 입니다. 그러나 여기에서는 포지션값을 왼쪽으로 -9999px을 넣었는데 이렇게 처리한 이유가 있습니다. 접근성 때문입니다. display:none; 처리를 하면 검색에서 완전 제외가 됩니다. 하지만 left:-9999px; 로 처리를 하게 되면 화면상에서 보이지는 않지만 분명히 문서내에서는 존재하게 됩니다. 그래서 검색엔진에서 이곳에 작성된 키워드를 찾게 될 수 있습니다. 따라서 li 항목에 마우스를 오버하게 되었을 때에는, left:100%; 로 마크업 해야 다시 원위치로 오게 되는 것 입니다.

100%로 지정한 이유는, .main2의 li 가로 사이즈의 가장 오른쪽으로 메뉴가 출력되어야 하기 때문에 100%로 지정했습니다. 꼭 100%가 아니어도 됩니다. 2단 메뉴의 li 가로폭을 정확히 알고 있으면 고정값으로 지정해도 상관 없습니다. 이번에는 세로형태의 3단 드롭다운 메뉴 입니다. 저는 이렇게 구성해 봤습니다.

이와같이 구성이 되어 있습니다. 개인적으로 가로 보다는 세로메뉴 구성이 더 쉽습니다. 이유는 li를 float:left 하지 않아도 되기 때문입니다. float을 하면 반드시 해제가 필요하기 때문에 이것을 마크업 하려면 태그 요소들이 더 늘어나서 복잡해 집니다. 그럼 html 상태를 살펴보겠습니다.

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

이렇게 구성을 해 봤습니다. 사실 가로형태나 세로형태나 html 상태에서 큰 차이는 없습니다. CSS 스타일이 다르죠.

/*세로형 메뉴*/

#menu2 {

border-left: 10px solid black;

}

#menu2 a {

display: block;

color: #fff;

}

.M01 {

margin-left: 20px;

width: 100px;

background: #000;

}

.M01>li, .M02>li, .M03>li {

position: relative;

width: 100%;

height: 50px;

background: #000;

text-align: center;

line-height: 50px;

}

.M01>li:hover .M02 {

left: 100px;

}

.M01>li a:hover {

display: block;

background: #AB06AD;

}

.M02, .M03 {

width: 100px;

background: black;

position: absolute;

top: 0;

left: -9999px;

}

.M02>li:hover .M03 {

left: 100px;

}

.M02>li a:hover {

display: block;

background: red;

}

.M03>li a:hover {

display: block;

background: blue;

}

CSS에서는 이렇게 구성을 해볼 수 있습니다. 딱 보시면 아시겠지만 확실히 세로형태가 더 마크업이 간단하다는것을 알 수 있습니다. 저도 아직 배우는 단계이고 이것보다 더 간단하게 구성할 수 있는 방법이 있을겁니다. 하다보면 코딩 실력이 늘어나겠죠! 티스토리 스킨을 하루빨리 만드는 날을 손꼽아 기다리면서 열심히 배우고 있습니다. 혹시 이 내용 중 이해가 안 되는 부분이 있다면 댓글로 남겨주세요. 최대한 아는 만큼 답변해 드립니다. 끝.

●CSS 드롭다운 2단구성 한꺼번에 전체메뉴 나타나게 만들기

●CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기

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