묻고답하기
레이아웃 메뉴구성 질문입니다.
2012.05.15 12:33
http://naradesign.net/open_content/reference/navigation.html
위 주소에 보면
상단 메뉴 부분을 XE에서 사용하고 싶은데
안되서 질문드립니다.
위 주소 상단메뉴 네비게이션 처럼 구현할 순 없을까요?
===========================
layout.html
===========================
<load target="js/menu.js" />
<load target="css/default.css" />
<div id="gnb">
<ul>
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
{@ $menu_list = $val1['list']}
{@ $menu_item = $val1['link']}
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'" onmouseover="activeGNB('gm1');" onfocus="activeGNB('gm1');">{$val1['link']}</a>
<ul id="gm1">
<li loop="$menu_list=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'" class="dropdown">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
===========================
===========================
menu.js
===========================
//글로벌 네비게이션(2Depth 메뉴그룹)에 대한 마우스 또는 키보드 반응(보임/숨김)설정
function activeGNB(id) {
for(num=1; num<=4; num++) document.getElementById('gm'+num).style.display='none'; //D2MG1~D2MG4 까지 숨긴 다음
document.getElementById(id).style.display='block'; //해당 ID만 보임
}
===========================
default.css
===========================
#gnb { position:relative; height:60px; background:#333333; margin-bottom:10px; }
#gnb:after { content:""; display:block; clear:both; }
#gnb li { float:left; width:25%; text-align:center; }
#gnb li li { float:left; width:auto; text-align:left; }
#gnb li a { display:block; height:20px; padding-top:10px;}
#gnb li li a { display:inline; height:auto; padding:0; margin:0 10px; }
#gnb li.g1 { background:#666600 }
#gnb li.g2 { background:#669900 }
#gnb li.g3 { background:#66CC00 }
#gnb li.g4 { background:#FFCC00 }
#gnb ul { position:relative;}
#gnb ul ul { position:absolute; top:38px; display:none; white-space:nowrap; }
#gnb ul#gm1 { left:0; }
#gnb ul#gm2 { left:25%; }
#gnb ul#gm3 { left:50%; }
#gnb ul#gm4 { left:75%; }
/* 글로벌 메뉴 활성 */
#gnb .active ul { display:block; }
#gnb .active a { text-decoration:underline; }
#gnb .active li a { text-decoration:none; }
#gnb .active .active a { text-decoration:underline; }
===========================
