이 팁은 메뉴를 플래시로 바꾼다고 해서 플래시를 배경으로 하고 그위에 메뉴가 자동으로 나타나게 하는 것이 아니라 ,
플래시를 만들때 메뉴를 직접 넣어서 만들어야 합니다.
실력이 미천하여 플래시를 배경으로 하고 그위에 메뉴가 구현되게 하기는 역부족입니다.
먼저 플래시파일을 제작해야겠죠(Flash Mx 나 Swish Max 사용)
제작된 플래시파일을 임의이 폴더에 업로드합니다.(Ex : /img/flash.swf)
자신이 사용중인 레이아웃 (Ex : xe_official)
1. layout.html를 에디터기로 엽니다.
[변경전] - 23줄부터
<div id="bodyWrap">
<div id="header">
<h1><a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="/images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
[변경전] - 36줄부터<div id="header">
<h1><a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="/images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<!--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;"<!--@end-->>{$val['link']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//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;"<!--@end-->>{$val['link']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
[변경후] - 빨간색 부분 추가 (플래시메뉴 추가하는 소스)
<div id="header">
<h1><a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="/images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<h2><script type="text/javascript">displayMultimedia("/img/flash.swf", "980","100",false);</script></h2>
"980","100", "가로크기", "세로크기", 자신의 스킨에 맞게 변경하세요<h1><a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="/images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<h2><script type="text/javascript">displayMultimedia("/img/flash.swf", "980","100",false);</script></h2>
[변경후] - 녹색 부분 제거 (기존의 메뉴부분 삭제, 다 지우면 왼쪽 2차메뉴 생성이 안됩니다)
<!--GNB-->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
여기까지가 layout.html를 편집하는 부분입니다.<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<!--//GNB-->
2. 해당 칼라의 css를 엽니다. (Ex : default.css)
15줄
#header h1 { position:absolute; top:32px; left:25px;}
아래에
#header h2 { position:absolute; top:75px; right:0px;}
를 추가해 줍니다.
top:75px; right:0px; 도 자신의 스킨에 맞게 변경하세요.
이상 이렇게 하면 메뉴가 플래시로 바뀝니다.
바꾸기전에 자신의 메뉴가 확립된 상태에서 하는 것이 좋을 것입니다.
아니면 메뉴가 바뀔때마다 플래시메뉴를 편집해야 합니다.
별 것도 아니지만 혹시나 필요한 분이 있을까봐 올려봅니다.
#참고로 제가 사용한 메뉴바 스위시파일로 올립니다. 스위시에서 편집해서 사용하시면 됩니다.
round house 블로그 레이아웃 Tip
웹폰트로 홈피를 꾸미는 방법 2
이런에러가 나는데 왜 그런가요?