스카이 메뉴 및 마우스 반응에 따른 메뉴 변환

A. 개인 홈페이지을 새로 만들다가 만들게 된것이라
링크는 참고만 해 주세요

B. 그누보드4 최신 버젼과 그누보드DTD 버젼에서 테스트 하였으며

C. 브라우져는

- IE10 ( 아마 6 이상에서 될테지만, ie6 에서 css 는 좀 손봐 주셔야 할것 같습니다 )
- 크롬
- 사파리
- 오페라
- Firefox

에서 테스트 하였습니다.

D. 그누보드4s 에서도 될것으로 생각이 들지만
css 부분은 손 봐주셔야 될것 같습니다.

E. 메뉴는 글자로 해두었으니, 수정하시면 사용 가능 합니다.




(*) 반듯이 tail.php 는 파일 복사가 아닌
프로그램 소스을 열어서 복사 붙여 넣기 해 주세요.


1) 해당 파일을 다운 받으신 이후에
압축을 푸시면 그누보드 디렉토리 구조와 같은 구조로 보입니다.

2) /img/skymenu/ 안에 있는 이미지을 디렉토리 구조대로 복사해 주세요

3) /js/ 안에 있는 2개의 js 을 그대로 복사 해 주세요

4) tail.php 을 열어서 운영하시는 사이트의 소스에 아래의 내용을
그대로 붙여 넣기 하시면 끝납니다.

어느곳에나 넣어도 상관 없지만
저는

<!-- 카피라이트 끝 --> 이라는 소스 아래에 넣었습니다.



[ 복사 붙여넣기 할 소스 ]-------------------------------------------------[ 시작 ]

<? // sky menu ?>
<div id="skymenuleft">
<ul class="stickybox">
<li class="skymenuleftsub"><a><img src="/img/skymenu/st.gif?201307" width="74" height="22" alt="메뉴1" /></a>
<ol class="hide">
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> 구매하기</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> 추천상품</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> 회원정보</li>
</ol>
</li>
<li class="skymenuleftsub"><a><img src="/img/skymenu/sm.gif?2013" alt="메뉴2"/></a>
<ol>
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
</ol>
</li>
<li class="skymenuleftsub"><a><img src="/img/skymenu/sm.gif?2013" alt="메뉴3"/></a>
<ol class="hide">
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
</ol>
</li>
<li class="skymenuleftsub"><a><img src="/img/skymenu/sm.gif?2013" alt="메뉴4"/></a>
<ol class="hide">
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
</ol>
</li>
<li class="skymenuleftsub"><a><img src="/img/skymenu/sm.gif?2013" alt="메뉴5"/></a>
<ol class="hide">
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
</ol>
</li>
<li class="skymenuleftsub"><a><img src="/img/skymenu/sm.gif?2013" alt="메뉴6"/></a>
<ol class="hide">
<li>
<ol style="border:1px solid #ccc;width:38px;height:38px;">
<li></li>
</ol>
</li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/ball.gif" width="5" height="7" /> <a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
</ol>
</li>
<li><img src="/img/skymenu/sb.gif" /></li>
</ul>
</div>

<div id="skymenuright">
<ul class="stickybox">
<li><img src="/img/skymenu/rt.gif" width="74" height="80" /></li>
<li class="rightmenu"><a href="http://sir.co.kr/">그누보드</a></li>
<li class="rightmenu"><a href="http://sir.co.kr/main/community/">커뮤니티</a></li>
<li class="rightmenu"><a href="http://sir.co.kr/">그누보드</a></li>
<li><img src="/img/skymenu/rm.gif" width="74" height="6" /></li>
<li style="padding-top:10px;"><a href="#g4_head"><img src="/img/skymenu/rtop.gif" width="74" height="17" /></a></li>
</ul>
</div>


<style>
div#skymenuleft { font:11px/17px '돋움','Dotum';letter-spacing: -1px !important; }
div#skymenuleft { top: 150px;position:absolute;left:50%;margin-left:-580px;padding: 0;}
div#skymenuleft ul > li { list-style: none;}
div#skymenuleft ol > li { list-style: none;text-align:left;}
div#skymenuleft .stickybox .skymenuleftsub { padding: 0;margin: 0;background-image:url('/img/skymenu/sback.gif');background-repeat: repeat-y; }
div#skymenuleft .stickybox .skymenuleftsub ol { padding: 3px 3px 3px 10px; }
div#skymenuleft .stickybox .skymenuleftsub ol li { padding: 1px;color:#666; }
div#skymenuleft .stickybox .skymenuleftsub ol li:first-child { margin: 5px 0 5px 0; }
.skymenuleftsub ol.hide{display:none}

div#skymenuright { font:11px/17px '돋움','Dotum';letter-spacing: -1px !important; }
div#skymenuright { top: 150px;position:absolute;left:50%;margin-left:510px;padding: 0;}
div#skymenuright ul.stickybox > li { list-style: none;}
div#skymenuright ul.stickybox .rightmenu { background-image: url(/img/skymenu/rback.gif);height:22px;padding-top:5px; }
</style>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/stickysidebar.jquery.min.js"></script>
<script type="text/javascript" language="javascript" defer="defer">
//<![CDATA[
$(function () {
$('#skymenuleft').height( $(window).height()-200 );
$('#skymenuright').height( $(window).height()-200 );

$(".stickybox").stickySidebar({
speed: 400
, easing: "easeInOutQuad"
, constrain: true
});

$(".skymenuleftsub>a").mouseover(function(){
$(".skymenuleftsub>ol").hide();
$(this).next("ol").toggle('fast');
});
});
//]]>
</script>

[ 복사 붙여넣기 할 소스 ]-------------------------------------------------[ 끝 ]


그누보드에 스킨용으로 처음 만들어 보는거라
그누님들에게 얼마나 도움이 될지 모르겠습니다.

보잘것 없지만
괞찮아 보이신다면 추천 부탁 드릴께요......꾸뻑...