Sử dụng tiện ích LinkList tạo Menu đa cấp

Hướng dẫn các bạn sử dụng tiện ích Danh sách liên kết LinkList để tạo thanh menu có 3 cấp, sử dụng dấu _ để tạo menu con.

Và khi chạy trên trình duyệt sẽ hiển thị như dưới

Các bước thực hiện như sau:

Đầu tiên bạn phải thêm 1 thẻ <b:section> như dưới

<b:section id='main-menu' maxwidgets='1' name='Menu' showaddelement='yes'>

</b:section>

Sau đó bạn vô bố cục tìm nó và thêm tiện ích danh sách liên kết và nhập các thông tin của menu như hình trên.

Tiếp theo bạn cần viết code xử lý như sau:

<script>

    //<![CDATA[

    $('#main-menu').each(function() {

        var iTms = $(this).find('.LinkList ul > li').children('a'),

            iLen = iTms.length;

        $('#main-menu ul').addClass('menu');

        for (var i = 0; i < iLen; i++) {

            var i1 = iTms.eq(i),

                t1 = i1.text();

            if (t1.charAt(0) !== '_') {

                var i2 = iTms.eq(i + 1),

                    t2 = i2.text();

                if (t2.charAt(0) === '_') {

                    var l1 = i1.parent();

                    l1.append('<ul class="sub-menu m-sub"/>');

                }

            }

            if (t1.charAt(0) === '_') {

                i1.text(t1.replace('_', ''));

                i1.parent().appendTo(l1.children('.sub-menu'));

            }

        }

        for (var i = 0; i < iLen; i++) {

            var i3 = iTms.eq(i),

                t3 = i3.text();

            if (t3.charAt(0) !== '_') {

                var i4 = iTms.eq(i + 1),

                    t4 = i4.text();

                if (t4.charAt(0) === '_') {

                    var l2 = i3.parent();

                    l2.append('<ul class="sub-menu2 m-sub"/>');

                }

            }

            if (t3.charAt(0) === '_') {

                i3.text(t3.replace('_', ''));

                i3.parent().appendTo(l2.children('.sub-menu2'));

            }

        }

        $('#main-menu ul li ul').parent('li').addClass('has-sub');

    })

    //]]>

</script>

Như vậy thì các menu và menu con đã được xử lý.

Bây giờ mình thêm một chút CSS cho dễ nhìn.

Thêm thư viện Font icon

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' integrity='sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==' rel='stylesheet'/>

Thêm CSS trong thẻ <b:skin> các bạn lưu lại và kiểm tra kết quả.

.menu a{width:100%}

.menu::after{content:'';clear:both;display:block}

.menu a{display:block;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box;text-decoration:none;font-size:20px}

.menu li{position:relative}

.menu > li{float:left}

.menu,.menu ul{display:inline-block;padding:0;margin:0;list-style-type:none;background:gold}

.menu ul li+li{border-top:1px solid #fff}

.menu ul{position:absolute;box-shadow:5px 5px 10px 0 rgba(0,0,0,0.5)}

.menu > li ul,.menu ul ul{opacity:0;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;transition:all 0.2s ease-in;z-index:-1;visibility:hidden}

.menu > li ul{top:130%;left:0}

.menu ul ul{left:130%;top:0}

.menu ul a{width:250px}

.menu > li:hover > ul{top:100%;opacity:1;z-index:1;visibility:visible}

.menu ul > li:hover > ul{left:100%;opacity:1;z-index:1;visibility:visible}

.menu-gold,.menu-gold a{color:#000}

.menu-gold a:hover{background-color:#e6c300;color:#000}

#main-menu ul > li.has-sub > a:after{content:'\f078';float:right;font-family:'Font Awesome 5 Free';font-size:9px;font-weight:900;margin:8px 0 0 5px}

Kết quả chúng ta được

Như vậy là mình đã hướng dẫn sử dụng tiện ích danh sách liên kết để tạo menu đa cấp, giúp bạn thiết kế menu trong quá trình làm giao diện blogspot.

Bài viết: Sử dụng tiện ích LinkList tạo Menu đa cấp được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog