메가 메뉴(Mega Menu)는 일반적인 드롭다운 메뉴와 달리 내비게이션 바의 전체 너비를 차지하며 펼쳐지는 메뉴입니다. 여러 개의 링크나 콘텐츠를 열(column) 형태로 깔끔하게 정리할 수 있어, 항목이 많은 대형 웹사이트에서 자주 활용됩니다. 이 글에서는 자바스크립트 없이 순수 HTML과 CSS만으로 메가 메뉴를 구현하는 방법을 예제 코드와 함께 살펴보겠습니다.
구현 원리
메가 메뉴의 핵심은 다음 세 가지 CSS 속성 조합입니다.
position: absolute;와left: 0;,width: 100%;를 적용해 드롭다운 패널이 화면 왼쪽 끝부터 오른쪽 끝까지 꽉 차게 배치됩니다.- 기본 상태에서는
display: none;으로 숨겨두고, 마우스를 올렸을 때(:hover)display: block;으로 전환해 나타나게 합니다. - 패널 내부에는
float: left;와width: 50%를 지정한 열을 배치해 2단 레이아웃을 구성하고,:after의사 요소(clearfix)로 float를 정리합니다.
예제 코드
다음은 HTML과 CSS를 사용해 메가 메뉴를 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
*,*::before,*::after{
box-sizing: border-box;
}
nav {
overflow: hidden;
background-color: rgb(2, 161, 127);
font-family: Arial, Helvetica, sans-serif;
}
nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .megaButton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
background-color: rgb(0, 63, 146);
}
.megaContent {
text-align: center;
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
z-index: 1;
}
.megaContent .megaHeader {
background: rgb(119, 6, 194);
padding: 16px;
color: white;
}
.dropdown:hover .megaContent {
display: block;
}
.megaColumn {
float: left;
width: 50%;
padding: 10px;
background-color: rgb(233, 255, 198);
height: 250px;
}
.megaColumn .links {
color: black;
padding: 16px;
margin:10px;
text-decoration: none;
display: block;
text-align: left;
border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
background-color: lightblue;
}
/*Float 초기화를 위한 clearfix 트릭*/
.megaRow:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">About</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown">
<button class="megaButton">Projects ></button>
<div class="megaContent">
<div class="megaHeader">
<h2>Projects Menu</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>Commercial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
<div class="megaColumn">
<h3>Non-Commerial</h3>
<a class="links" href="#">Project 1</a>
<a class="links" href="#">Project 2</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Projects 버튼에 마우스를 올리면(hover), 내비게이션 바 전체 너비로 메가 메뉴가 아래와 같이 펼쳐집니다.
마무리
이처럼 :hover 선택자와 절대 위치(absolute) 속성만 잘 활용하면 자바스크립트 없이도 전체 너비 드롭다운 형태의 메가 메뉴를 손쉽게 만들 수 있습니다. 필요에 따라 열의 개수를 늘리거나 이미지·설명 텍스트를 추가하는 등 다양한 형태로 확장해 보시기 바랍니다.