상단 2차 메뉴를 세로로 슬라이딩되게 하는 방법입니다.
xe_official 레이아웃을 기준으로 설명합니다.
1. layout.html파일을 아래와 같이 수정합니다.
[수정전]
<!-- GNB -->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="/{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<>
<!--@endif--><!--@endforeach-->
</ul>
[수정후]
<!-- 2차 세로메뉴 --> <div id="headerFirstMenu"> <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;"<> {@ $firstMenuCount++} <!--@end--><!--@end--> </ul> </div> <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:1px solid #a98a60;"<!--@end--> id="headerSecondMenuOl{$secondMenuCount}"> <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])--> <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="/{$val["href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><font size="2px" color="#ffffff">▸</font> {$val['link']}</a></li> <!--@end--> <!--@end--> </ol> {@ $secondMenuCount++} <!--@end--><!--@end--> </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--> } </script>
2. default.css 파일에 아래의 소수 추가합니다.
/* 세로메뉴 */ #headerFirstMenu { position:absolute; top:70px; left:150px; width:980px; height:37px; z-index:4; } #headerFirstMenuUl { padding:0px; margin:0px; width:980px; height:37px; overflow:hidden; float:left; } #headerFirstMenuUl li { list-style:none; float:left; } #headerFirstMenuUl li a { width:80px; height:23px; padding-top:7px; margin:7px 0px 0px 0px; text-align:center; font-size:13px; color:#D2C2AC; font-weight:bold; text-decoration:none; display:block; } #headerFirstMenuUl li.on a { color:#ffffff; } #headerSecondMenu { position:absolute; top:107px; left:150px; overflow:hidden; z-index:5; } #headerSecondMenu ol { width:115px; padding:0px; margin:0px; background:#000000; display:none; } #headerSecondMenu ol li { list-style:none; } #headerSecondMenu ol li a { padding:7px 0px 5px 15px; color:#a98a60; text-decoration:none; display:block; } #headerSecondMenu ol li a:hover { color:#ffffff; }
p.s 자신의 레이아웃스킨에 맞게끔 위치조정을 하시고 색상들도 바꾸어 주시면 됩니다.
좌측메뉴 4단으로 나타내기
썸네일 반투명/흑백/Xray 이미지로 나타내기
