묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
도와주세요. ㅠㅜ
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 속성이 잘못 되었습니다.^^ 정말 감사합니다.^^
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
하월소년 | 메인화면에 게시판을 다른 게시판으로 연결방법좀..ㅠ-ㅠ 알려주세요 [1] | 2009.06.12 by 아고라 |
Michaela | 1.2.3 설치 문의 [2] | 2009.06.12 by Michaela |
서동혁 | 좌측메뉴의 폰트및 마우스오버시 색상변경문의 [2] | 2009.06.12 by 서동혁 |
아고라 | 외부문서에서의 mms:// 경로문제 [1] | 2009.06.12 by 아고라 |
달빛향기512 | mms 사용시 문제 어떻게 해결하시나요? [8] | 2009.06.12 by 아고라 |
XE사랑 | 자바스크립트 소스 질문 입니다. (새창) [1] | 2009.06.12 by 도파돌이 |
초보거든요 |
첨부파일 업로더 문제로 ...
[6]
![]() | 2009.06.12 by 초보거든요 |
맥님 | 플래시 메뉴 만들어 주는 <Flash Menu Labs Pro> 써보신분 계신가요? [1] | 2009.06.12 by 아고라 |
도파돌이 | 추천수 초기화 방법 문의 [1] | 2009.06.12 by 도파돌이 |
복사마7 | 플래닛 없애는 방법 | |
강재철225 | 엑셀의 함수와 비스무리한 효과나타내고싶습니다만.. | |
gguyy | 1.2.3 으로 업데이트 한후 에디터의 문제입니다.....제발 도와주세요 [2] | 2009.06.12 by gguyy |
스윗핑크 | 갤러리 사용시 본문삽입 하지 않고 자동으로 그림이 뜨게할수 있나요? | |
도파돌이 | 롤오버가 이상해요. [2] | 2009.06.12 by 도파돌이 |
정재헌445 | 레이아웃 상단메뉴 글꼴 수정은 어느파일을 수정해야 하나요? | |
미스터멧 | 백성찬님 ㅠ [1] | 2009.06.12 by 백성찬 |
장노 | 초보자 좀 살려주세요 ......ㅠㅠ [1] | 2009.06.12 by 백성찬 |
행호 |
카테고리 글씨 폰트 크기와 종류 어디서 설정해야 하나요?
![]() | |
포카리 | 백성찬님,, [3] | 2009.06.12 by 감로수 |
소리샘 | 글로벌네비게이션 문의드립니다. |
/* 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/ 정찬명씨의 개인블로그이며 많은 정보들이 담겨있어 공부가 많이 되는 사이트입니다.