이렇게 여러 메뉴 중에 커서를 올려서 "제품 정보" 메뉴를 연 뒤, 열린 "제품 정보" 메뉴에 커서를 올리면 또 연필부터 여러가지의 제품들이 나오게 하는 것은 어떻게 해?
ChatGPT said:
ChatGPT
이미지에서 설명된 것처럼 "제품 정보" 메뉴에 커서를 올렸을 때, 하위 메뉴가 나타나도록 구현하려면 HTML, CSS, 그리고 JavaScript를 결합하여 멀티 레벨 드롭다운 메뉴를 만들 수 있습니다.
다음은 그 방법을 설명하는 기본적인 코드입니다.
1. HTML 구조
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 레벨 드롭다운 메뉴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="menu">
<ul>
<li class="menu-item">제품
<ul class="submenu">
<li>제품 사용법</li>
<li>드로잉팁</li>
<li class="menu-item">제품 정보
<ul class="submenu">
<li>연필</li>
<li>색연필</li>
<li>화인라이너</li>
<li>지우개</li>
<li>샤프</li>
<li>형광펜</li>
<li>마커</li>
<li>학용품</li>
<li>볼펜</li>
<li>제도용품</li>
</ul>
</li>
</ul>
</li>
<li>언론보도</li>
<li>고객지원</li>
</ul>
</nav>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 레벨 드롭다운 메뉴</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="menu">
<ul>
<li class="menu-item">제품
<ul class="submenu">
<li>제품 사용법</li>
<li>드로잉팁</li>
<li class="menu-item">제품 정보
<ul class="submenu">
<li>연필</li>
<li>색연필</li>
<li>화인라이너</li>
<li>지우개</li>
<li>샤프</li>
<li>형광펜</li>
<li>마커</li>
<li>학용품</li>
<li>볼펜</li>
<li>제도용품</li>
</ul>
</li>
</ul>
</li>
<li>언론보도</li>
<li>고객지원</li>
</ul>
</nav>
</body>
</html>
2. CSS 스타일
css
/* 기본 스타일 설정 */
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
position: relative;
padding: 10px;
cursor: pointer;
}
/* 첫 번째 레벨의 서브메뉴 숨기기 */
.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%; /* 부모 메뉴의 아래쪽에 위치 */
left: 0;
display: none;
background-color: white;
border: 1px solid #ccc;
}
/* 두 번째 레벨의 서브메뉴 숨기기 */
.menu-item .submenu {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: white;
border: 1px solid #ccc;
}
/* 첫 번째 레벨 메뉴에 마우스 올리면 서브메뉴 표시 */
.menu-item:hover > .submenu {
display: block;
}
/* 두 번째 레벨 메뉴에 마우스 올리면 서브메뉴 표시 */
.menu-item .menu-item:hover > .submenu {
display: block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
position: relative;
padding: 10px;
cursor: pointer;
}
/* 첫 번째 레벨의 서브메뉴 숨기기 */
.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%; /* 부모 메뉴의 아래쪽에 위치 */
left: 0;
display: none;
background-color: white;
border: 1px solid #ccc;
}
/* 두 번째 레벨의 서브메뉴 숨기기 */
.menu-item .submenu {
position: absolute;
left: 100%;
top: 0;
display: none;
background-color: white;
border: 1px solid #ccc;
}
/* 첫 번째 레벨 메뉴에 마우스 올리면 서브메뉴 표시 */
.menu-item:hover > .submenu {
display: block;
}
/* 두 번째 레벨 메뉴에 마우스 올리면 서브메뉴 표시 */
.menu-item .menu-item:hover > .submenu {
display: block;
}
3. 설명
- HTML 구조: 첫 번째 <ul>은 메인 메뉴를, 그 안의 <ul>들은 하위 메뉴를 나타냅니다. "제품" 메뉴의 하위 메뉴로 "제품 정보"가 있고, 그 안에도 또 다른 하위 메뉴들이 있습니다.
- CSS 스타일:
- position: relative와 position: absolute를 사용하여 메뉴의 위치를 설정합니다.
- 첫 번째 수준의 서브메뉴는 기본적으로 숨겨져 있으며(display: none), 메뉴에 마우스를 올리면(hover) 나타납니다.
- 두 번째 수준의 서브메뉴도 마찬가지로 기본적으로 숨겨져 있고, "제품 정보" 메뉴에 마우스를 올리면 표시되도록 설정합니다.
4. JavaScript 사용 (선택 사항)
JavaScript 없이도 기본적인 메뉴 동작을 구현할 수 있지만, JavaScript를 사용하여 좀 더 동적인 효과나 애니메이션을 추가할 수 있습니다.
이렇게 하면 다단계 드롭다운 메뉴가 완성되며, 사용자는 각 메뉴에 커서를 올려 해당하는 서브메뉴를 볼 수 있게 됩니다.
'언어 및 도구들 공부 > Javascript' 카테고리의 다른 글
| Object.fromEntries(formData)?? (0) | 2024.11.02 |
|---|---|
| 멀티레벨 드롭다운 메뉴 2 (1) | 2024.09.12 |
| 자바스크립트에서의 변수 선언 (0) | 2024.09.10 |
| JSON에 이미지 주소 (0) | 2024.09.09 |
| catch(e) vs catch (1) | 2024.09.08 |