1. Chào mừng Khách tham gia cộng đồng Android Việt Nam

topbigslide

Collapse Category for xenforo - hiệu ứng thu gọn Category

Hiệu ứng phóng to thu nhỏ thanh categoryText xenforo

  1. King
    Hiệu ứng phóng to thu nhỏ, ẩn hiện thanh categoryText xenforo khi click vào. Hiệu ứng đàn hồi đẹp mắt.
    demo tại Congngheaz.com
    [​IMG]

    Đầu tiên các bạn vào template node_category_level_1 tìm
    <h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
    Thêm vào bên dưới đó code
    <span class="category_toggle_container">
                    <
    class="toggle_arrow brToggle Tooltip">Collapse Category</a>
                </
    span>
    Sau đó bạn vào template Extra.css thêm code sau vào cuối
    .nodeList .category .category_toggle_container {
        
    box-sizingborder-box;
        
    displayblock;
        
    floatright;
        
    height37px;
        
    padding-right11px;
        
    padding-top12px;
        
    positionabsolute;
        
    right0;
        
    top0;
        
    width37px;
    }
    .
    nodeList .category .category_toggle_container a.toggle_arrow {
        
    backgroundurl("http://congngheaz.com/styles/xenforo/cnaz-images.png"no-repeat scroll center -180px rgba(0000);
        
    floatright;
        
    height13px;
        
    text-indent: -9999px;
        
    width13px;
    }
    Tiếp theo bạn vào tempalte forum_list thêm vào cuối code sau
    <script>
        $(
    document).ready(function(){
            $(
    '.brToggle').click(function(){
                
    $container = $(this).closest('.node.level_1');
                
    $nodeList $container.find('.nodeList');
                if(!
    $nodeList.hasClass('collapse')){
                    $(
    this).addClass('collapse');
                    
    $nodeList.addClass('collapse');
                    
    $nodeList.stop(true,true).slideUp(1000'easeOutBounce');
                }else{
                    $(
    this).removeClass('collapse');
                    
    $nodeList.removeClass('collapse');
                    
    $nodeList.stop(true,true).slideDown(1000'easeOutBounce');
                }
            });
        });
    </script>
    Tận hưởng thành quả nhé. tiếc gì 1 like hen

Bạn đang xem Zing.vn Mobile trên màn hình máy tính hoặc thiết bị trình chiếu mà giao diện này không hỗ trợ.

Chuyển về giao diện đầy đủ