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