묻고답하기
2단 메뉴 익스플로워 8에서만 되요.. ㅠ.ㅠ
2012.02.06 10:45
안녕하세요. 홈페이지 를 xe(제로보드로) 제작하였습니다.
레이아웃 스킨을 이용해서 2단 메뉴를 만들었는데
익스플로워 8에서는 정상적으로 작동이 됩니다.
하지만 익스플로워 9에선 호환성버튼을 눌러야 작동이되고,
또 크롬이나 다른 익스플로워에선 2단 메뉴가 나오지 않아요.
소스는 아래와 같습니다..
고수님들 도와주세요. 모든(유명) 익스플로워에서 2단 메뉴를 사용하고 싶습니다.
<!--%import("css/default.css")-->
<div id="layoutBody">
<div id="headerWhole" <!--@if($layout_info->headerWholeBg)-->style="border-bottom:4px solid #014D7E; background:url('{$layout_info->headerWholeBg}')"<!--@end-->>
<div id="header" onmouseover="hiddenSecondMenu()" <!--@if($layout_info->headerBg)-->style="background:url('{$layout_info->headerBg}')"<!--@end-->>
<div id="headerTopRight">
<!--최상단 우측 내용-->
<!--@if($layout_info->headerTopRightLeft)-->
<div id="headerTopRightLeft">
{$layout_info->headerTopRightLeft}
</div>
<!--@end-->
<!--최상단 우측 로그인정보-->
<!--@if($layout_info->headerTopRightLogin == "use")-->
<div id="headerTopRightLogin">
<!--@if($logged_info)-->
<!--@end-->
</div>
<!--@elseif($layout_info->headerTopRightLogin == "notuse")-->
<!--@end-->
</div>
<!--상단 로고-->
<!--@if($layout_info->headerLogo)-->
<div id="headerLogo">
<a style="width:160px; height:37px; display:block;" href="{$layout_info->homepage_url}"><img src="{$layout_info->headerLogo}" width="160" height="37" /></a>
</div>
<!--@end-->
</div>
</div>
<!--상단 우측 로그인정보 클릭 시 나타나는 로그인폼-->
<div id="headerTopRightLoginWiget">
<img class="zbxe_widget_output" widget="login_info" skin="Forhanbi_login" colorset="forhanbi1.5" />
</div>
<!--상단 1차메뉴-->
<div id="headerFirstMenu">
<img style="float:left;" src="images/top_menu_bg_left.gif" />
<ul id="headerFirstMenuUl">
{@ $firstMenuCount=1}
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<li <!--@if($val['selected'])-->class="on2"<!--@end-->><a href="{$val['href']}" onmouseover="showSecondMenu({$firstMenuCount})" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
{@ $firstMenuCount++}
<!--@endif--><!--@endforeach-->
</ul>
<img style="float:left;" src="images/top_menu_bg_right.gif" />
</div>
<!--상단 2차메뉴-->
<div id="headerSecondMenu" >
{@ $secondMenuCount=1}
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
{@ $menu_1st = $val }
<ol <!--@if($menu_1st['list'])-->style="border-bottom:1px solid #000000; border-right:1px solid #000000;"<!--@end--> id="headerSecondMenuOl{$secondMenuCount}">
<!--@foreach($menu_1st['list'] as $key => $val)-->
<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></li>
<!--@end-->
</ol>
{@ $secondMenuCount++}
<!--@endif--><!--@endforeach-->
</div>
<!--컨텐트 시작-->
<div id="content" onmouseover="hiddenSecondMenu()">
<div id="contentRight">
<div id="contentRightTop">
<div id="contentRightTopCategory">
<strong>·</strong> <a href="{$layout_info->homepage_url}">HOME</a>
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st_2 = $val }
> {$val['link']}
<!--@foreach($menu_1st_2['list'] as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
> <font color="#88ADC5">{$val['link']}</font>
<!--@end-->
<!--@endif--><!--@endforeach-->
<!--@end-->
<!--@endif--><!--@endforeach-->
</div>
<ol id="contentRightTopSecondMenuOl">
<!--@foreach($menu_1st_2['list'] as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
<li>{$val['link']}</li>
<!--@end-->
<!--@endif--><!--@endforeach-->
</ol>
</div>
<div id="contentRightBottom">
{$content}
</div>
</div>
<div id="contentLeft">
<ul id="contentLeftFirstMenuUl">
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st_3 = $val }
<li <!--@if($val['selected'])-->class="on"<!--@end-->>{$val['link']}</li>
<!--@end-->
<!--@endif--><!--@endforeach-->
</ul>
<ol id="contentLeftSecondMenuOl">
<!--@foreach($menu_1st_3['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></li>
<!--@endif--><!--@endforeach-->
</ol>
<!--@if($layout_info->contentLeftBottom)-->
<div id="contentLeftBottom">
{$layout_info->contentLeftBottom}
</div>
<!--@end-->
</div>
</div>
<div id="footer">
<!--@if($layout_info->footerLogo)-->
<div id="footerLogo" >
<a style="width:127px; height:58px; display:block;" href="{$layout_info->homepage_url}"><img src="{$layout_info->footerLogo}" width="127" height="58" /></a>
</div>
<!--@end-->
<!--@if($layout_info->footerCopyright)-->
<div id="footerCopyright">
{$layout_info->footerCopyright}
</div>
<!--@end-->
<!--@if($layout_info->footerRightImage)-->
<div id="footerRightImage">
<a style="width:80px; height:58px; display:block;" href="{$layout_info->footerRightImageUrl}" target="footerRightImage"><img src="{$layout_info->footerRightImage}" width="80" height="80" /></a>
</div>
<!--@end-->
<!--@if($layout_info->footerBottom)-->
<div id="footerBottom">
{$layout_info->footerBottom}
</div>
<!--@end-->
</div>
</div>
<script>
//상단 1차메뉴 마지막 리스트 마디 및 여백 없애는 스크립트
<!--@if($main_menu->list)-->
firstMenuLength=headerFirstMenuUl.children.length;
headerFirstMenuUl.children[firstMenuLength-1].style.paddingRight=0;
headerFirstMenuUl.children[firstMenuLength-1].style.marginRight=0;
headerFirstMenuUl.children[firstMenuLength-1].style.background="none";
<!--@end-->
//상단 1차메뉴 마우스오버 시 2차메뉴 슬라이드 함수
function secondMenuSlide(){
if(headerSecondMenu.offsetHeight<secondMenuHeight){
headerSecondMenu.style.height=heightNum;
heightNum=heightNum+7;
setTimeout("secondMenuSlide()",10);
}
else{
headerSecondMenu.style.height=secondMenuHeight;
}
}
//상단 1차메뉴 마우스오버 시 2차메뉴 위치조정하고 나타나게 하는 함수
function showSecondMenu(n){
<!--@if($main_menu->list)-->
heightNum=0;
headerSecondMenu.style.height=0;
headerSecondMenuLeft=0;
//상단 2차메뉴 위치조정
for(i=1;i<=n;i++){
headerSecondMenuLeft=headerSecondMenuLeft+headerFirstMenuUl.children[i-1].offsetWidth;
}
headerSecondMenu.style.left=headerSecondMenuLeft+74;
//선택된 상단 1차메뉴의 2차메뉴만 나타나게 하는 부분
for(i=1;i<=firstMenuLength;i++){
headerFirstMenuUl.children[i-1].className="off";
document.getElementById('headerSecondMenuOl'+i).style.display="none";
}
headerFirstMenuUl.children[n-1].className="on";
document.getElementById('headerSecondMenuOl'+n).style.display="block";
secondMenuHeight=document.getElementById('headerSecondMenuOl'+n).offsetHeight;
secondMenuSlide();
<!--@end-->
}
//상단 2차메뉴 사라지게 하는 함수
function hiddenSecondMenu(){
<!--@if($main_menu->list)-->
for(i=1;i<=firstMenuLength;i++){
headerFirstMenuUl.children[i-1].className="off";
document.getElementById('headerSecondMenuOl'+i).style.display="none";
}
<!--@end-->
}
//상단 우측 로그인정보 클릭 시 나타나는 로그인폼
loginNum=0;
function showLoginForm(){
if(loginNum==0){
headerTopRightLoginWiget.style.display="block";
loginNum=1;
}
else{
headerTopRightLoginWiget.style.display="none";
loginNum=0;
}
}
</script>
