Tạo thanh menu thả xuống cho blog

Tạo thanh menu thả xuống cho blog thực sự quan trọng với mỗi website. Thanh này có nhiệm vụ giúp người dùng điều hướng một cách dễ dàng từ chuyên mục này sang chuyên mục khác, từ bài viết này sang bài viết khác. Ngoài chức năng điều hướng website, thanh Navbar còn giữ vai trò tăng thêm tính thẩm mỹ cho website và làm cho website thêm chuyên nghiệp hơn.

Để tạo thanh Navbar thêm chuyên nghiệp hơn, yêu cầu chúng ta nên xác định rõ ràng nội dung của website trước khi tạo. Phân cấp rõ ràng từng chuyên mục cụ thể, mỗi chuyên mục nên có ít nhất từ 3 đến 4 bài viết và được sắp xếp thứ tự tùy theo từng nội dung, giúp người đọc dễ dàng đi đến chuyên mục họ cần mà không cần phải vòng vo tìm kiếm. Dưới đây là hướng dẫn cơ bản để tạo một thanh navbar đơn giản.

1. Tạo chuyên mục chính và các chuyên mục con trên thanh Navbar

Tùy theo từng nội dung website mà có thiết kế các chuyên mục thích hợp trên thanh navbar, các chuyên mục này khi người dùng rê chuột vào sẽ hiện ra các chuyên mục con trong đó. Và mỗi chuyên mục con đều chứa một số lượng bài viết thích hợp. Như hình ảnh ở trên thì chuyên mục chính là Mẹo Blogger và các chuyên mục con bao gồm: Tăng tốc, nội dung, Page/backlink. Cú pháp để tạo thanh navbar này là

<li>
<a href='#'> Mẹo blogger </a>
<ul class = 'con'> 
<li> <a href='#'> Tăng tốc </a> </ li>
<li> <a href='#'> Nội dung </a> </ li>
<li> <a trang href='#'> rank / backlinks </a> </ li>
</ ul> 
</ li>

Ở mã phía trên, cặp thẻ <li></li> để tạo ra toàn bộ chuyên mục Mẹo Blogger. Cặp thẻ <ul class='children'></ul> là để xây dựng các chuyên mục con chứa trong chuyên mục chính. Còn lại các phần tử nằm trong cặp thẻ <li></li> là tên của các chuyên mục con và # là đường link chứa nhãn bài viết của chuyên chuyên mục con đó. Các chuyên mục con này được gọi là chuyên mục cấp 2.

                                        Đọc thêm: Cách tạo trang Sitemap cho blog

2. Tạo các chuyên mục con của chuyên mục cấp 2 (chuyên mục cấp 3)

Nếu như nội dung web site quá lớn, và mỗi chuyên mục con cần được phân cấp rõ ràng hơn nữa giúp người dùng có thể dễ dàng đi đến bài viết ưa thích một cách nhanh chóng. Càng phân cấp rõ ràng thì điều hướng người dùng càng dễ và làm tăng mức độ trãi nghiệm người dùng và chuyên nghiệp hóa website. Cú pháp để thêm chuyên mục con của chuyên mục cấp 2 là:

<li>
<a href='#'> Mẹo blogger </a>
<ul class = 'con'>
<li> <a href='#'> Tăng tốc </a> </ li>
<ul class = 'con'> 
<li> <a href='#'> Tăng tốc 1 </a> </ li> 
<li> <a href='#'> Tăng tốc 2 </a> </ li> 
<li> <a href='#'> Tăng tốc 3 </a> </ li> 
</ ul> 
</ ul> 
</ li>

Tương tự như cú pháp trên, ở cú pháp tạo chuyên mục cấp 3 chúng ta dễ dàng thêm một thẻ <ul class='children'> phía dưới chuyên mục cấp 2 để xây dựng thêm nội dung các chuyên mục con của nó. Những điểm tô màu giống nhau là thẻ đóng tương ứng cho chuyên mục đó.

Trên đây là hướng dẫn đơn giản để tạo thanh menu Navbar điều hướng website. Mỗi website nên tạo một thanh điều hướng riêng tùy theo nội dung, cấu trúc giao diện mà nên tạo các thanh để phù hợp hơn, không nên rập khuôn theo một cách làm sẽ không phù hợp với từng giao diện và đôi lúc còn gây khó khăn cho người dùng.

                        Đọc thêm:     Cách tạo Robots.txt theo chuẩn của Google

                                              Cách tạo Template Blogger Responsive đơn giản