qc
Chào các bạn, vài ngày trước có bạn comment hỏi về thanh menu bên trái blog của mình và cách để làm. Vì thế hôm nay mình sẽ hướng dẫn cách làm menu như mình.

Hiện nay có rất nhiều cách tạo menu dọc, ngang cho blog nhưng đa số đều có sự tham gia của js làm ảnh hưởng 1 phần rất nhỏ đến tốc độ tải của trang. Phần nhỏ cũng không đáng kể nhưng đối với những người muốn có tốc độ load trang tuyệt đối thì chẳng thích tí nào,

Vì thế sau đây mình sẽ hướng dẫn cho các bạn cách làm menu bằng HTML và CSS mà không ảnh hưởng đến tốc độ load trang.

Menu dọc đa tầng load nhanh với html cho blogspot, blogger

Chúng ta cùng bắt đầu nhé:

Đầu tiên các bạn vào chỉnh sửa HTML cho blog của mình, tìm thể ]]>< và copy toàn bộ code vừa chọn lên trên thẻ vừa tìm:

.navbox>ul>li>ul>li:hover>ul{display:block}
.leftbar{width:15.9%;margin-left:20px;float:left}
.navbox.sidenav>ul>li{margin-bottom:20px}
.navbox.sidenav>ul>li>a,.navbox.sidenav>ul>li.active>a{font-size:17px;border-left:3px solid #ed2e2e;font-weight:bold;background:#f5f5f5;color:#ed2e2e;text-transform:uppercase}
.navbox li a{ color: #333;font-weight:500;display:block;position:relative;min-height:38px;border-bottom:1px solid #eee;line-height:38px}
.navbox.sidenav>ul>li>a>img{-moz-filter:brightness(0) invert(1);-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);left:10px}
.navbox li a img{padding-left:10px;width:20px;height:20px;position:absolute;top:9px;left:0}
.navbox>ul>li>ul>li{position:relative}
.navbox.sidenav>ul>li>ul>li>a{ color: #333;white-space:nowrap;padding-right:13px;overflow:hidden;text-overflow:ellipsis}
.navbox li a{display:block;position:relative;padding-left:10px;min-height:38px;border-bottom:1px solid #eee;line-height:38px}
.navbox>ul>li>ul>li.hassub>a:after{content:"";position:absolute;top:15px;right:5px;width:0;height:0;border:4px solid transparent;border-left:4px solid #d8d8d8}
.navbox>ul>li>ul>li:hover>a{color:#ff4500}
.navbox>ul>li>ul>li>ul>li a:hover{color:#ff4500}
.navbox>ul>li>ul>li>ul{z-index:9;display:none;position:absolute;left:200px;top:-10px;min-width:200px;background:#fff;border:1px solid #eee;white-space:nowrap;padding:10px;border-radius:5px}

Sau đó các bạn đến nơi muốn hiển thị menu và copy toàn bộ code dưới vào:

<ul>
<li class="vanthangit hassub">
<a href="#">
<i aria-hidden="true" class="fa fa-facebook" style="color:#3b5998; font-size: 20px;"></i>
Facebook
</a>
<ul>
<li>
<a href="#">
Ảnh bìa Facebook
</a>
</li>
<li>
<a href="#">
Chứng minh thư
</a>
</li>
<li>
<a href="#">
Thủ thuật Facebook
</a>
</li>
<li>
<a href="#">
Icon Chat
</a>
</li>
<li>
<a href="#">
Bảo mật Facebook
</a>
</li>
<li>
<a href="/">
Tổng Hợp Rip Facebook
</a>
</li>
</ul>
</li>
</ul>

Bước cuối cùng là các bạn chỉ cần lưu lại và vào trang blog mình kiểm tra thôi.
Chúc các bạn thành công. Share nếu thấy hay.
qc
- - 0 bình luận
CHUYÊN MỤC

HIỆN TẠI CÓ 0 BÌNH LUẬN

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé