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.

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.