03 menu
미리보기
- HTML
- CSS
- JS
- 스티키
1<!DOCTYPE html>2 <html lang="ko">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>2단계 메가메뉴</title>7 <link rel="stylesheet" href="menu.css">8 </head>9 <body>10 <nav class="nav">11 <ul class="menu">12 <li class="item">13 <a href="#" class="link">카테고리1</a>14 <div class="mega">15 <div class="row">16 <div class="col">17 <h3>서브1-1</h3>18 <ul>19 <li><a href="#">항목1</a></li>20 <li><a href="#">항목2</a></li>21 <li><a href="#">항목3</a></li>22 </ul>23 </div>24 <div class="col">25 <h3>서브1-2</h3>26 <ul>27 <li><a href="#">항목1</a></li>28 <li><a href="#">항목2</a></li>29 <li><a href="#">항목3</a></li>30 </ul>31 </div>32 <div class="col">33 <h3>서브1-3</h3>34 <ul>35 <li><a href="#">항목1</a></li>36 <li><a href="#">항목2</a></li>37 <li><a href="#">항목3</a></li>38 </ul>39 </div>40 </div>41 </div>42 </li>43 <li class="item">44 <a href="#" class="link">카테고리2</a>45 <div class="mega">46 <div class="row">47 <div class="col">48 <h3>서브2-1</h3>49 <ul>50 <li><a href="#">항목1</a></li>51 <li><a href="#">항목2</a></li>52 </ul>53 </div>54 <div class="col">55 <h3>서브2-2</h3>56 <ul>57 <li><a href="#">항목1</a></li>58 <li><a href="#">항목2</a></li>59 </ul>60 </div>61 </div>62 </div>63 </li>64 <li class="item">65 <a href="#" class="link">카테고리3</a>66 <div class="mega">67 <div class="row">68 <div class="col">69 <h3>서브3-1</h3>70 <ul>71 <li><a href="#">항목1</a></li>72 <li><a href="#">항목2</a></li>73 <li><a href="#">항목3</a></li>74 <li><a href="#">항목4</a></li>75 </ul>76 </div>77 <div class="col">78 <h3>서브3-2</h3>79 <ul>80 <li><a href="#">항목1</a></li>81 <li><a href="#">항목2</a></li>82 </ul>83 </div>84 <div class="col">85 <h3>서브3-3</h3>86 <ul>87 <li><a href="#">항목1</a></li>88 <li><a href="#">항목2</a></li>89 <li><a href="#">항목3</a></li>90 </ul>91 </div>92 <div class="col">93 <h3>서브3-4</h3>94 <ul>95 <li><a href="#">항목1</a></li>96 <li><a href="#">항목2</a></li>97 </ul>98 </div>99 </div>100 </div>101 </li>102 <li class="item">103 <a href="#" class="link">카테고리4</a>104 <div class="mega">105 <div class="row">106 <div class="col">107 <h3>서브4-1</h3>108 <ul>109 <li><a href="#">항목1</a></li>110 <li><a href="#">항목2</a></li>111 <li><a href="#">항목3</a></li>112 </ul>113 </div>114 </div>115 </div>116 </li>117 </ul>118 </nav>119
120 <section>121 <h1>2단계 메가메뉴 예제</h1>122 <p>상단 메뉴에 마우스를 올려보세요.</p>123 </section>124
125 <script src="menu.js"></script>126 </body>127 </html>1* {2 margin: 0;3 padding: 0;4 box-sizing: border-box;5 }6
7 body {8 font-family: sans-serif;9 }10
11 .nav {12 background: #333;13 position: relative;14 z-index: 999;15 }16
17 .menu {18 list-style: none;19 display: flex;20 justify-content: space-evenly;21 align-items: center;22 width: 100%;23 max-width: 1200px;24 margin: auto;25 text-align: center;26 }27
28 .item {29 width: calc(80% / 4);30 }31
32 .link {33 display: block;34 padding: 15px 20px;35 color: #fff;36 text-decoration: none;37 }38
39 .link:hover {40 background: #555;41 }42
43 .mega {44 position: absolute;45 top: 100%;46 left: 0;47 width: 100vw;48 background: #eee;49 border-bottom: 1px solid #ddd;50 max-height: 0;51 overflow: hidden;52 transition: max-height 0.3s;53 z-index: 1000;54 }55
56 .item:hover .mega,57 .item:focus-within .mega,58 .item.on .mega {59 max-height: 500px;60 }61
62 .row {63 display: flex;64 padding: 20px;65 gap: 30px;66 max-width: 1200px;67 margin: 0 auto;68 }69
70 .col {71 flex: 1;72 }73
74 .col h3 {75 margin-bottom: 10px;76 font-size: 14px;77 }78
79 .col ul {80 list-style: none;81 }82
83 .col ul li {84 margin-bottom: 5px;85 }86
87 .col ul li a {88 color: #333;89 text-decoration: none;90 font-size: 13px;91 }92
93 .col ul li a:hover {94 text-decoration: underline;95 }96
97 .cnt {98 padding: 50px;99 }100
101 section {102 padding: 2vw;103 height: 100vh;104 }1const nav = document.querySelector('.nav');2const items = document.querySelectorAll('.item');3
4// 마우스 오버로 메뉴 열기5items.forEach(item => {6 item.addEventListener('mouseenter', () => {7 // 다른 메뉴 닫기8 items.forEach(i => i.classList.remove('on'));9 // 현재 메뉴 열기10 item.classList.add('on');11 });12});13
14// nav 영역 벗어나면 모두 닫기15nav.addEventListener('mouseleave', () => {16 items.forEach(item => item.classList.remove('on'));17});18
19// ESC 키로 닫기20document.addEventListener('keydown', (e) => {21 if (e.key === 'Escape') {22 items.forEach(item => item.classList.remove('on'));23 }24});1 .nav.sticky {2 position: fixed; /* 고정 상태 */3 top: 0;4 left: 0;5 width: 100%;6}1// nav의 시작 위치 저장2 const navTop = nav.offsetTop;3
4 // 스크롤 이벤트5 window.addEventListener('scroll', () => {6 if (window.scrollY > navTop) {7 nav.classList.add('sticky'); // nav 높이 넘으면 고정8 } else {9 nav.classList.remove('sticky'); // 위로 올라가면 해제10 }11 });