드롭다운 메뉴 오류가있습니다 ㅠ.ㅠ 채택완료
주니모
7년 전
조회 5,991
안녕하세요. 회사 잘린마당에 ..일처리를 하고있는데 ^^;
계속 안되어서 찾다찾다 조심스럽게 질문글을 남겨봅니다 ㅠ ㅠ
메뉴를 눌렀을 때, 각각 그 메뉴의 서브메뉴들이 펼쳐져보이는 디자인입니다.
1) 병원소개를 눌렀을 때
2) 병원소개의 소메뉴가 보입니다.
메인에서는 아래로 드롭다운이 잘 내려오는데, 소메뉴로 들어가 서브페이지로 넘어갔을 시
메뉴를 누르면 주소뒤에 #만 추가되고 드롭다운이 되지 않습니다 ㅠ ㅠ
구글에서 찾고 찾으면서 검색해서 가져온건데.. 스크립트를 짤 줄 모르니 너무 답답하고 ㅠ.ㅠ
왜 오류가 나는지 모르겠습니다. 구현은 병원소개 메뉴만 되어있고, 아래는 작업중인
홈페이지 주소와 사용한 소스들입니다.
http://cheongdamhp.cafe24.com/
1) 메뉴부분 작업한 소스
</p>
<p> <div class="container"> </p>
<p> <div class="main"></p>
<p> <nav id="cbp-hrmenu" class="cbp-hrmenu"></p>
<p> <ul></p>
<p> <li></p>
<p> <a href="#">병원소개</a></p>
<p> <div class="cbp-hrsub"></p>
<p> <div class="cbp-hrsub-inner"></p>
<p> <div></p>
<p><div class="float_l"><h4>병원소개</h4></div></p>
<p><div class="float_l l_wid01"></p>
<p><ul></p>
<p><li><a href="<?php echo G5_THEME_URL;?>/index/hospital_01.php">청담요양병원 소개</a></li></p>
<p><li><a href="<?php echo G5_THEME_URL;?>/index/hospital_02.php">의료진 소개</a></li></p>
<p><li><a href="<?php echo G5_THEME_URL;?>/index/hospital_03.php">병원둘러보기</a></li></p>
<p><li><a href="<?php echo G5_THEME_URL;?>/index/hospital_04.php">오시는길</a></li></p>
<p></ul></p>
<p></div></p>
<p> </div></p>
<p> </div><!-- /cbp-hrsub-inner --></p>
<p> </div><!-- /cbp-hrsub --></p>
<p> </li></p>
<p> <li></p>
<p> <a href="#">통합암면역센터</a></p>
<p> <div class="clear cbp-hrsub"></p>
<p> <div class="cbp-hrsub-inner"></p>
<p> <div></p>
<p> <h4>Education & Learning</h4></p>
<p> <ul></p>
<p> <li><a href="#">Learn Thai</a></li></p>
<p> <li><a href="#">Math Genius</a></li></p>
<p> <li><a href="#">Chemokid</a></li></p>
<p> </ul></p>
<p> <h4>Professionals</h4></p>
<p> <ul></p>
<p> <li><a href="#">Success 1.0</a></li></p>
<p> <li><a href="#">Moneymaker</a></li></p>
<p> </ul></p>
<p> </div></p>
<p> <div></p>
<p> <h4>Entertainment</h4></p>
<p> <ul></p>
<p> <li><a href="#">Gadget Finder</a></li></p>
<p> <li><a href="#">Green Tree Express</a></li></p>
<p> <li><a href="#">Green Tree Pro</a></li></p>
<p> <li><a href="#">Holy Cannoli</a></li></p>
<p> <li><a href="#">Wobbler 3.0</a></li></p>
<p> <li><a href="#">Coolkid</a></li></p>
<p> </ul></p>
<p> </div></p>
<p> <div></p>
<p> <h4>Games</h4></p>
<p> <ul></p>
<p> <li><a href="#">Catch the Bullet</a></li></p>
<p> <li><a href="#">Snoopydoo</a></li></p>
<p> <li><a href="#">Fallen Angel</a></li></p>
<p> <li><a href="#">Sui Maker</a></li></p>
<p> <li><a href="#">Wave Master</a></li></p>
<p> <li><a href="#">Golf Pro</a></li></p>
<p> </ul></p>
<p> </div></p>
<p> </div><!-- /cbp-hrsub-inner --></p>
<p> </div><!-- /cbp-hrsub --></p>
<p> </li></p>
<p><!--작업하지않은 다른 메뉴들--></p>
<p> </p>
<p> </div></p>
<p> <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></a></p>
<p> <script src="js/cbpHorizontalMenu.min.js"></script></p>
<p> <script></p>
<p> $(function() {</p>
<p> cbpHorizontalMenu.init();</p>
<p> });</p>
<p> </script></p>
<p>
2) css
</p>
<p>
</p>
<p>.clearfix:before,</p>
<p>.clearfix:after {</p>
<p> content: " ";</p>
<p> display: table;</p>
<p>}</p>
<p> </p>
<p>.clearfix:after {</p>
<p> clear: both;</p>
<p>}</p>
<p>
</p>
<p>.container {width:1260px; margin: 0 auto;}</p>
<p>.container > header {</p>
<p> width: 90%;</p>
<p> max-width: 70em;</p>
<p> margin: 0 auto;</p>
<p> padding: 0 1.875em 3.125em 1.875em;</p>
<p>}</p>
<p> </p>
<p>.container > header {</p>
<p> padding: 2.875em 1.875em 1.875em;</p>
<p>}</p>
<p> </p>
<p>.container > header h1 {</p>
<p> line-height: 1.3;</p>
<p> margin: 0;</p>
<p> float: left;</p>
<p> font-weight: 400;</p>
<p>}</p>
<p> </p>
<p>.container > header span {</p>
<p> display: block;</p>
<p> font-weight: 700;</p>
<p> text-transform: uppercase;</p>
<p> letter-spacing: 0.5em;</p>
<p> padding: 0 0 0.6em 0.1em;</p>
<p>}</p>
<p> </p>
<p>.container > header nav {</p>
<p> float: right;</p>
<p>}</p>
<p> </p>
<p>.container > header nav a {</p>
<p> display: block;</p>
<p> float: left;</p>
<p> position: relative;</p>
<p> width: 2.5em;</p>
<p> height: 2.5em;</p>
<p> background: #fff;</p>
<p> border-radius: 50%;</p>
<p> color: transparent;</p>
<p> margin: 0 0.1em;</p>
<p> border: 4px solid #47a3da;</p>
<p> text-indent: -8000px;</p>
<p>}</p>
<p> </p>
<p>.container > header nav a:after {</p>
<p> content: attr(data-info);</p>
<p> color: #47a3da;</p>
<p> position: absolute;</p>
<p> width: 600%;</p>
<p> top: 120%;</p>
<p> text-align: right;</p>
<p> right: 0;</p>
<p> opacity: 0;</p>
<p> pointer-events: none;</p>
<p>}</p>
<p> </p>
<p>.container > header nav a:hover:after {</p>
<p> opacity: 1;</p>
<p>}</p>
<p> </p>
<p>.container > header nav a:hover {</p>
<p> background: #47a3da;</p>
<p>}</p>
<p> </p>
<p>.icon-drop:before,</p>
<p>.icon-arrow-left:before {</p>
<p> font-family: 'fontawesome';</p>
<p> position: absolute;</p>
<p> top: 0;</p>
<p> width: 100%;</p>
<p> height: 100%;</p>
<p> speak: none;</p>
<p> font-style: normal;</p>
<p> font-weight: normal;</p>
<p> line-height: 2;</p>
<p> text-align: center;</p>
<p> color: #47a3da;</p>
<p> -webkit-font-smoothing: antialiased;</p>
<p> text-indent: 8000px;</p>
<p> padding-left: 8px;</p>
<p>}</p>
<p> </p>
<p>.container > header nav a:hover:before {</p>
<p> color: #fff;</p>
<p>}</p>
<p> </p>
<p>.icon-drop:before {</p>
<p> content: "\e000";</p>
<p>}</p>
<p> </p>
<p>.icon-arrow-left:before {</p>
<p> content: "\f060";</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu {</p>
<p> width: 100%;</p>
<p>}</p>
<p>
</p>
<p>.cbp-hrmenu .l_wid01 {</p>
<p>margin: 0 0 0 100px;</p>
<p>}</p>
<p>
</p>
<p>/* general ul style */</p>
<p>.cbp-hrmenu ul {</p>
<p> margin: 0;</p>
<p> padding: 0;</p>
<p>list-style-type: none;</p>
<p>font-size: 23px;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p> </p>
<p>/* first level ul style */</p>
<p>.cbp-hrmenu > ul,</p>
<p>.cbp-hrmenu .cbp-hrsub-inner {</p>
<p> width: 1260px;</p>
<p> max-width: 70em;</p>
<p> margin: 0 auto;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu > ul > li {</p>
<p> display: inline-block;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu > ul > li > a {</p>
<p> font-weight: 700;</p>
<p> padding: 19px 53px 18px 52px;</p>
<p> color: #383838;</p>
<p>display: inline-block;</p>
<p>text-decoration: none;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu > ul > li > a:hover {</p>
<p> color: #2298f4;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu > ul > li.cbp-hropen a,</p>
<p>.cbp-hrmenu > ul > li.cbp-hropen > a:hover {</p>
<p>color: #464646;</p>
<p>text-decoration: none;</p>
<p>}</p>
<p> </p>
<p>/* sub-menu */</p>
<p>.cbp-hrmenu .cbp-hrsub {</p>
<p> display: none;</p>
<p> position: absolute;</p>
<p> background: #f8f8f9;</p>
<p> width: 100%;</p>
<p> left: 0;</p>
<p>}</p>
<p> </p>
<p>.cbp-hropen .cbp-hrsub {</p>
<p> display: block;</p>
<p> padding-bottom: 2em;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu .cbp-hrsub-inner > div {</p>
<p>float: left;</p>
<p>padding-top:32px;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu .cbp-hrsub-inner:before,</p>
<p>.cbp-hrmenu .cbp-hrsub-inner:after {</p>
<p> content: " ";</p>
<p> display: table;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu .cbp-hrsub-inner:after {</p>
<p> clear: both;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrmenu .cbp-hrsub-inner > div a {</p>
<p> line-height: 2em;</p>
<p>}</p>
<p> </p>
<p>.cbp-hrsub h4 {</p>
<p> color: #2298f4;</p>
<p> padding:4px 0 0 50px;</p>
<p> margin: 0;</p>
<p>font-weight: bold;</p>
<p>font-size: 25px;</p>
<p>font-family: 'NanumBarunGothic';</p>
<p>}</p>
<p>
</p>
<p>#wrap {</p>
<p>width:100%;</p>
<p>height:65px;</p>
<p>margin: 0 auto;</p>
<p>font-family: 'NanumSquareRound',sans-serif;</p>
<p>border-top: 1px solid #e8e8e8;</p>
<p>border-bottom: 1px solid #e8e8e8;</p>
<p>margin-top:28px;</p>
<p>}</p>
<p> </p>
<p>
3) js
</p>
<p>/**</p>
<p>* cbpHorizontalMenu.js v1.0.0</p>
<p>* <a href="http://www.codrops.com" target="_blank" rel="noopener noreferrer">http://www.codrops.com</a></p>
<p>*</p>
<p>* Licensed under the MIT license.</p>
<p>* <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank" rel="noopener noreferrer">http://www.opensource.org/licenses/mit-license.php</a></p>
<p>*</p>
<p>* Copyright 2013, Codrops</p>
<p>* <a href="http://www.codrops.com" target="_blank" rel="noopener noreferrer">http://www.codrops.com</a></p>
<p>*/</p>
<p>var cbpHorizontalMenu = (function() {</p>
<p> </p>
<p> var $listItems = $( '#cbp-hrmenu > ul > li' ),</p>
<p> $menuItems = $listItems.children( 'a' ),</p>
<p> $body = $( 'body' ),</p>
<p> current = -1;</p>
<p> </p>
<p> function init() {</p>
<p> $menuItems.on( 'click', open );</p>
<p> $listItems.on( 'click', function( event ) { event.stopPropagation(); } );</p>
<p> }</p>
<p> </p>
<p> function open( event ) {</p>
<p> </p>
<p> if( current !== -1 ) {</p>
<p> $listItems.eq( current ).removeClass( 'cbp-hropen' );</p>
<p> }</p>
<p> </p>
<p> var $item = $( event.currentTarget ).parent( 'li' ),</p>
<p> idx = $item.index();</p>
<p> </p>
<p> if( current === idx ) {</p>
<p> $item.removeClass( 'cbp-hropen' );</p>
<p> current = -1;</p>
<p> }</p>
<p> else {</p>
<p> $item.addClass( 'cbp-hropen' );</p>
<p> current = idx;</p>
<p> $body.off( 'click' ).on( 'click', close );</p>
<p> }</p>
<p> </p>
<p> return false;</p>
<p> </p>
<p> }</p>
<p> </p>
<p> function close( event ) {</p>
<p> $listItems.eq( current ).removeClass( 'cbp-hropen' );</p>
<p> current = -1;</p>
<p> }</p>
<p> </p>
<p> return { init : init };</p>
<p> </p>
<p>})();</p>
<p> </p>
<p>
</p>
<p>var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("click",a);b.on("click",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("click").on("click",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();</p>
<p>
질문이 너무 길어졌네요 ㅠ ㅠ
사정이 있어서 빨리 마무리하고싶은 일이라.. 도와주시면 정말 감사하겠습니다!
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
7년 전
<script src="js/cbpHorizontalMenu.min.js"></script>
=>
<script src="/js/cbpHorizontalMenu.min.js"></script>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
주니모
7년 전
아악 며칠을 고생했는데 바로되네요 너무 감사해요!!!ㅠㅠㅠㅠㅠ세상에 지금 심장터져버릴걸.. 너무 감사해요 ㅠㅠ 커피라도 한잔 보내드리고싶은데 쪽지 확인한번만 부탁드려도 될까요? 정말 감사합니다 ㅠㅠㅠㅠㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인