탭메뉴만들기 (참 무식한방법이지만 ) 정보
탭메뉴만들기 (참 무식한방법이지만 )
첨부파일
본문
스킨을 찾아봤지만 다 테이블로 작업된거라 ㅠㅠ
배운게없어서 미국 사이트에서 소스를 갖고 와서 수정해봤습니다...
일단 head.sub.php 에
<link type="text/css" rel="stylesheet" href="<?=$g4['path']?>/css/general.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="<?=$g4['path']?>/css/ie6.css" type="text/css" media="screen," />
<![endif]-->
↑ 이걸 스타일 부분에 추가하시구요
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/tabs.js"></script>
↑ 이걸 스크립 부분에 추가하시구요
이젠 index.php 에 탭메뉴 나올곳에
<div id="container">
<ul class="menu">
<li id="news" class="active">자유게시판</li>
<li id="tutorials">팁&공유</li>
<li id="links">링크</li>
</ul>
<span class="clear"></span>
<div class="content news">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
<div class="content tutorials">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
<div class="content links">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
</div>
이걸 추가하시면 됨니다 ^^...
최신글 스킨은
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=96865&sca=&sfl=wr_name%2C1&stx=websp&sop=and WEBSP 님꺼 쓰면되고요 가장쓸만하더라구요
탭을 추가시
general.css 에서 추가된 부분 더 써주면되구요
tabs.js 에서도 쫌 작업해야됨니다...
전혀안됀다 싶으면 쪽지 보내주세요 ^^
배운게없어서 미국 사이트에서 소스를 갖고 와서 수정해봤습니다...
일단 head.sub.php 에
<link type="text/css" rel="stylesheet" href="<?=$g4['path']?>/css/general.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="<?=$g4['path']?>/css/ie6.css" type="text/css" media="screen," />
<![endif]-->
↑ 이걸 스타일 부분에 추가하시구요
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/tabs.js"></script>
↑ 이걸 스크립 부분에 추가하시구요
이젠 index.php 에 탭메뉴 나올곳에
<div id="container">
<ul class="menu">
<li id="news" class="active">자유게시판</li>
<li id="tutorials">팁&공유</li>
<li id="links">링크</li>
</ul>
<span class="clear"></span>
<div class="content news">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
<div class="content tutorials">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
<div class="content links">
<?=latest("news", "news00", 4, 100); ?> <!--<?=latest("스킨풀더", "게시판", 4, 100); ?> --->
</div>
</div>
이걸 추가하시면 됨니다 ^^...
최신글 스킨은
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=96865&sca=&sfl=wr_name%2C1&stx=websp&sop=and WEBSP 님꺼 쓰면되고요 가장쓸만하더라구요
탭을 추가시
general.css 에서 추가된 부분 더 써주면되구요
tabs.js 에서도 쫌 작업해야됨니다...
전혀안됀다 싶으면 쪽지 보내주세요 ^^
추천
3
3
댓글 2개
ㅎㅎ^^ 좋은 ~ 것이군요 ! 이런식으로 정리된 소스를 ~ 크핫;; 발전된 수정은 불가하더라도 급하게 만들때는 매우 도움이 될거같아요!! 추천
아 모르고 게속적응하다가 관리자 모드 들어가니까 엉망이네요 그래서 general.css 수정했네요 ㅠㅠ
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
#container{
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
background: #fff;
line-height:14px;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
margin: 0px auto;
width: 480px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.free h1{
background: transparent url(img/news1.jpg) no-repeat scroll left top;
}
.content.free{
display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.asuult h1{
background: transparent url(img/news2.jpg) no-repeat scroll left top;
}
.content.asuult{
display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.medleg h1{
background: transparent url(img/news3.jpg) no-repeat scroll left top;
}
.content.medleg{
display: none;
}
.content.medleg a{
color: #5f95ef;
}
/******* /LINKS *******/
.content.togloom h1{
background: transparent url(img/news4.jpg) no-repeat scroll left top;
}
.content.togloom{
display: none;
}
.content.togloom a{
color: #5f95ef;
}
.content.boxex h1{
background: transparent url(img/news5.jpg) no-repeat scroll left top;
}
.content.boxex{
display: none;
}
.content.boxex a{
color: #5f95ef;
}
요걸로 바꺼주면되요 ^^
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
#container{
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
background: #fff;
line-height:14px;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
margin: 0px auto;
width: 480px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.free h1{
background: transparent url(img/news1.jpg) no-repeat scroll left top;
}
.content.free{
display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.asuult h1{
background: transparent url(img/news2.jpg) no-repeat scroll left top;
}
.content.asuult{
display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.medleg h1{
background: transparent url(img/news3.jpg) no-repeat scroll left top;
}
.content.medleg{
display: none;
}
.content.medleg a{
color: #5f95ef;
}
/******* /LINKS *******/
.content.togloom h1{
background: transparent url(img/news4.jpg) no-repeat scroll left top;
}
.content.togloom{
display: none;
}
.content.togloom a{
color: #5f95ef;
}
.content.boxex h1{
background: transparent url(img/news5.jpg) no-repeat scroll left top;
}
.content.boxex{
display: none;
}
.content.boxex a{
color: #5f95ef;
}
요걸로 바꺼주면되요 ^^
