스카이 메뉴 및 마우스 반응에 따른 메뉴 변환 > 그누4 DTD 스킨

그누4 DTD 스킨

그누보드4 DTD 버전 스킨 전용게시판 입니다.
스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
스킨 다운로드시 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

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

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

첨부파일

bengi-sky-utf8.zip (12.7K) 62회 다운로드 2013-07-28 05:18:19
bengi-sky-euckr.zip (12.7K) 10회 다운로드 2013-07-28 05:23:01

본문

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>

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


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

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

댓글 전체

전체 44 |RSS
그누4 DTD 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT