Menu Mobi - CSS+JS

 

**** HTML

$data = admin_catalog_module_data($xmid);

echo'<div class="catelog-list">';

    foreach ($data as $key => $value) {

        $title = $value["title"];

        $mid = $value["mid"];

        echo'<div class="catelog-item-more-wrap">

            <h2 class="catelog-item">

                <a href="javascript:void(0)"><i class="fa fa-angle-down" aria-hidden="true"></i>'.$title.'</a>

            </h2>';

            $data2 = admin_catalog_module_data($mid);

            foreach ($data2 as $key => $value2) {

                $title2 = $value2["title"];

                $mid2   = $value2["mid"];

                $link2  = "link_den_nhomsp";

                echo'<div class="catelog-item-more">

                    <h3 class="catelog-item">

                        <a href="'.$link2.'">'.$title2.'</a>

                    </h3>

                </div>';

            }    

        echo'</div>';

    }

echo'</div>';

**** CSS

.catelog-list .catelog-item {

    position: relative;

    border-bottom: 1px solid #dae0e5;

    font-size: 1.9rem;

    font-weight: normal;

    margin: 0;

    padding: 20px 0;

    margin-left: 1.75rem;

}

.catelog-list .catelog-item a {

    display: inline-block;

    color: #222;

    width: 100%;

    height: 100%;

    padding-right: 2.25rem;

    color: rgba(34, 34, 34, .9);

    box-sizing: border-box;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    /* font-size: 14px; */

}

.catelog-list .catelog-item a:active,

.catelog-list .catelog-item a:focus{

    text-decoration: none;

}

.catelog-list .catelog-item i {

    margin: 0;

    position: absolute;

    right: 0;

    color: #b3b3b3;

    font-size: .9rem;

    font-size: 2.5rem;

    padding: 0 1.75rem;

}

.Hotcat {

    font-size: 2em;

    margin-left: 1.75rem;

}

.catelog-list .catelog-more {

    background-color: #edf0f2;

}

.catelog-list .catelog-item-more {

    display: none;

}

.catelog-list .catelog-more .catelog-item-more {

    display: block;

}

.main-container.padd0 {

    padding: 0;

}

**** JS

<script>

$(document).ready(function(){

    $('.catelog-item-more-wrap > h2').click(function(e){

        e.stopPropagation();

        let parent = $(this).parent();

        // Nếu đang mở → đóng lại

        if(parent.hasClass('catelog-more')){

            parent.removeClass('catelog-more');

            parent.find('i').removeClass('fa-angle-up').addClass('fa-angle-down');

        } 

        // Nếu đang đóng → mở và đóng cái khác

        else {

            $('.catelog-item-more-wrap')

                .removeClass('catelog-more')

                .find('i')

                .removeClass('fa-angle-up')

                .addClass('fa-angle-down');

            parent.addClass('catelog-more');

            $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');

        }

    });

});

</script>