안녕하세요..팔공산님. 디자인관련해서 ..
스킨을 입히셨는데.. 어찌하는건지요..
xe공식레이아웃 ver1 을 이용해서 홈페이지를 만들고 있습니다
공식스킨의 경우에 비슷한 위치에 2차 메뉴가 떠오르지요..
때문에 팔공산님 사이트 에서 처럼 비슷하게 스킨을 적용하면 될듯 한데..
옆의 그림처럼 저도 스킨을 입힐수 있는 예쁜 소스는 구해놨는데..
어찌 하는건지는 전혀 감이 오지를 않아서 염치 불구하고 여쭙게 됩니다.
그림을 배경으로 올리구 그위에 나타나도록 하는거 같지는 않은데 ..
css 와 div를 이용해서 입혀 주신듯 한데..
어디다 집어 넣으면 이렇게
입힐수 있는지 힌트좀 부탁 드립니다..
감사합니다.. 행복하세요j
구드한스님 반갑습니다.
질문하신 2차 메뉴의 경우 "문하우스 레이아웃"에 적용되어져 있습니다.
https://moonhouse.co.kr/zbxe/266116
./layouts/moonhouse/layout.html 안에서 아래부분이고요
<!--@if($layout_info->Lm == 'Y')-->
<!-- sub_menu 2차 시작 -->
<!--@if($menu_1st)-->
<div id="lnb_t">
<h1>{$menu_1st['link']}</h1>
</div>
<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-->>
<img src="/images/{$layout_info->colorset}/bullet14.gif" align="absmiddle"> {$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-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v['link']}</a>
<!-- main_menu 4차 시작 -->
<!--@if($v['list'] && ($v['expand']=='Y'||$v['selected']) )-->
<ul>
<!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['link'])-->
<li <!--@if($v4['selected'])-->class="on"<!--@end-->><a href="{$v4['href']}" <!--@if($v4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v4['link']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
{@$idx++}
<!--@end--><!--@end-->
</ol>
<div id="lnb_b">
</div>
<!--@end-->
<!--@end-->
./layouts/moonhouse/css/(해당칼라).css 안에서
#lnb_t { margin-top:0px; padding:25px 5px 0px 5px; width:190px; height:55px; background:url(../images/blue/zt.gif) no-repeat; }
#lnb_t h1 { font-size:20px; color:#fff; padding-left:20px; }
#lnb li { padding-bottom:0px; list-style:none; }
#lnb li a:hover,
#lnb li a:focus { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; background:url(../images/blue/bgLnbOn.gif) no-repeat center; color:#f60; position:relative; text-decoration:none; z-index:97; }
#lnb li a { padding:10px 0px 0px 23px; width:177px; height:16px; display:block; background:url(../images/blue/bgLnbOff.gif) no-repeat center; color:#1E87AE; position:relative; text-decoration:none; z-index:96; }
#lnb li.on a { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; color:#f60; font-weight:bold; background:url(../images/blue/bgLnbVr.gif) no-repeat center; position:relative; text-decoration:none; z-index:95; }
#lnb li.on ul { display:block;}
#lnb li ul li { position:relative; padding-left:10px; top:-1px; }
#lnb li ul li a { color:#c0c0c0 !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:#ff6600 !important;}
#lnb li.on ul li.on a { color:#808080 !important; font-weight:bold !important; !important;}
빨간색부분이 이미지해당 부분입니다.
가로폭부분은 픽셀이 정해져 있으며, 높이는 메뉴갯수에 따라서 확장됩니다.
p.s https://moonhouse.co.kr/zbxe/136732 이곳에 더 자세하게 설명되어져 있습니다.