Sidmool/header.html at main · TAR0BUBBLE/Sidmool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style_header.css" />

</head>

<body>
    <header class="header">
        <div class="left-group">
            <button type="button" class="menu-btn"><img src="/images/Menu.png" alt="메뉴" /></button>
            <button type="button" class="logo"><a href="/index.html"><img src="/images/logo.png"
                        alt="로고" /></a></button>
        </div>

        <nav>
            <ul class="header-icons">
                <li><button type="button"><img src="/images/Search.png" alt="검색" /></button></li>
                <li><button type="button"><a href="/login/login.html"><img src="/images/User.png"
                                alt="마이페이지" /></a></button></li>
                <li><button type="button"><a href="/Cart/Cart.html"><img src="/images/Cart.png"
                                alt="장바구니" /></a></button></li>
            </ul>
        </nav>
    </header>

    <!-- 사이드 메뉴바 -->
    <nav id="side-menu" class="side-menu">
        <ul>
            <li>New Product</li>
            <li>Best Product</li>

            <!-- ▼ 드롭다운용 상위 항목 -->
            <li class="has-sub">
                <span class="title">All Product</span>
                <img class="arrow" src="/images/Down_arrow.png" alt="펼치기" />

                <!-- ▼ 하위(서브) 목록 -->
                <ul class="sub-menu">
                    <li class="has-detail" data-detail="by-product">제품별 <img class="arrow2"
                            src="/images/Right_arrow.png" /></li>
                    <li class="has-detail" data-detail="by-performance">성능별 <img class="arrow2"
                            src="/images/Right_arrow.png" /></li>
                    <li class="has-detail" data-detail="by-function">기능별 <img class="arrow2"
                            src="/images/Right_arrow.png" /></li>
                    <li class="has-detail" data-detail="by-skintype">피부타입별 <img class="arrow2"
                            src="/images/Right_arrow.png" /></li>
                </ul>
            </li>


            <li><a href="/ranking/B.html">Skin Fit Ranking</a></li>
            <li>Event</li>
            <li>Brand</li>
            <li>공지사항</li>
            <li>F & Q</li>
            <li>1:1 문의</li>
        </ul>

    </nav>

    <div class="detail-pane" id="detail-by-product">
        <h4 class="pane-title">제품별</h4>
        <ul>
            <li><a href="/Products/products_cleansing.html">버블/클렌징</a></li>
            <li><a href="/Products/products_skin.html">스킨/토너/미스트</a></li>
            <li><a href="/Products/products_essence.html">앰플/에센스/세럼</a></li>
            <li><a href="#">수분젤/에센셜</a></li>
            <li><a href="#">로션</a></li>
            <li><a href="#">크림</a></li>
            <li><a href="#">오일</a></li>
            <li><a href="#">마스크/팩/필링</a></li>
            <li><a href="#">썬케어</a></li>
            <li><a href="#">바디/헤어/핸드/풋</a></li>
            <li><a href="#">메이크업</a></li>
            <li><a href="#">립/아이</a></li>
            <li><a href="#">건강식품</a></li>
            <li><a href="#스">소품</a></li>
        </ul>
    </div>

    <script>
        (() => {
            /* ── 공통 DOM ───────────────────────────────────── */
            const root = document.currentScript.closest('#header-placeholder') || document;
            const menuBtn = root.querySelector('.menu-btn');
            const sideMenu = document.getElementById('side-menu');

            /* ── 햄버거 버튼: 1단 사이드바 열기/닫기 ─────────── */
            menuBtn?.addEventListener('click', () => {
                const isOpen = sideMenu.classList.toggle('open');   // 열림 여부

                if (!isOpen) {                // 🔑 닫히는 순간
                    closeDetailPane();          // ① 2단 패널 닫기
                    /* ② All Product 같은 1단 드롭도 접히게 하려면 ↓ 추가 */
                    root.querySelectorAll('.has-sub.open')
                        .forEach(li => li.classList.remove('open'));
                }
            });

            /* ── 1단: All-Product 펼치기/접기 ───────────────── */
            root.querySelectorAll('.has-sub').forEach(li => {
                li.addEventListener('click', e => {
                    li.classList.toggle('open');
                    e.stopPropagation();
                });
            });

            /* ──────────────────────────────────────────────── */
            /*  ★★ 2단 패널 토글·닫기 로직 ★★                  */
            /* ──────────────────────────────────────────────── */

            /** 패널과 화살표, 폭을 모두 닫는 함수 */
            function closeDetailPane() {
                const openPane = document.querySelector('.detail-pane.show');
                if (!openPane) return;               // 이미 닫혀 있음

                /* 1) 패널 슬라이드 아웃 */
                openPane.classList.remove('show');
                root.querySelectorAll('.has-detail.active')
                    .forEach(el => el.classList.remove('active'));
            }

            /* 2단 트리거(제품별·성분별 …) */
            root.querySelectorAll('.has-detail').forEach(item => {
                item.addEventListener('click', e => {
                    e.stopPropagation();

                    const pane = document.getElementById('detail-' + item.dataset.detail);
                    const isOpen = pane.classList.contains('show');

                    closeDetailPane();          // 항상 먼저 닫기
                    if (isOpen) return;         // 이미 열려 있던 항목이면 끝

                    /* 열기 */
                    pane.classList.add('show');  // 패널을 슬라이드 인
                    item.classList.add('active');     // 화살표 회전
                });
            });

            /* 1단 아무 곳(배경) 클릭 → 닫기 */
            sideMenu.addEventListener('click', ({ target }) => {
                if (!target.closest('.detail-pane')) closeDetailPane();
            });

        })();

    </script>


</body>

</html>