https://ssupl.com/data/skin/front/19-07_C/js/top_menu_uni.js

1(function () {
2    'use strict';
3
4    var menuData = [
5        {
6            name: '타이어',
7            url: '/goods/goods_list.php?cateCd=107014'
8        },
9        {
10            name: '블랙박스',
11            url: '/goods/goods_list.php?cateCd=107018'
12        },
13        {
14            name: '케이스',
15            url: '/goods/goods_list.php?cateCd=107003',
16            children: [
17                {
18                    name: '탑케이스',
19                    url: '/goods/goods_list.php?cateCd=107003002'
20                },
21                {
22                    name: '사이드케이스',
23                    url: '/goods/goods_list.php?cateCd=107003004'
24                },
25                {
26                    name: '새들백',
27                    url: '/goods/goods_list.php?cateCd=107003006'
28                },
29                {
30                    name: '탱크백 | 핸들백',
31                    url: '/goods/goods_list.php?cateCd=107003008'
32                },
33                {
34                    name: '시트백',
35                    url: '/goods/goods_list.php?cateCd=107003009'
36                },
37                {
38                    name: '센터백',
39                    url: '/goods/goods_list.php?cateCd=107003010'
40                },
41                {
42                    name: '짐끈',
43                    url: '/goods/goods_list.php?cateCd=107003011'
44                },
45                {
46                    name: '기타',
47                    url: '/goods/goods_list.php?cateCd=107003012'
48                }
49            ]
50        },
51		
52		  {
53            name: '카플레이',
54            url: '/goods/goods_list.php?cateCd=107036',
55            children: [
56                {
57                    name: '이노브',
58                    url: '/goods/goods_list.php?cateCd=107036001'
59                },
60                {
61                    name: '치지',
62                    url: '/goods/goods_list.php?cateCd=107036002'
63                },
64                
65            ]
66        },
67
68        {
69            name: '핸드폰 거치대',
70            url: '/goods/goods_list.php?cateCd=107022',
71            children: [
72                {
73                    name: '자석 거치대',
74                    url: '/goods/goods_list.php?cateCd=107022026'
75                },
76                {
77                    name: '아웃플로러',
78                    url: '/goods/goods_list.php?cateCd=107022029'
79                },
80                {
81                    name: '픽디자인',
82                    url: '/goods/goods_list.php?cateCd=107022028'
83                },
84                {
85                    name: 'SP커넥트',
86                    url: '/goods/goods_list.php?cateCd=008365'
87                },
88                {
89                    name: '램마운트',
90                    url: '/goods/goods_list.php?cateCd=107022021'
91                },
92                {
93                    name: '기타 브랜드',
94                    url: '/goods/goods_list.php?cateCd=107022022'
95                }
96            ]
97        },
98        {
99            name: '핸드폰 충전',
100            url: '/goods/goods_list.php?cateCd=107017'
101        },
102        {
103            name: '컵홀더',
104            url: '/goods/goods_list.php?cateCd=107028'
105        },
106        {
107            name: '배터리',
108            url: '/goods/goods_list.php?cateCd=107012'
109        },
110        {
111            name: '오일',
112            url: '/goods/goods_list.php?cateCd=107009'
113        },
114        {
115            name: '케미컬',
116            url: '/goods/goods_list.php?cateCd=107010'
117        },
118        {
119            name: '기타',
120            url: '/goods/goods_list.php?cateCd=107035'
121        }
122    ];
123
124    var rendered = false;
125
126    function createMenu(items, depth) {
127        var list = document.createElement('ul');
128
129        list.className = 'main' + depth;
130
131        items.forEach(function (item) {
132            var listItem = document.createElement('li');
133            var link = document.createElement('a');
134
135            link.href = item.url;
136            link.textContent = item.name;
137
138            listItem.appendChild(link);
139
140            if (item.children && item.children.length) {
141                listItem.appendChild(
142                    createMenu(item.children, depth + 1)
143                );
144            }
145
146            list.appendChild(listItem);
147        });
148
149        return list;
150    }
151
152    function renderMenu() {
153        var container;
154
155        if (rendered) {
156            return;
157        }
158
159        container = document.getElementById(
160            'ssuplUniversalMenuContainer'
161        );
162
163        if (!container) {
164            return;
165        }
166
167        container.appendChild(createMenu(menuData, 2));
168        container.setAttribute('aria-hidden', 'false');
169
170        rendered = true;
171    }
172
173    function closeMenu() {
174        var container = document.getElementById(
175            'ssuplUniversalMenuContainer'
176        );
177
178        if (container) {
179            container.setAttribute('aria-hidden', 'true');
180        }
181    }
182
183    function initializeMenu() {
184        var menu = document.getElementById('ssuplUniversalMenu');
185
186        if (!menu) {
187            return;
188        }
189
190        menu.addEventListener('mouseenter', renderMenu);
191        menu.addEventListener('focusin', renderMenu);
192        menu.addEventListener('touchstart', renderMenu, {
193            passive: true
194        });
195
196        menu.addEventListener('mouseleave', closeMenu);
197    }
198
199    if (document.readyState === 'loading') {
200        document.addEventListener(
201            'DOMContentLoaded',
202            initializeMenu
203        );
204    } else {
205        initializeMenu();
206    }
207})();