게시판 카테고리 탭 형식으로 만들기 > 시즌3 팁 & 테크

"이윰"님께서 올려주신 카테고리 탭 형식으로 보여주기를 어줍짢은 실력으로 css를 포함 수정해 보았습니다.


- 게시판 목록 최상단에 위 이미지와 같이 카테고리가 보여지게 됩니다. -

각 게시판 스킨 폴더 list.skin.html을 열어 <!--{* 게시판 카테고리 시작 *}--> 을 찾고 다음 소스을 수정합니다.

수정 전

    <!--{* 게시판 카테고리 시작 *}-->
    <!--{?_is_category}-->
    <script>
    // 카테고리 이동
    function category_view(sca) {
        if(sca)    var url = "{_category_href}&sca="+sca;
        else var url = "{_category_href}";
        $(location).attr('href',url);
        return false;
    }
    </script>
    <nav>
        <h5><strong class="color-red">{board.bo_subject}</strong> 카테고리</h5>
        <div class="row col-sm-4">
            <select name="ca_name" id="ca_name" required class="form-control" onchange="return category_view(this.value);">
                <option value="">전체</option>
                <!--{@ _bocate}-->
                <option value="{.ca_sca}" {? _decode_sca == .ca_name}selected{/}>{.ca_name}</option>
                <!--{/}-->
            </select>
        </div>
        <div class="clearfix"></div>
    </nav>
    <div class="margin-hr-10"></div>
    <!--{/}-->
    <!--{* 게시판 카테고리 끝 *}-->

    <!--{* 게시판 카테고리 시작 *}-->
    <!--{?_is_category}-->
    <div class="tab-cart">
    <div class="margin-hr-10"></div>
        <div class="row col-sm-12">
            <ul class="nav nav-tabs">
                <li class="{?!_decode_sca}active{/}">
                    <a href="{_category_href}">전체</a>
                </li>
                <!--{@ _bocate}-->
                <li class="{? _decode_sca == .ca_name}active{/}">
                    <a href="{_category_href}&sca={.ca_sca}">{.ca_name}</a>
                </li>
                <!--{/}-->
            </ul>
        </div>
    </div>    
    <div class="clearfix"></div>
    
    <div class="margin-hr-10"></div>
    
    <!--{/}-->
    <!--{* 게시판 카테고리 끝 *}-->

/*Tabs Cart*/
.tab-cart .nav-tabs {
    border: none;
    background: none;
}
.tab-cart .nav-tabs a {
    font-size: 14px;
    padding: 5px 13px;
}
.tab-cart .nav-tabs > .active > a,
.tab-cart .nav-tabs > .active > a:hover,
.tab-cart .nav-tabs > .active > a:focus {
    color: #fff;
    border: none;
    background: #e33334;
}
.tab-cart .nav-tabs > li > a {
    border: none;
}
.tab-cart .nav-tabs > li > a:hover {
    color: #fff;
    background: #e33334;
}
.tab-cart .tab-content {
    padding: 10px 0;
}
.tab-cart .tab-content img {
    margin-top: 4px;
    margin-bottom: 15px;
}
.tab-cart .tab-content img.img-tab-space {
    margin-top: 7px;
}

추가적으로 게시판 리스트 목록 제목 앞에 카테고리를 표시하지 않는 방법입니다.

수정 전

<!--{? _is_category && .ca_name}-->
<a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a>&nbsp;

<!--{? _is_category && .ca_name}-->
<!-- <a href="{.ca_name_href}" class="btn btn-e-xs btn-default">{.ca_name}</a>&nbsp; -->