수고하십니다.
쥬노님의 최신글을 다운받아 사용중인데요.
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개로 지어서
에이작스 단에서 클래스를 클릭하면 조건에 맞게 받아와서 그 갯수에 맞게 뿌려주는 방법으로 해야될것같아요
답변을 작성하려면 로그인이 필요합니다.