http://www.xpressengine.com/19106285
이 곳에 올라와 있는 레이아웃소스중에 Quick Menu부분이 있어서 따로 분리해서 Tip으로 남겨둡니다.
jquery.js 파일을 다운받아서 적용을 원하는 레이아웃의 js폴더에 업로드합니다.
이미지를 다운 받아서 레이아웃의 images폴더에 업로드합니다.
1. info.xml 파일안에 아래의 코드를 붇여서 수정합니다.
[설정부분]
<title xml:lang="ko">퀵메뉴표시</title>
<description xml:lang="ko">퀵메뉴 표시여부를 선택해주세요.</description>
<options value="Y">
<title xml:lang="ko">퀵메뉴 사용</title>
</options>
<options value="N">
<title xml:lang="ko">퀵메뉴 사용하지 않음</title>
</options>
</var>
[메뉴부분]
<title xml:lang="ko">퀵 메뉴 </title>
</menu>
2. layout.html 파일안에 아래의 코드를 적당한 위치에 붙여 수정합니다.
<!-- Quick 메뉴 -->
<!--@if($layout_info->quick_menu_use=="Y")-->
<!--%import("js/jquery.js")-->
<script type="text/javascript">
$(document).ready(function () {
$("ul.favoritList li:even").addClass("alt");
$('img.favoritTitle').click(function () {
$('ul.favoritList').slideToggle('medium');
});
$('ul.favoritList li a').mouseover(function () {
$(this).animate({ fontSize: "10px", paddingLeft: "10px" }, 50 );
});
$('ul.favoritList li a').mouseout(function () {
$(this).animate({ fontSize: "10px", paddingLeft: "10px" }, 50 );
});
});
</script>
<div id="favorit">
<img src="images/favorit.gif" alt="QuickMenu" border="0" width="180px" height="33px" class="favoritTitle" />
<ul class="favoritList">
{@$idx = 1 }
<!--@foreach($quick_menu->list as $key => $val)-->
<!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li ><a <!--@if($val['selected'])-->class="current"<!--@end--> href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a></li>
<!--@end-->
{@$idx++}
<!--@end-->
</ul>
</div>
<!--@end-->
3. 해당 css파일안에 아래의 코드를 붙여 수정합니다.
#favorit{position:absolute; top:60px; left:10px; width:180px; height:35px; z-index:8; }
#favorit .favoritTitle{ }
#favorit .favoritList {width:178px; float:right; z-index:9; *zoom:1; border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;border-left:1px solid #e2e2e2; display:none; }
#favorit .favoritList li{background:#f2f2f2; border-bottom:1px solid #fff; list-style:none; }
#favorit .favoritList li a{color:#afafaf; text-decoration:none; padding:5px; padding-left:30px; display:block; font-size:10px;}
#favorit .favoritList li.alt{background:#fff;}
#favorit .favoritList li a:hover{padding:5px; color:#fff; background:#007aef;}
top:60px; left:10px; 이부분을 적당히 수정해서 위치를 잡으시면 됩니다.
display:none; 이 부분을 제거하면 처음부터 펼쳐보이고 그대로 두면 접은 상태로 출력됩니다.
마우스로 Quick Menu부분을 클릭하면 아래로 메뉴가 출력됩니다.