묻고답하기
4차 5차 메뉴 보이게 하는 부분에 관한 질문 (럭키님글 읽고)
2007.08.24 17:18
http://www.zeroboard.com/?mid=zbxe_user_tip&document_srl=4779574
럭키 님의 이↑↑↑ 글을 읽고 5차메뉴까지 표시할 수 있도록 소스를 수정해 볼라구 합니다.
내가 생각하고 있는 것은
===========================================================
<!-- ▼main_menu 5차 시작 -->
<!--@if($v4['list'])-->
<ul>
<!--@foreach($v4['list'] as $k => $v5)--><!--@if($v5['text'])-->
<li <!--@if($v5['selected'])-->class="on5"<!--@end-->>
<a href="{$v5['href']}" <!--@if($v5['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v5['text']}</a>
<!-- ★ -->
<!-- ★ -->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
<!-- ▲main_menu 5차 끝 -->
===========================================================
이 부분처럼 계속 삽입해서 4차 5차를 만들었습니다.
그니깐 6차를 만들려면
<!-- ★ -->
<!-- ★ -->
이 두 사이에 같은 코드
<!-- ▼
<!-- ▲
를 또 집어 넣어서 6차메뉴를 만드는 것이죠.
그렇게 4차와 5차를 엮어 봤습니다.
전체 코드는 이렇습니다.
==========================================================
<!-- ▽main_menu 2차 시작 -->
<!--@if($menu_1st)-->
<ol id="lnb">
{@ $idx = 1 }
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->>
<a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
<!-- ▼main_menu 3차 시작 -->
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->>
<a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a>
<!-- ★ -->
<!-- ▼main_menu 4차 시작 -->
<!--@if($v['list'])-->
<ul>
<!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['text'])-->
<li <!--@if($v4['selected'])-->class="on4"<!--@end-->>
<a href="{$v4['href']}" <!--@if($v4['+
'open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v4['text']}</a>
<!-- ★ -->
<!-- ▼main_menu 5차 시작 -->
<!--@if($v4['list'])-->
<ul>
<!--@foreach($v4['list'] as $k => $v5)--><!--@if($v5['text'])-->
<li <!--@if($v5['selected'])-->class="on5"<!--@end-->>
<a href="{$v5['href']}" <!--@if($v5['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v5['text'+
']}</a>
<!-- ★ -->
<!-- ★ -->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
<!-- ▲main_menu 5차 끝 -->
<!-- ★ -->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
<!-- ▲main_menu 4차 끝 -->
<!-- ★ -->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
<!-- ▲main_menu 3차 끝 -->
</li>
{@$idx++}
<!--@end--><!--@end-->
</ol>
<!--@end-->
<!-- △main_menu 2차 끝 -->
</div>
==========================================================
이것이 될지는 모르겠지만 좌측 메뉴에 4차메뉴를 표시할 수 있는 방법인 듯 해서요.
이것을 해 보지는 않았는데 그것은 바로 css파일 때문입니다.
*****************질문의 요지******************
css파일의 내용입니다.
#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;}
#lnb li { list-style:none; padding-bottom:4px;}
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; background:url(../images/white/bgLnbOff.gif) repeat-x; color:#3e3e3e; position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a:hover,
#lnb li.on a:focus { font-weight:bold;}
#lnb li ul { display:none; position:relative; width:184px; padding:0 3px; position:relative; border-top:1px solid #ffffff; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; border-top:1px solid #f2f2f2; position:relative; top:-1px;}
#lnb li ul li a { padding:6px 5px 6px 10px; width:169px; color:#818181 !important; border:none; background:none !important; border:none !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;}
#lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; background:url(../images/white/bulletLnb.gif) no-repeat 175px center !important;}
하이어라키를 보면
lnb가 있고요. 그 아래
li 아래에 a와 .on 그리고 삽입된 하위 ul 이 있습니다.
규칙을 정리해 보면,
[lnb] -- li - a, (.on), ul 이렇게 되고요. 각각 a , on a 등에 3가지씩 스타일 잡아 줬네요.
css내용을 3줄씩 줄여보면
[lnb]
[lnb] -- li
[lnb] -- li - a 3개
[lnb] -- li - .on a 3개
[lnb] -- li -ul
[lnb] -- li.on - ul
[lnb] -- li - ul - li
[lnb] -- li - ul - li - a 3개
[lnb] -- li.on - ul - li.on - a
3개는 { }랑 hover focus라고 하고요.
어쨌든 그러면 이거를 메뉴4 메뉴5를 위해서 li와 ul이 꼬리를 물 것이고 거기에 on4와 on5가 붙을 것이거든요?
도대체 이걸 어트케 해야 되요??
아~~ css 고치려다 머리 터집니다.
도와 쥬세요!
======================
위 문장을 올려보니 하위메뉴가 나오긴 하는데 다 펼쳐져서 나오네요 대략 실패네요.
뭐가 잘못된 것일까요
네, 전 메뉴 출력에관해서만 설명드렸지 CSS는 말씀드리지 않았군요..~
XE 기본 레이아웃 CSS에선 3차메뉴까지만 처리되어있고
4차부턴 직접 추가하셔야 하는데요.
[lnb] -- li - ul - li
[lnb] -- li - ul - li - a 3개
[lnb] -- li.on - ul - li.on - a
첫번째꺼는 3차메뉴 출력부분이구요
2번째가 3차메뉴의 링크설정부분이고요
3번째가 3차메뉴가 선택되어있을경우 2,3차 모두 ON
4차메뉴부분은
[lnb] -- li - ul - li - ul - li
[lnb] -- li - ul - li - ul - li - a 3개
[lnb] -- li.on - ul - li.on - ul - li.on - a
이렇게 해보시면 될듯합니다..
위에는 4차메뉴 기본 li 의 스타일부분
2번째는 4차메뉴의 링크설정
마지막은 4차메뉴가 선택되어있을경우 2,3,4차 모두 on
그리고 스타일들을 입히시면 될듯한데요