드롭다운 메뉴를 스타일링하는 6가지 예제를 제시하겠습니다. 각 예제는 HTML과 CSS 코드로 이루어져 있으며, 주석을 통해 상세한 설명이 제공됩니다.
예제 1: 기본 드롭다운 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 드롭다운 메뉴 스타일 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button>메뉴</button>
<div class="dropdown-content">
<a href="#">항목 1</a>
<a href="#">항목 2</a>
<a href="#">항목 3</a>
</div>
</div>
</body>
</html>
이 예제는 기본 드롭다운 메뉴를 만듭니다. 마우스를 메뉴 버튼 위로 가져가면 메뉴 항목이 나타납니다.
예제 2: 가로 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
/* 가로 메뉴 스타일 */
.menu {
display: flex;
}
.menu-item {
margin-right: 20px;
}
.menu-item:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item"><a href="#">메뉴 1</a></div>
<div class="menu-item"><a href="#">메뉴 2</a></div>
<div class="menu-item"><a href="#">메뉴 3</a></div>
</div>
</body>
</html>
이 예제는 가로 메뉴를 만듭니다. display: flex를 사용하여 메뉴 항목을 가로로 정렬합니다.
예제 3: 세로 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
/* 세로 메뉴 스타일 */
.menu {
display: block;
}
.menu-item {
margin-bottom: 10px;
}
.menu-item:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item"><a href="#">메뉴 1</a></div>
<div class="menu-item"><a href="#">메뉴 2</a></div>
<div class="menu-item"><a href="#">메뉴 3</a></div>
</div>
</body>
</html>
이 예제는 세로 메뉴를 만듭니다. 메뉴 항목을 위아래로 정렬하고 간격을 설정합니다.
예제 4: 아이콘 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
/* 아이콘 메뉴 스타일 */
.menu {
display: flex;
}
.menu-item {
margin-right: 20px;
}
.menu-item:last-child {
margin-right: 0;
}
.menu-item i {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item"><i class="fa fa-home"></i><a href="#">홈</a></div>
<div class="menu-item"><i class="fa fa-search"></i><a href="#">검색</a></div>
<div class="menu-item"><i class="fa fa-user"></i><a href="#">프로필</a></div>
</div>
</body>
</html>
이 예제는 아이콘을 포함한 메뉴를 만듭니다. Font Awesome 아이콘을 사용하여 각 메뉴 항목에 아이콘을 추가합니다.
예제 5: 메가 메뉴
<!DOCTYPE html>
<html>
<head>
<style>
/* 메가 메뉴 스타일 */
.mega-menu {
display: flex;
}
.mega-menu-section {
margin-right: 20px;
}
.mega-menu-section:last-child {
margin-right: 0;
}
.mega-menu-section h2 {
font-size: 16px;
margin-bottom: 10px;
}
.mega-menu-section ul {
list-style: none;
padding: 0;
}
.mega-menu-section li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="mega-menu">
<div class="mega-menu-section">
<h2>섹션 1</h2>
<ul>
<li><a href="#">항목 1</a></li>
<li><a href="#">항목 2</a></li>
<li><a href="#">항목 3</a></li>
</ul>
</div>
<div class="mega-menu-section">
<h2>섹션 2</h2>
<ul>
<li><a href="#">항목 1</a></li>
<li><a href="#">항목 2</a></li>
<li><a href="#">항목 3</a></li>
</ul>
</div>
</div>
</body>
</html>
이 예제는 메가 메뉴를 만듭니다. 여러 섹션으로 나누어 각 섹션에 항목을 나열합니다.
예제 6: 드롭다운 메뉴 애니메이션
<!DOCTYPE html>
<html>
<head>
<style>
/* 드롭다운 메뉴 애니메이션 스타일 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
}
</style>
</head>
<body>
<div class="dropdown">
<button>메뉴</button>
<div class="dropdown-content">
<a href="#">항목 1</a>
<a href="#">항목 2</a>
<a href="#">항목 3</a>
</div>
</div>
</body>
</html>
이 예제는 드롭다운 메뉴에 애니메이션을 추가합니다. opacity 속성을 이용하여 메뉴가 부드럽게 나타나고 사라지도록 설정합니다.
'CSS' 카테고리의 다른 글
| 랜딩 페이지 디자인: 랜딩 페이지 디자인. (0) | 2023.12.23 |
|---|---|
| 풀 페이지 스크롤: 풀 페이지 스크롤 디자인. (0) | 2023.12.23 |
| 토글 스위치: 토글 스위치 디자인 커스터마이징. (0) | 2023.12.23 |
| 오버레이 효과: 요소에 오버레이(뒷 배경 불투명도) 효과 추가. (0) | 2023.12.23 |
| 푸터 고정: 푸터를 페이지 하단에 고정. (0) | 2023.12.23 |