Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Rất nhiều blogger tên tuổi đã hướng dẫn làm thanh menu đa cấp (multilevel menu bar) tuy nhiên trong bài viết này HHV vẫn hướng dẫn cách làm từng bước một thanh menu bar đơn giản với HTML và CSS3. Đây không phải là một hướng dẫn xơi ngay kiểu “mì ăn liền” mà là giúp các bạn hiểu quy trình để làm ra một thanh menu bar như thế nào.
Khi đã hiểu rõ bạn hoàn toàn có thể tùy biến theo ý thích của mình, đổi màu, thêm background, thêm hiệu ứng hover. và nhiều thứ khác nữa… Bài viết hơi dài tuy nhiên để thư giãn mời bạn ghé thăm trang demo trước khi bắt tay vào việc.
1. Tạo một trang HTML5 với một menu list
a. Tạo một trang HTML5
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>
Đây là cấu trúc cơ bản của một trang HTML5, trong đó phần code CSS mình sẽ chèn giữ thẻ
<head> và code html mình chèn giữa thẻ <body>b. Tạo một menu list.
Bản chất của một thanh menu là tập hợp những đường link được sắp xếp theo trình tự. Một thanh menu chính là một danh sách các đường link được trang trí và trình bày lại theo hàng ngang. Để dễ trang trí ta dùng các thẻ id (main_menu) và class (top_menu)
Danh sách cấp 1 của menu
<ul id="main_menu"> <li class="top_menu"> <a href="#">Design</a> </li> <li class="top_menu"> <a href="#">Tutorials</a> </li> <li class="top_menu"> <a href="#">Coding</a> </li> <li class="top_menu"> <a href="#">Blogger</a> </li> <li class="top_menu"> <a href="#">General</a> </li> </ul>
Chú ý các thẻ
<ul> <li> và <a> với thuộc tính href chúng được sắp xếp lặp lại. Bạn có thể thay thế phần anchor text và các đường link theo ý thích.
Bây giờ phải thêm phần danh sách cấp 2 của menu. Ta lai dùng cấu trúc thẻ các
<ul> <li> và<a>
Đăng nhận xét