Khuyễn mãi giảm 30% theme code nhân dịp Xuân Quý Mão 2023 17/01 - 27/01

Hướng dẫn sử dụng tiện ích LinkList tạo Menu đa cấp cho blogspot

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.

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.
Hướng dẫn sử dụng tiện ích LinkList tạo Menu đa cấp cho blogspot
Và khi chạy trên trình duyệt sẽ hiển thị như dưới

Dùng tiện ích LinkList để tạo Menu
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

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

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.



Vui lòng đọc kỹ Chính sách mua theme bên chúng tôi để nắm rõ hơn về hỗ trợ, bảo hành, bản quyền và thanh toán bên chúng tôi anh/chị nhé.

Xem thêm
Giá bán: blog
Không mã hóa code Giao toàn bộ mã nguồn Hỗ trợ cài đặt và chỉnh sửa Nâng cấp template miễn phí khi có bản mới Bảo hành sử dụng Cam kết hỗ trợ setup đầy đủ như demo 100%, hỗ trợ ultraview/teamview ngay khi khách cần (hot)
Mua ngay
Cập nhật ngày: Đăng ngày: Loại file: ZIP Hướng dẫn sử dụng: Hỗ trợ cài đặt:
Tags: template

Comments

Hướng dẫn sử dụng tiện ích LinkList tạo Menu đa cấp cho blogspot

Cập nhật ngày Bởi
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.
Hướng dẫn sử dụng tiện ích LinkList tạo Menu đa cấp cho blogspot
Và khi chạy trên trình duyệt sẽ hiển thị như dưới

Dùng tiện ích LinkList để tạo Menu
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

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

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.

Comments

Call
0948713329
Contact Me on Zalo