고정 헤더 영역
상세 컨텐츠
본문
반응형
ul li 가로 메뉴 만들기
- 뉴 기본 구조 설정
<ul>과 <li>를 활용하여 메뉴 구조를 잡습니다.
기본적인 스타일링과 마우스 이벤트에 대한 초기 설정을 합니다.
- 서브메뉴 디자인과 애니메이션 추가
서브메뉴를 감싸는 <div> 요소를 추가하여 위치와 스타일을 지정합니다.
CSS의 opacity와 visibility 속성을 활용하여 서브메뉴를 부드럽게 나타내고 사라지게 합니다.
마우스 오버 시 fadeIn 애니메이션을, 사라질 때 fadeOut 애니메이션을 적용합니다.
- 메뉴 아이템 선택 및 효과 추가
JavaScript를 사용하여 메뉴 아이템을 클릭할 때 선택된 상태를 관리합니다.
선택된 메뉴 아이템 및 서브메뉴에 색상 및 텍스트 효과를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu Template</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
display: flex;
justify-content: space-around;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
display: inline-block;
margin-right: 20px;
position: relative;
}
a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
}
/* Submenu Styling */
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #555;
min-width: 150px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, transform 0.5s;
transform: translateY(-20px);
}
li:hover .submenu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
animation: fadeInDown 0.5s ease-out;
}
li:not(:hover) .submenu {
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: opacity 0.5s, transform 0.5s;
animation: none;
animation: fadeOutUp 0.5s ease-in;
}
@keyframes fadeInDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeOutUp {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-20px);
opacity: 0;
}
}
.submenu a {
color: #fff;
padding: 8px;
display: block;
text-decoration: none;
transition: color 0.3s;
}
/* Text color on submenu item hover */
.submenu a:hover {
color: #ffcc00;
}
/* Background color on hover */
li:hover a {
background-color: #555;
}
/* Background color when selected */
li.active a, .submenu li.active a {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="has-submenu">
<a href="#">Services</a>
<!-- Submenu -->
<ul class="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Portfolio</a>
<!-- Submenu -->
<ul class="submenu">
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script>
// JavaScript to handle menu item selection
const menuItems = document.querySelectorAll('.has-submenu');
menuItems.forEach(item => {
item.addEventListener('click', () => {
menuItems.forEach(i => i.classList.remove('active'));
item.classList.add('active');
});
});
</script>
</body>
</html>반응형
'HTML&CSS' 카테고리의 다른 글
| CSS calc() 함수 사용법 (0) | 2024.09.23 |
|---|---|
| CSS 최적화 방법 (10) | 2024.01.10 |
| CSS로 텍스트 '...' 처리하는 방법 (2) | 2024.01.08 |
| HTML를 활용한 효과적인 레이아웃 템플릿 9가지 (3) | 2024.01.07 |
| CSS에서의 최신 기능들: CSS Grid Level 2 및 Subgrid (0) | 2024.01.07 |
