묻고답하기
GNB 에 3차 메뉴까지 나오게 하고 싶은데 도와주세요.
2015.02.01 17:15
XDT style B 레이아웃이구요.
레이아웃에 아래 빨간 부분을 add 했습니다. 맞는지 모르겠지만 위의 구문 그대로 따라서 쓰고 숫자만 바꿨습니다.
<div class="menu">
<div id="gnb_menu">
<ul class="gnb_ul">
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul class="sub" cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul class="sub" cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
</li></ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
아래는 CSS 파일인데 어떻게 고쳐야 할지 몰라서 도움 청합니다. 2차 메뉴랑 뜨는 위치가 다르니까 3차 메뉴용 css 구문을 하나 넣어줘야 할 것 같은데 어떻게 넣어야 하나요?
/*menu*/
.header .menu .logo { width:200px; height:71px; float:left; margin-left:20px;}
.header .menu #gnb_menu { height:50px; float:left; }
.header .menu #gnb_menu ul { list-style:none; padding:0; margin:0; }
.header .menu #gnb_menu .gnb_ul>li { position:relative; float:left; white-space:nowrap; }
.header .menu #gnb_menu .gnb_ul>li>a { font-size:15px; font-weight:; color:#ffffff; display:block; height: 45px; line-height: 45px; padding:0 21px; }
.header .menu #gnb_menu .sub { display:none; position:absolute; top:45px; min-width:84px; background:url('./../img/blackglass.png'); padding:10px; z-index:20; }
.header .menu #gnb_menu .sub>li { height:20px; line-height:20px; padding-left: 15px; }
.header .menu #gnb_menu .sub>li>a { color:#fff; }
음, 소스도 고치고, jquery 에 3차 메뉴부분도 당연히 넣어주셔야합니다.
아래 제 레이아웃에서 사용된 스크립트에서 gnb 로 고쳐주시면 될 것 같습니다.
<li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']} <div class="menu_icon">^</div></span></a>
<ul cond="$val1['list']" class="second-menu">
<li loop="$val1['list']=>$key2,$val2" cond="$val2['link']" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['list']" class="third-menu">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']">
<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
</li>
</ul>
</li>
</ul>
</li>