묻고답하기
제로보드 기본 스킨을 사용중인데...
2008.04.15 07:52
좌측 메뉴에 대해서 질문이 있습니다.
좌측 메뉴는 어떻게 만드는지요?
설정에 가더라도 상단 메뉴와 하단 메뉴만 있더군요....
이 홈페이지의 소스보기를해서
좌측 메뉴는 어떻게 만드는지요?
설정에 가더라도 상단 메뉴와 하단 메뉴만 있더군요....
이 홈페이지의 소스보기를해서
<li class="on"><a href="/comm_freeboard" >자유게시판</a>
<!-- main_menu 3차 시작 -->
</li>
레이아웃에 위와 같이 넣었더니 같은 메뉴가 만들어 졌는데요.... 문제는 따로 있습니다.
이곳에서는 메뉴를 선택하면 선택된 메뉴가 붉은색으로 유지 되지만 제가 레이아웃에서 코드만 넣은 메뉴는 마우스를 올렸을때만 붉은색이 되고 이동을 하더라도 색이 바뀌지 않습니다.
제대로된 원래의 좌측 메뉴를 만드는 방법은 무엇이며 제 문제는 어떻게 해결하는지 알려주세요.
댓글 2
-
관리자 로그인후 관리 설정 들어가시고.
메뉴를 들어가세요. 먼저 상단메뉴로 선택할 메뉴명 적어주고, 요것에 들가서 1차메뉴들을 설정하시고 mid까지 연결하세요. 아니면 mid연결없는 메뉴는 전부 mid연결없을시 가기 체크된페이지나 게시판으로 갑니다.
다음 1차메뉴를 선택하면 우측에 창이 뜨죠, 여기에 하위메뉴생성 찍고 설정, 같은요령으로 2차든 3차든 계속하시면 됩니다.
그담에 레이아웃을 일괄이던 페이지나 게시판마다든 설정 하잖아요, 이때 상단메뉴에 위에서 생성한 메뉴명 찍어주고, 하위메뉴에도 같은요령으로 만든메뉴를 찍어주모 됩니다.
님처럼 일일이 레이아웃에다가 만들어주는게 아닙니다.
제 설명처럼 메뉴를 만들어주고 설정만 해주면 burster 님의 답변에 있는 내용에 의해 저절로 출력이 되도록 되어 있읍니다.
메뉴얼 강좌를 한번 보심도...
좌측메뉴
/layouts/xe_official/layout.html
<!-- 왼쪽 2차 메뉴 -->
<img src="./images/blank.gif" alt="" class="mask" />
<!--@if($menu_1st)-->
<ol id="lnb">
{@ $idx = 1 }
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<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['link']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['list'] && ($val['expand']=='Y'+ '||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<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['link']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
{@$idx++}
<!--@end--><!--@end-->
</ol>
<!--@end-->
빨간거../layouts/xe_official/css/default.css
#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;}
#lnb li { padding-bottom:4px; list-style:none; }
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; background:url(../images/default/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:block; 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/default/bulletLnb.gif) no-repeat 175px center !important;}
이게 원래 소스 인데요.. div와 css를 많이 배우세요~~~
님이 원하시는 부분을 수정하시려면
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;}
이부분 보세요..