묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 레이아웃 메뉴 문제 질문입니다.
2010.09.18 12:20
레이아웃으로 메뉴를 구성하는데 한가지가 구현이 되질 않아 여쭈어 봅니다.
http://seoseunghyun.kr/
에 들어가시면 메뉴를 클릭하면 활성화 상태로 그림이 선택됩니다. 그러면서 하위메뉴도 슬라이드 됩니다.
하지만 상위메뉴 이미지 버튼에서 마우스를 떼면 다시 비활성화 그림으로 대체됩니다.
ㅠㅜ 텍스트val['text']로 하는 경우 class를 주어 글자를 진하게 할 수있지만
그림val['link']라서 그림을 css속성으로도 바꿀수 없습니다.
어떻게 해야하나요?ㅠ
<div id="menu_navi" class="sMenu"><ul>{@$tmp=0}
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<li class="<!--@if($val['selected'])-->selected<!--@end-->">
<a <!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'+ '+ '])-->
<li class="<!--@if($v['selected'])-->selected<!--@end-->">
<a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($v['text']==$v['link'])--><span>{$v['text']}</span><!--@else-->{$v['+ 'link']}<!--@end--></a>
<!--@if($v['+ 'list'])-->
<ul>
<!--@foreach($v['list'] as $ka => $va)--><!--@if($va['link'])-->
<li class="<!--@if($va['selected'])-->selected<!--@end-->">
<a href="{$va['href']}"<!--@if($va['open_window'+ ']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($va['text']==$va['link'])--><span>{$va['text']}</span><!--@else-->{$va['link']}<!--@end--></a>
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul></div> 이고 스크립트 파일은 (function($){ jQuery(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);
입니다.
<li class="<!--@if($val['selected'])-->selected<!--@end-->">
<a <!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'+ '+ '])-->
<li class="<!--@if($v['selected'])-->selected<!--@end-->">
<a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($v['text']==$v['link'])--><span>{$v['text']}</span><!--@else-->{$v['+ 'link']}<!--@end--></a>
<!--@if($v['+ 'list'])-->
<ul>
<!--@foreach($v['list'] as $ka => $va)--><!--@if($va['link'])-->
<li class="<!--@if($va['selected'])-->selected<!--@end-->">
<a href="{$va['href']}"<!--@if($va['open_window'+ ']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($va['text']==$va['link'])--><span>{$va['text']}</span><!--@else-->{$va['link']}<!--@end--></a>
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul></div> 이고 스크립트 파일은 (function($){ jQuery(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);
입니다.
댓글 7
-
ForHanbi
2010.09.18 15:27
질문이 이해가 안됩니다. -
SeoSeungHyun
2010.09.18 15:55
-
ForHanbi
2010.09.18 18:59
이제야 글 봤네요 지송^^&
제가뿌린 씨는 제가 거둬야 하기에....
원 소스는 첫 css에는 seleted라는 클라스명을 사용하지 않고 하위의 li에 class명을 부여하고 있습니다. 일단 그 부분 수정해 보시고요.
다음에 .sMenu li.selected a{ 원하는 이미지 위치}.sMenu li.selected a li.selected a{원하는 이미지 위치}이렇게 수정해 보세요.a위치에 img를 넣고 padding이나 margin으로 조절해도 될거 같습니다.하여튼 사용하시는 소스에서는 #menu_navi 나 .sMenu로 시작되는 css부분이 거의 안보여서 뭐라고 답해 드리기가... -
ForHanbi
2010.09.18 19:05
div id="menu_navi" class="sMenu"><ul>{@$tmp=0}<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<li>
<a <!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($val['text']==$val['link'])--><span>{$val['text']}</span><!--@else-->{$val['link']}<!--@end--></a>
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<li class="<!--@if($v['selected'+ '+ '])-->selected<!--@end-->">
<a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($v['text'+ ']==$v['link'])--><span>{$v['text']}</span><!--@else-->{$v['link']}<!--@end--></a>
<!--@if($v['list'])-->
<ul>
<!--@foreach($v['list'] as $ka => $va)--><!--@if($va['link'])-->
<li class="<!--@if($va['selected'])-->selected<!--@end-->">
<a href="{$va['href']}"<!--@if($va['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->><!--@if($va['text']==$va['link'])--><span>{$va['text']}</span><!--@else-->{$va['link']}<!--@end--></a>
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul></div>
첫 부분은 이렇게 수정하시면 될 듯 하네요.
사이트 html끍어서 테스트 해보려고 하니 못불러 온다고 투덜거리는 부분이 많아서 테스트가 안됩니다 ^^& -
ForHanbi
2010.09.18 19:07
(function($){jQuery(function($){// Side Menuvar 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);
//iconsMenu.find('>ul>li>ul').prev('a').append('+ '<span class="i"></span>');});})(jQuery);
이 부분에서는 icon들어가는 span은 사용안하시니 //iconsMenu.find('>ul>li>ul').prev('a').append('<span class="i"></span>');지우시고요... 이게 추가 되어서 이미지가 밀렸었나???css에서는 이미지가 움직일 부분이 없어 보이던데.... -
ForHanbi
2010.09.18 19:28
에거 그게 아니네요. 위 script를 사용안하시고 만드셨구나. 이거 손봐드릴려면 한시간정도 걸리겠는데 오늘 내일 시간이 없어서 ^^& -
ForHanbi
2010.09.18 19:53
예문입니다.이거 기준으로 위에 제가 적은내용 한번 보시고 적용해 보세요