최신글 단설정 좀 봐주세요.
관련링크
본문
수고하십니다.
쥬노님의 최신글을 다운받아 사용중인데요.
3단 최신글입니다.
메뉴를 클릭하면 해당 최신 게시물이 보여지게 되는데요.
클릭하지 않고 마우스를 올리면 바뀌게 하고 싶어서요.
그리고
최신게시물 글이 1단으로 보여지는데요.
옆으로 2단이나 3단으로 나오게 할 수 있을까요?
세로로 5줄이 나오면 옆으로 5개가 더나와서 10개가 보여지게 끔요.
조언 좀 부탁드립니다.
감사합니다.
html 소스
<!-- 3단 시작 -->
<div class="widget-box">
<style media="screen">
/* 게시판 탭메뉴 START */
/* .nav-one { border-bottom: 0px solid #fff; color:#424242; text-align: center; margin-bottom: 3%; text-align: center; background: #eee;} */
.nav-one { border-bottom: 0px solid #fff; color:#424242; text-align: center; text-align: center; background: #fff;}
.nav-one li{display: inline-block; width: 33.3333%;}
.nav-one > li > a { font-size:16px; line-height: 1.42857143; border-radius: 0px 0px 0 0; margin-top:0px; letter-spacing: 2px; }
.nav-one>li>a{ padding:10px 30px; border: 1px solid #e6e6e6; background-color: #f0f0f0; color:#757575; }
.nav-one > li > a:hover { color:#212121; border: 1px solid #bdbdbd;}
.nav-one > li.active > a, .nav-one > li.active > a:hover, .nav-one > li.active > a:focus { color: #fff; cursor: default; background-color: #03a9f4; border: 1px solid #03a9f4; /*border-bottom-color: transparent;*/ }
.nav-one-content{border: 1px solid #fff; padding:10px; margin:0px;}
@media (max-width: 768px) {
.nav-one>li>a{ padding:5px; border: 1px solid #bdbdbd; background-color: #f4f2f2; color:#424242; }
.nav-one > li >a {font-size:15px;}
.nav-one { border-bottom: 0px solid #fff; color:#424242; text-align: center; margin-bottom: 3%; }
.nav-one {font-size:10px;}
}
/* 게시판 탭메뉴 END */
</style>
<div class="widget-box">
<div class="row">
<ul class="nav nav-tabs nav-one">
<li class="active"><a href="#home1" data-toggle="tab">메뉴01</a></li>
<li><a href="#tab11" data-toggle="tab">메뉴02</a></li>
<li><a href="#tab22" data-toggle="tab">메뉴03</a></li>
</ul>
<div class="tab-content nav-one-content">
<div class="tab-pane fade in active" id="home1">
<?php echo latest("basic_t-white", "b03", "5", "28");?>
</div>
<div class="tab-pane fade" id="tab11">
<?php echo latest("basic_t-white", "b04", "5", "28");?>
</div>
<div class="tab-pane fade" id="tab22">
<?php echo latest("basic_t-white", "b07", "5", "28");?>
</div>
</div>
</div>
</div>
</div>
latest.skin.php 소스
<div class="xe_latest_02 hj-box-text3">
<!--<div class="title"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><?php echo $bo_subject; ?></a></div>-->
<ul class="footer-text">
<!-- <ul class="footer-text" style="list-style-type: disc;"> -->
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<div class="an_left">
<?php if (!$list[$i]['icon_reply']) {?>
<span class="bullet">・ </span>
<?php } else { ?>
<span class="reply">└</span>
<?php } ?>
<span class="subject"><a href="<?php echo $list[$i]['href']; ?>"><?php echo $list[$i]['subject']; ?></a></span>
</div>
<div class="an_right">
<span class="date dw_date"><?php echo $list[$i]['datetime']; // 년-월-일로 출력 ?></span>
</div>
</li>
<?php } ?>
<?php for($i=0; $i<$rows-count($list);$i++){ $num = $i + count($list); ?>
<!-- <li>
<span class="bullet">›</span>
<span class="subject"><a href="#">등록된 게시물이 없습니다.</a></span>
</li> -->
<?php } ?>
</ul>
<!--<a class="more" href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>">MORE</a>-->
</div>
css소스
.xe_latest_02 {position:relative;border:0px solid #ddd;background:#fff;font-size: 15px; line-height: 2; font-weight: 300;*zoom:1}
.xe_latest_02:after {display:block;visibility:hidden;clear:both;content:""}
.xe_latest_02 a {color:#555555;text-decoration:none; font-weight: 400;}
.xe_latest_02 a:hover,
.xe_latest_02 a:active,
.xe_latest_02 a:focus {text-decoration:none}
.xe_latest_02 a:hover {color:#f07929}
.xe_latest_02 .title {margin:0;width:100%;font-size:12px;border-top:1px solid #ddd;background:#e8e8e8;}
.xe_latest_02 .title a {display:inline-block;padding:7px 0 6px 13px;font-weight:400;color:#63696D}
.xe_latest_02 .title a:hover {color:#63696D}
.xe_latest_02 ul {margin:0px 0px;padding:0;list-style:none}
.xe_latest_02 li {position:relative;margin:0 0 11px 0px; line-height: 1.3; border-bottom: 1px dashed #e8e8e8; padding-bottom: 15px;}
.xe_latest_02 li:after {display:block;clear:both;content:""}
.xe_latest_02 li span {display:inline-block}
.xe_latest_02 li .an_left {float:left;}
.xe_latest_02 li .an_left span {margin-right:0px}
.xe_latest_02 li .bullet {color:#999}
.xe_latest_02 li .reply {margin-left:5px;font-size:10px;color:#999;vertical-align:middle}
.xe_latest_02 li .icon span {padding:0 3px;border:1px solid #fafafa;font-size:10px;color:#FFF}
.xe_latest_02 li .icon span.n {background-color:#a5bd76}
.xe_latest_02 li .icon span.h {background-color:#bd7676}
.xe_latest_02 li .icon span.l {background-color:#bd76b9}
.xe_latest_02 li .icon span.f {background-color:#768fbd}
.xe_latest_02 li .icon span.s {background-color:#9a9a9a}
.xe_latest_02 li .an_right {float:right;color:#999;white-space:nowrap}
.xe_latest_02 li .an_right span {margin-left:5px}
.xe_latest_02 li .comment {color:#f07929;}
.xe_latest_02 li .name {display:none;width:90px;text-align:center}
.xe_latest_02 .more{position:absolute;top:10px;right:13px;font:11px Dotum, 돋움;text-decoration:none !important}
답변 1
일단 조언을 설명드릴게요 참고하세요
마우스 올려서 한다는건 호버 이벤트를 쓰면되구요 (제이쿼리에서는 hover함수가 있어요)
아니면 css에서도 hover가 있어요 이걸 참고하면되고
최신글이 처음에 5줄정도 있으면 탭버튼 옆에꺼 또 누르면 10개 나오고 또 옆에꺼 누르면 15개 나오고 이런식을 원한다는건가요? 만약에 그렇다면 제이쿼리 ajax를 써서 탭버튼에 class로 표시해서 예를들어서 하나 탭버튼에 .page10개로 지어서
에이작스 단에서 클래스를 클릭하면 조건에 맞게 받아와서 그 갯수에 맞게 뿌려주는 방법으로 해야될것같아요
답변을 작성하시기 전에 로그인 해주세요.