위치 : 메인 » 스킨소개 » 최근게시물 » (4)번글 :: 깔끔한 탭메뉴 입니다

tabmenu20101007.jpg

깔끔한 탭메뉴 입니다

카테고리 ::
최근게시물
작성일 ::
2010년 10월 7일 목요일 PM 2시 21분
작성자 ::
멋쟁이냐
조회수 ::
2930 회

tabmenu20101007.zip tabmenu20101007.zip (18KB) (Down:96)

테크노트 원문 정보

제목(원문) ::
깔끔한 탭메뉴
라이센스 ::
무료스킨:skin
제작자 ::
아이맨
미리 보기 링크 ::
http://www.sabjil.wo.tc/preview/?q=skin:483

미리보기 횟수 : 455

  • 현재(4번)글 본문 보기
  • 댓글보기(1+0)
크게 작게

title깔끔한 탭메뉴 입니다

제목 그대로 아주아주 깔끔한 탭메뉴 입니다.

탭 내용부분에는 아이보드로 출력하도록 짜여져 있고,

전반적으로 소스도 상당히 깔끔하게 정리 되어 있네요.

 

저는 원본소스의 tab_menu.php 파일을 모두 복사해서 k빌더의 iboard 파일에 붙여넣기 하여 사용해 보았습니다.

아이보드 출력설정셋은 $Image_and_body2 를 사용했구요~

<!-- 내용출력 시작 -->
<div class="tab-pane" id="tabPane1">

  <div class="tab-page" id="tabPage1">
    <h2 class="tab">모바일 상식</h2>
    <table><tr><td>
     <? iBoard_Print_Here('tabmenu20101007',$Image_and_body2); // 게시물 ?><br>
    </td></tr></table>
  </div>

  <div class="tab-page" id="tabPage2">
    <h2 class="tab">프리폰톡</h2>
    <table><tr><td>
     <? iBoard_Print_Here('tabtog20101007',$Image_and_body2); // 게시물 ?><br>
    </td></tr></table>
  </div>

  <div class="tab-page" id="tabPage3">
    <h2 class="tab">팁&테크</h2>
    <table><tr><td>
     <? iBoard_Print_Here('skin20101002',$Image_and_body2); // 게시물 ?><br>
	 </td></tr></table>
  </div>

  <div class="tab-page" id="tabPage4">
    <h2 class="tab">질문답변</h2>
    <table><tr><td>
      <? iBoard_Print_Here('colorboard',$Image_and_body2); // 게시물 ?><br>
    </td></tr></table>
  </div>

</div>
<!-- 내용출력 끝 -->

탭을 더 추가 하시려면 위와 같은 방식으로 div 를 복사해서 붙여넣고 id="tabPage5" 로 지정해 주기만 하면 쉽게 탭메뉴를 추가 할 수 있도록 되어 있습니다.

<div class="tab-page" id="tabPage5">
    <h2 class="tab">질문답변2</h2>
    <table><tr><td>
      <? iBoard_Print_Here('tabtog20101007',$Image_and_body2); // 게시물 ?><br>
    </td></tr></table>
  </div>

그리고, png 이미지가 3개가 있는데, 이 이미지들의 위치는 ./skin_board/스킨/img/tab_menu/ 입니다.

소스 공개해 주신 아이맨님 감사합니다.

  • 현재(4번)글 본문 보기
  • 댓글보기(1+0)
no photo

이름아이콘 거칠아루

2013-12-16 14:30

좋아요!잘 활용하겠습니다.
  • 0
    3500

  1. page:1/3
  2. 1
  3. 2
  4. 3

sabjilmode@sabjil.wo.tc

© 2010 Sabjil