묻고답하기
도와주세요. ㅠㅜ
2010.09.13 13:26
홈페이지 레이아웃을 제작중인데
메뉴가 좀 힘드네요ㅠㅜ
http://hosting.ohseon.com/seoseunghyun
인데요.
여기서 오른쪽 하위메뉴가 뜨는 것 까지는 구현 했는데
그 하위메뉴를 선택할 시에
그에 따른 상위메뉴의 하위메뉴만 보이게 (나머지 상위메뉴는 닫히게) 만들 수 없나요?
예를들어
1
2
3
4
5
에서 1을 선택하면
1
-a
-b
2
3
4
5
뜨게끔이요
계속 나머지 하위메뉴도 뜨네요. 그리고 맨처음에 홈페이지 접속하면
하위메뉴들이 안보이게 하고 싶은데 그대로 다 노출이 되네요. ㅠㅜ
layout 내의 메뉴 소스입니다.
<script type="text/javascript">
// gnb show & hide
//$('#menu_navi ul li').children('ul:not(":animated")').slideUp('normal');
$('#menu_navi ul li').hover(function () {
$(this).children('ul:not(":animated")').slideDown('fast');
}, function () {
$('ul', this).fadeOut('fast');
}).children('a').focus(function(){
$(this).parent('li').parent('ul').children('li').children('.sub').addClass('closed');
$(this).removeClass('closed'+ '+ ').addClass('opened');
$(this).parent('li').children('ul').slideDown('fast');
if($(this).attr('class').match('opened')) $(this).parent('li').parent('ul').children('li').children('.closed').parent('li').children('+ 'ul').fadeOut('normal');
});
$('*:not("#menu_navi a")').focus(function(){
$('#menu_navi ul li ul').fadeOut('fast');
}); </script> <div id="menu_navi"><ul>{@$tmp=0} <list">!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<li class="first_li<{@$category[$tmp]=$val}{@$tmp">!--@if($val['selected'])-->{@$category[$tmp]=$val}{@$tmp++} selected<!--@end-->">
<a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="first_a<!--@if($val['list'])--> sub first_sub<">{$val['text']}{$val['link']}!--@end-->"><!--@if($val['text'+ ']==$val['+ 'link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if($val['list'])-->
<ul class="second_ul">
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'+ '])-->
<li class="second_li<!--@if($v['selected'])--> selected selected_2{@$category[$tmp]=$v}{@$tmp++}<!--@end-->">
<a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="second_a<!--@if($v['list'+ '])--> sub<">{$v['text']}{$v['link']}!--@end-->"><!--@if($v['text']==$v['link'])--><span>{$v['text']}</span><!--@else-->{$v['link']}<!--@end--></a>
<!--@if($v['list'])-->
<ul class="third_ul">
<!--@foreach($v['list'] as $ka => $va)--><!--@if($va['link'])-->
<li class="third_li<!--@if($va['+ 'selected'])--> selected selected_3{@$category[$tmp]=$va}{@$tmp++}<!--@end-->">
<a href="{$va['href']}"<!--@if($va['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="third_a<!--@if($va['list'])--> sub<">{$va['text'+ ']}{$va['link']}!--@end-->"><!--@if($va['text']==$va['link'])--><span>{$va['text'+ ']}</span><!--@else-->{$va['link']}<!--@end--></a>
</li>
<
//$('#menu_navi ul li').children('ul:not(":animated")').slideUp('normal');
$('#menu_navi ul li').hover(function () {
$(this).children('ul:not(":animated")').slideDown('fast');
}, function () {
$('ul', this).fadeOut('fast');
}).children('a').focus(function(){
$(this).parent('li').parent('ul').children('li').children('.sub').addClass('closed');
$(this).removeClass('closed'+ '+ ').addClass('opened');
$(this).parent('li').children('ul').slideDown('fast');
if($(this).attr('class').match('opened')) $(this).parent('li').parent('ul').children('li').children('.closed').parent('li').children('+ 'ul').fadeOut('normal');
});
$('*:not("#menu_navi a")').focus(function(){
$('#menu_navi ul li ul').fadeOut('fast');
}); </script> <div id="menu_navi"><ul>{@$tmp=0} <list">!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<li class="first_li<{@$category[$tmp]=$val}{@$tmp">!--@if($val['selected'])-->{@$category[$tmp]=$val}{@$tmp++} selected<!--@end-->">
<a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="first_a<!--@if($val['list'])--> sub first_sub<">{$val['text']}{$val['link']}!--@end-->"><!--@if($val['text'+ ']==$val['+ 'link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if($val['list'])-->
<ul class="second_ul">
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'+ '])-->
<li class="second_li<!--@if($v['selected'])--> selected selected_2{@$category[$tmp]=$v}{@$tmp++}<!--@end-->">
<a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="second_a<!--@if($v['list'+ '])--> sub<">{$v['text']}{$v['link']}!--@end-->"><!--@if($v['text']==$v['link'])--><span>{$v['text']}</span><!--@else-->{$v['link']}<!--@end--></a>
<!--@if($v['list'])-->
<ul class="third_ul">
<!--@foreach($v['list'] as $ka => $va)--><!--@if($va['link'])-->
<li class="third_li<!--@if($va['+ 'selected'])--> selected selected_3{@$category[$tmp]=$va}{@$tmp++}<!--@end-->">
<a href="{$va['href']}"<!--@if($va['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end--> class="third_a<!--@if($va['list'])--> sub<">{$va['text'+ ']}{$va['link']}!--@end-->"><!--@if($va['text']==$va['link'])--><span>{$va['text'+ ']}</span><!--@else-->{$va['link']}<!--@end--></a>
</li>
<
댓글 8
-
ForHanbi
2010.09.13 13:51
-
ForHanbi
2010.09.13 13:58
참 위의 내용은 selected가 되어 있으면 그 부분은 보이도록 되어 있습니다. 그게 사용이 편하실거 같아서... -
SeoSeungHyun
2010.09.13 14:06
와~ 좋은 답변 정말 감사드립니다. XE로 옮겨가다보니 많은 에러가 생기네요 ㅠㅜ 한가지만 더 여쭤보겠습니다. 아까 주신 소스로 구현을 했는데, 페이지가 이동할 떄 SELECTED로 해서 선택된 메뉴를 보여지게 하려고 하는데요 아직 처음이라 코딩이 좀 어렵습니다. 이부분 구현하는데에 질문드립니다. ㅠ 감사드립니다. -
ForHanbi
2010.09.13 14:12
-
SeoSeungHyun
2010.09.13 16:31
감사합니다. 근데 ㅠㅜ 그런데도 그렇게 되질 않네요 ㅠㅜ 뭐가 문제인지 좀더 봐야겠습니다.^^ -
ForHanbi
2010.09.13 16:52
사용하신 메뉴보니<div id="menu"><div id="menu_navi"><ul> <li class="first_li"> <a href="" class="first_a sub first_sub"><img src="/seoseunghyun/files/attach/menu_button/115/116.menu_normal_btn.gif" onmouseout="this.src='/seoseunghyun/files/attach/menu_button/115/116.menu_normal_btn.gif'" alt="home" onmousedown="this.src='/seoseunghyun/files/attach/menu_button/115/116.menu_active_btn.gif'" /></a> <ul class="second_ul"> <li class="second_li"> <a href="/seoseunghyun/helpbbs" class="second_a"><img src="/seoseunghyun/files/attach/menu_button/115/150.menu_normal_btn.gif" onmouseout="this.src='/seoseunghyun/files/attach/menu_button/115/150.menu_normal_btn.gif'" alt="update" /></a> </li> <li class="second_li"> <a href="/seoseunghyun/story" class="second_a"><img src="/seoseunghyun/files/attach/menu_button/115/151.menu_normal_btn.gif" onmouseout="this.src='/seoseunghyun/files/attach/menu_button/115/151.menu_normal_btn.gif'" alt="feature" /></a> </li> </ul>이렇게 나오는군요.xe에서 메뉴 설정하면 a href=""같이 빈공간 값이나<a href="/seoseunghyun/story" 같이 한단계 아래로 메뉴가 못내려 가는걸로 알고 있습니다.메뉴 설정에서 문제가 있는거 같습니다.메뉴 설정트리를 스키린샷에서 올려보시거나 그쪽에서 수정을 해보세요. -
SeoSeungHyun
2010.09.13 17:10
계속해서 신경써 주셔서 정말 감사합니다. 메뉴설정에서 상위메뉴는 빈칸 하위메뉴는 mid로 적용하여 문제가 없었는데 메뉴트리를 캡쳐를 올렸습니다. 아니면 레이아웃 파일의 메뉴 소스가 문제가 있는것인가요? 스탠다드한 메뉴 소스가 구하기 힘드네요 ㅠㅜ -
SeoSeungHyun
2010.09.13 17:28
아~ 해결되었습니다. class 속성이 잘못 되었습니다.^^ 정말 감사합니다.^^
/* menu_navi Sub */#menu_navi li ul{ padding:5px 0; background:#fff;}#menu_navi li li{ margin:0;}#menu_navi li li a{ font-weight:normal; background:#fff; padding:5px 10px; border:0;}#menu_navi li li a span{ color:#666;}
/* menu_navi selected */#menu_navi li.selected{ border:1px solid #ccc; z-index:2;}#menu_navi li li.selected{ border:0;}#menu_navi li.selected a{ color:#000; border:0;}#menu_navi li.selected .i{ background-position:0 -44px;}#menu_navi li.selected li a{ border:0;}#menu_navi li.selected ul{ display:block; border-top:1px solid #eee;}#menu_navi li.selected li.selected a span{ color:#13b200; font-weight:bold; letter-spacing:-1px;}</style><script type="text/javascript">(function($){jjQuery(function($){ // Side Menu var sMenu = $('div#menu_navi'); var sItem = sMenu.find('>ul>li'); var ssItem = sMenu.find('>ul>li>ul>li'); var lastEvent = null; sItem.find('>ul').css('display'+ '+ ','none'); sMenu.find('>ul>li>ul>li[class=selected]').parents('li').attr('class','selected'); sMenu.find('>ul>li[class=selected]').find('>ul').css('display','block');
function sMenuToggle(event){ var t = $(this); if (this == lastEvent) return false; lastEvent = this; setTimeout(function(){ lastEvent=null }, 200); if (t.next('ul').is(':hidden')) { sItem.find('>ul').slideUp(100); t.next('ul').slideDown(100); } else if(!t.next('ul').length) { sItem.find('>ul').slideUp(100); } else { t.next('ul').slideUp(100); } if (t.parent('li').hasClass('selected')){ t.parent('li').removeClass('selected'); } else { sItem.removeClass('selected'); t.parent('li').addClass('selected'); } } sItem.find('>a').click(sMenuToggle).focus(sMenuToggle); function subMenuselected(){ ssItem.removeClass('selected'); $(this).parent(ssItem).addClass('selected'); }; ssItem.find('>a').click(subMenuselected).focus(subMenuselected); //icon sMenu.find('>ul>li>ul').prev('a').append('<span class="i"></span>');});})(jQuery); </script>
사용하시는 페이지에 맞게 css만 수정해서 사용하시면 될겁니다.
참고 사이트
http://naradesign.net/wp/2010/03/10/1212/ 정찬명씨의 개인블로그이며 많은 정보들이 담겨있어 공부가 많이 되는 사이트입니다.