GnbWeb.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : GnbWeb.html
  7. * @desc : GNB
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2021.01.28 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <header id="header" th:fragment="gnb">
  18. <!-- head start -->
  19. <div class="common_header">
  20. <div class="hd_top_banner" style="background-color:#fd4801;">
  21. <a href="" class="t_bnr">
  22. <span style="margin:0 auto;height:60px;line-height:60px;font-size: 20px;font-weight: 600;letter-spacing: -.025em; color:#fff;">APP 수신동의 하면 1만 포인트 증정!</span>
  23. <!--<img src="ABC.jpg" alt="프로모션">-->
  24. </a>
  25. </div>
  26. <!-- <div class="quick_menu_group"> -->
  27. <!-- <div class="area"> -->
  28. <!-- <div> -->
  29. <!-- <span><a href="" title="바로가기">위치테스트1</a></span> -->
  30. <!-- <span><a href="" title="바로가기">위치테스트2</a></span> -->
  31. <!-- </div> -->
  32. <!-- <div class="inr"> -->
  33. <!-- <span><a href="" title="바로가기">로그인</a></span> -->
  34. <!-- <span><a href="" title="바로가기">회원가입</a></span> -->
  35. <!-- <span><a href="" title="바로가기">마이페이지</a></span> -->
  36. <!-- <span><a href="" title="바로가기">고객센터</a></span> -->
  37. <!-- <span><a href="" onclick="AppDownloadPopup();" title="바로가기">앱다운로드</a></span> -->
  38. <!-- </div> -->
  39. <!-- </div> -->
  40. <!-- </div> -->
  41. <div class="area">
  42. <div class="logo">
  43. <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">
  44. <h1>
  45. <i class="ico ico_logo"></i>
  46. <em class="blind">STYLE24</em>
  47. </h1>
  48. </a>
  49. </div>
  50. <div class="util_group">
  51. <span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGIN);" title="로그인 바로가기">로그인</a></span>
  52. <span th:if="${sessionInfo != null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGOUT);" title="로그아웃">로그아웃</a></span>
  53. <span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN);" title="회원가입 바로가기">회원가입</a></span>
  54. <span><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE);" title="마이페이지 바로가기">마이페이지</a></span>
  55. </div>
  56. </div>
  57. <div class="gnb">
  58. <!-- nav -->
  59. <div class="nav" id="header_area_01">
  60. <ul class="bundle" id="nav1" >
  61. <!-- [D] 전체메뉴 열림 닫힘 구분 클래스 on -->
  62. <li class="all_menu">
  63. <a href="#">브랜드</a>
  64. <div class="depth_menu">
  65. <div style="background:#333; max-width: 1780px; margin: 0 auto;">
  66. <p>브랜드</p>
  67. <div class="step1">
  68. <ul>
  69. <li><a href="#" title="바로가기">1차_1</a></li>
  70. <li><a href="#" title="바로가기">1차_2</a></li>
  71. </ul>
  72. </div>
  73. <div class="step2">
  74. <ul>
  75. <li><a href="#" title="바로가기">2차_1</a></li>
  76. </ul>
  77. <ul>
  78. <li><a href="" title="바로가기">3차_1</a></li>
  79. <li><a href="" title="바로가기">3차_2</a></li>
  80. </ul>
  81. </div>
  82. </div>
  83. </div>
  84. </li>
  85. </ul>
  86. <ul class="bundle" id="nav2" >
  87. <li><a href="#">여성</a></li>
  88. <li><a href="#">남성</a></li>
  89. <li><a href="#">유아동</a></li>
  90. <li><a href="#">골프</a></li>
  91. <li><a href="#">라이프</a></li>
  92. </ul>
  93. <ul class="bundle" id="nav3">
  94. <li class="active" ><a href="#">베스트</a></li>
  95. <li><a href="#">핫딜</a></li>
  96. <li><a href="#">기획전</a></li>
  97. <li><a href="#">총알배송</a></li>
  98. <li><a href="#">아울렛</a></li>
  99. <li><a href="#">룩북</a></li>
  100. <li><a href="#">이벤트/혜택</a></li>
  101. </ul>
  102. </div>
  103. <!-- // nav -->
  104. <!-- search -->
  105. <div class="search">
  106. <div class="area">
  107. <form id="searchMainForm" name="searchMainForm">
  108. <fieldset>
  109. <legend>통합검색</legend>
  110. <input type="text" id="search" name="search" value="" placeholder="모이몰론, 남들보다 빠르게! 신상 check" class="search_input" title="검색어 입력" maxlength="100">
  111. <div class="search_group" id="ark" style="display: none;">
  112. <div id="ark_down" style="position: absolute; display: block; cursor: pointer; top: 3px; left: 366px;"></div>
  113. <div id="ark_up" style="position: absolute; display: none; cursor: pointer; top: 3px; left: 366px;"></div>
  114. <div class="area">
  115. <p class="blind">연관검색</p>
  116. <div class="search_list">
  117. <div id="ark_content_list" style="width: 410px;"></div>
  118. <div id="ark_category_list" class="category"></div>
  119. <div id="ark_event_list" class="exhibition"></div>
  120. <div id="ark_powerdeal_list"></div>
  121. </div>
  122. <div class="close">
  123. <a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
  124. </div>
  125. </div>
  126. </div>
  127. <!-- 검색어 입력전 -->
  128. <div id="mykeyword" class="my_search_group sch_auto" style="display: none;">
  129. <p class="blind">인기 검색어 &amp; 최근 검색어</p>
  130. <div class="area">
  131. <div class="hot_search_list" id="popkeyword">
  132. <p>인기 검색어</p>
  133. <ul>
  134. <li>
  135. <a href="#"><span>1</span>나이키</a>
  136. </li>
  137. <li>
  138. <a href="#"><span>2</span>tamiya</a>
  139. </li>
  140. <li>
  141. <a href="#"><span>3</span>니콘 z6</a>
  142. </li>
  143. <li>
  144. <a href="#"><span>4</span>갤럭시 자켓</a>
  145. </li>
  146. <li>
  147. <a href="#"><span>5</span>아동운동화</a>
  148. </li>
  149. <li>
  150. <a href="#"><span>6</span>타미야</a>
  151. </li>
  152. <li>
  153. <a href="#"><span>7</span>널디</a>
  154. </li>
  155. <li>
  156. <a href="#"><span>8</span>호박목걸이</a>
  157. </li>
  158. <li>
  159. <a href="#"><span>9</span>제시뉴욕</a>
  160. </li>
  161. <li>
  162. <a href="#"><span>10</span>뉴에라</a>
  163. </li>
  164. </ul>
  165. </div>
  166. <div class="my_search_list" id="searchkeyword">
  167. <p>최근 검색어</p>
  168. <button type="button" onclick="removeMyKeyword();">최근 검색어 전체삭제<i class="ico ico_mysearch_delete"></i></button>
  169. </div>
  170. </div>
  171. <div class="close">
  172. <a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
  173. </div>
  174. </div>
  175. <!-- // 검색어 입력전 -->
  176. <button type="button" class="close"><i class="ico ico_search_close"><em>닫기</em></i></button>
  177. <button type="button" class="sch_btn" onclick="goSearch();"><i class="ico ico_search"><em>검색</em></i></button>
  178. </fieldset>
  179. </form>
  180. </div>
  181. <a href="#" class="btn_ico btn_cart" title="장바구니 바로가기"><i class="ico ico_bag"></i><span class="circle_count">99+</span></a>
  182. </div>
  183. <!-- // search -->
  184. </div>
  185. </div>
  186. <!-- head end -->
  187. <script th:inline="javascript">
  188. /*<![CDATA[*/
  189. /* header minify */
  190. $(function(){
  191. $(window).scroll(function(){
  192. var scroll = $(this).scrollTop();
  193. var headerH = $("#header").height();
  194. if ($(window).scrollTop() > headerH){
  195. $("#header").addClass("minify");
  196. return false;
  197. }
  198. else {
  199. $("#header").removeClass("minify");
  200. return false;
  201. }
  202. });
  203. });
  204. /* //header minify */
  205. /*]]>*/
  206. </script>
  207. </header>
  208. </html>