스카이 메뉴 및 마우스 반응에 따른 메뉴 변환 정보
게시판 스카이 메뉴 및 마우스 반응에 따른 메뉴 변환첨부파일
본문
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>
[ 복사 붙여넣기 할 소스 ]-------------------------------------------------[ 끝 ]
그누보드에 스킨용으로 처음 만들어 보는거라
그누님들에게 얼마나 도움이 될지 모르겠습니다.
보잘것 없지만
괞찮아 보이신다면 추천 부탁 드릴께요......꾸뻑...
링크는 참고만 해 주세요
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>
[ 복사 붙여넣기 할 소스 ]-------------------------------------------------[ 끝 ]
그누보드에 스킨용으로 처음 만들어 보는거라
그누님들에게 얼마나 도움이 될지 모르겠습니다.
보잘것 없지만
괞찮아 보이신다면 추천 부탁 드릴께요......꾸뻑...
추천
10
10
댓글 전체
꼭필요 했는데 잘쓸께요 감사합니다 추천 누르고 갑니다 수고 하세요
감사히 잘쓰겠습니다..
좋은 스킨 공개 감사합니다 ^^ 추천~
감사합니다.
감사합니다.
사이트 이쁘네요..^^
근데.. 사이트 중간정도 내려보면.. 버벅거리기 시작합니다.
제PC가 성능이 떨어지는 편이기 하지만... ^^ 뭔지 모르지만.. 많은 스크립트들이 한번에 실행이 된느건지.. 좀.. 느려져요..
근데.. 사이트 중간정도 내려보면.. 버벅거리기 시작합니다.
제PC가 성능이 떨어지는 편이기 하지만... ^^ 뭔지 모르지만.. 많은 스크립트들이 한번에 실행이 된느건지.. 좀.. 느려져요..
저의 사이트는
2년전에 만들다가 회사 일로 잠시 접고 있다가
이제서야 여유가 생겨서
작업중이라서요....ㅋ
덩어리님께서 운영하시는 사이트에 적용했더니 느려지시는건가요?
아니면 제가 운영하는 사이트 말씀이신지요?
( 저의 사이트는 아직 개발중이라서 나중에 테스트을 더해야 합니다 )
그누 자체에 따로 테스트한 경우엔
버벅임이 없었습니다...^-^
2년전에 만들다가 회사 일로 잠시 접고 있다가
이제서야 여유가 생겨서
작업중이라서요....ㅋ
덩어리님께서 운영하시는 사이트에 적용했더니 느려지시는건가요?
아니면 제가 운영하는 사이트 말씀이신지요?
( 저의 사이트는 아직 개발중이라서 나중에 테스트을 더해야 합니다 )
그누 자체에 따로 테스트한 경우엔
버벅임이 없었습니다...^-^
벤지님.. 운영하시는 테스트주소요.. 접속해서 확인한겁니다..
제가 운영하는 사이트에 적용한것이 아니구요..^^
하단에.. 스크롤배너 있는 곳으로 가면... 약간 버벅 거려요..
제가 운영하는 사이트에 적용한것이 아니구요..^^
하단에.. 스크롤배너 있는 곳으로 가면... 약간 버벅 거려요..
아...
본문에 작성한것처럼 개발중이라 그래요.....^-^
따로 설치한 그누에서 테스트 끝낸거라 저 본문 소스는 버벅임이 없습니다..^-^
본문에 작성한것처럼 개발중이라 그래요.....^-^
따로 설치한 그누에서 테스트 끝낸거라 저 본문 소스는 버벅임이 없습니다..^-^
감사합니다...
감사합니다
대단하시네요...
스크랩