제로보드XE - 레이아웃 스킨
| 라이센스 | GPL2 |
|---|---|
| 기타 라이센스 | |
| 적용 버전 | 정식버전(1.0이후) |
보았습니다. 레이아웃 스킨은 Teryboy님의 것과 동일합니다. 다만 좌측의 2차메뉴와 3차메뉴 부분을 삭제하고 위젯을 넣었습니다.
테스트는 IE 7.0에서 시행했습니다. 제 주위에는 IE 6.0을 쓰고 계신분이 없어서 테스트를 못해 봤습니다. 제로보드 XE를 이용하여
홈페이지를 지금 만드는 중이어서 미리보기에서는 메뉴부분만 참고하시면 될것 같습니다.

처음에는 소마세월님의 팁을 이용하여 마우스 오버시 서브메뉴가 가로로 뜨는것에 덧붙여서, 주메뉴에 마우스 오버시 회색을 초록색으로 바꾸게 하기위해 CSS에서 hover를 이용하면 쉽게 해결될수 있을것으로 생각했습니다.
그런데 hover를 이용하면 마우스 오버시 주메뉴가 회색에서 초록색으로 바뀌게 할수는 있는데 서브메뉴를 선택하기 위해 마우스를
서브메뉴쪽으로 이동하면 초록색의 주메뉴가 다시 회색으로 바뀌는 것이었습니다.
CSS만 이용하여 이것을 해결하려고 일주일 정도를 허비했는데 헛수고 였습니다. 그래서 포기하고 Javascript를 사용하여 롤오버 메뉴를
구현하는 쪽으로 방향을 바꾸게 되었습니다. 제가 착안했던 사항은 Zero님께서 마우스를 클릭하면 클래스가 on으로 바뀌도록 제로보드
XE 프로그램을 짜놓았다는 것이었습니다. 그래서 마우스 클릭뿐 아니라 마우스를 오버해도 클래스를 on으로 바꿀수 있다면 롤오버
메뉴의 구현이 가능하다는 생각이 들었습니다. 설명을 하다보니 너무 장황해 지네요. 첨부된 압축화일을 푸셔서 Teryboy_login_v1
파일은 ZBXE/widgets/login_info/skins/Teryboy_login_v1으로 서버에 저장하시고, Teryboy_v2_potal_st_auto 파일은 ZBXE/layouts/Teryboy_v2_potal_st_auto로 서버에 저장하시면 됩니다. (Teryboy님의 레이아웃 스킨의 업로드 방법과 동일)
소스프로그램을 분석해 보시면 쉽게 내용을 알수 있으리라고 생각되나 , 보다 자세한 내용을 알고 싶다는 요청이 있으면 팁으로
올리도록 하겠습니다. 주메뉴에 마우스 오버시 서부메뉴가 주메뉴 바로 아래부터 시작되게 하는것은 아직 남은 숙제입니다.
제로보드의 지속적인 발전을 바랍니다. 가능하다면 플래쉬 메뉴도 제로보드에서 제공해 주면 좋겠네요.
IE6.0에서의 문제는 아닌것 같습니다. 제가 홈페이지를 만들기 위해 CSS를 바꾸었기 때문에 나타나는 현상 같습니다. 제 Source를
그대로 이용하지 마시고 Teryboy님의 스킨에 제가 아래에 설명하는 코드를 삽입해 보시면 문제가 없어지리라 생각합니다.
작업하기에 앞서 소마세월님의 팁은 꼭 읽어보시기를 부탁 드립니다.
우선 TeRyBoY_v2_PoTal_st_Auto폴더를 열면 layout.htm파일이 보일겁니다. 드림위버나 나모와 같은 웹에디터(다른 웹에디터도
상관없습니다.)를 이용하여 다음의 코드를 입력해 넣습니다.
<ul id="gnb">
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li id="juMenu_{$idx}" onMouseOver="menu({$idx});" <!--@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-->
{@$idx++}
<!--@end-->
<img src="./images/{$layout_info->colorset}/TopPbgGnbLast.gif">
<!-- main_menu 1차 끝 -->
</ul>
<script language="javascript1.2">
var menuLen={$idx-1};
</script>
<!--히든 레이어 메뉴-->
<!-- main_menu 1차 시작 -->
{@ $idx = 1 }
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--2차메뉴-->
<div class="subMenu" id="subMenu_{$idx}" style="<!--@if($val['selected'])-->display:block;<!--@else-->display:none;<!--@end-->">
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
<!--@if($val1['selected'])--><!--@end-->
<a id="lnb1" href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val1['text']}</a>
<!--@end-->
<!--@end-->
</div>
<!--@end-->
{@$idx++}
<!--@end-->
<!-- main_menu 1차 끝 -->
<!--//GNB-->
위 코드를 입력한후 layout.htm화일을 저장합니다. 다음은 js폴더의 TeRyBoY.js파일을 열고
맨아래에 아래의 코드를 입력합니다.(소마세월님은 eval함수를 사용했는데 구태여 그럴필요가 없을것 같아 저는 뺏습니다.)
function menu(idx){
for (i=1;i<=menuLen;i++){
document.getElementById('subMenu_'+i).style.display='none';
document.getElementById('juMenu_'+i).className='';
}
document.getElementById('subMenu_'+idx).style.display='block';
document.getElementById('juMenu_'+idx).className='on';
}
위의 코드를 입력후 저장합니다. 다음은 css폴더의 limegreen.css파일을 열고 아래의 코드를 입력합니다.
.subMenu{margin:0; padding:0; position:absolute; top:47px; left:15px; overflow:hidden; white-space:nowrap;}
#lnb1{margin:0; padding:10; font-weight:bold; color:#ffffff; padding-left:10px; padding-right:10px; text-decoration:none; background:url(../images/limegreen/bgGnbVr.gif) no-repeat right center; position:relative;white-space:nowrap; }
#lnb1:hover,focus {color:#0080ed;}
#lnb1.on { font-weight:bold; color:#0080ed;}
위의 코드를 입력한후 저장합니다. 그러면 문제가 없으리라 봅니다.
제가 직장이 대전이어서 아침에 내려오면서 시외버스 터미날에서 테스트를 해보았습니다.
글자가 겹치는 문제는 IE6.0문제는 아닌것 같습니다. 시간이 나는대로 CSS부분을 다시 보도록 하겠습니다.
불여우에서는 어떤지 모르겠네요. 위의 코드를 첨부하니 코드를 일일히 쳐넣으실 필요는 없을것 같습니다.
않아 발생되는 문제였습니다. GNB2부분을 지우고 다시 화일을 업로드 하였습니다. 또 다른 문제가 있으면 댓글로 올려 주시기 바랍니다.
위의 소스들을 첨가한후 아래부분을 삭제하니 잘 되네요
응용된 사이트입니다 http://ckmusic.com.cn
tindrum 님 감사합니다!!
<!--GNB2-->
<ul id="gnb2">
<!-- main_menu 2차 시작 -->
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<!--@if($menu_1st)-->
{@ $idx = 1 }
<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>
{@$idx++}
<!--@end-->
<!--@end--><!--@end-->
</ul>
<!--//GNB2-->
아직 레이아웃을 설치하지 않았다면 Tindrum 님께서 댓글로 업로드하신 파일로 바로 사용하여도 무관하나요?
한마디로 다시 댓글에 첨부하신 레이아웃 파일을 Tindrum 님께서 수정하신후 올리신거기에 그냥 바로써도 되나요?
그리고 첨부된 파일에 Teryboy_login_v1 이 없고 v2로 추정되는 폴더만 하나있는데 무슨경우인지... 설명에 따르면 첨부파일에 다같이 잇다는데요?
죄송합니다. 제가 나이가 좀 들어서 집중력이 떨어지는것 같습니다. 이해해 주세요. 제가 올린 파일은 그대로 쓰셔도
상관없습니다만 위젯을 넣는 방법정도는 아셔야 제대로 홈페이지를 만들수 있을것입니다.
IE6에서 겹침현상..
메뉴이동중에는 안나타나지면 정작 메뉴를 클릭하면 상단메뉴중 하위메뉴가 있는 모든메뉴가 활성화 되네요..
불가능할듯도 합니다. 별문제가 없다고 판단되면 제로보드의 default스킨을 롤오버 메뉴로 바꿔보려 했는데 보류해야 겠네요.
IE 6에서도 정상적으로 잘 작동하는 듯 합니다.
저는 메뉴만 살짝 떼어 내어서 걸어봤는데 잘 되네요.
테스트
익스 7/ 파폭 에서도 약간 모습이 다르긴 하지만 거의 문제가 없는듯 한데요....
감사합니다.
아직 사용해 보진 않았지만 제겐 상당한 도움 될것 같습니다
그리고 이참에 혹시 페이지인식도 가능하지 않을까요?
그러면 굳이 플래시를 사용하지 않아도 될듯 해서요.
저도 나름 고민해 보겠습니다
감사합니다
뭐.. 어찌어찌 하다보니 오류 해결했습니다.
혹 발생하시는분들 위하여 공표하려햇지만 뭘건들였는지;;;
우연잖게 오류해결했는데요.
추후, 알아내서 댓글로 달도록 노력해볼게요.
그래도 페이지에 오류가 있다고 뜨는이유는 뭔지..ㄷㄷㄷ
http://frienger3.hosting.paran.com/zbxe
열루와보시면 하단에 오류가 있다고 하네요.
P.S.
로그인시에 다시금 하위메뉴가 있는 모든 메뉴 활성화되네요.









만들어 주셔서 감사합니다. 마침 저도 테리님 레이아웃으로 님처럼 똑같은거 만들려고 오늘 하루종일 삽질중이였거든요. ㅋㅋ
그런데, 올려주신 소스 받아서 몇번이고 다시 올려보기도 했는데, 제대로 안되는거 같아요..
올려주신 소스 한번 확인 부탁드립니다.