Trang chủ » HTML và CSS » HTML » Hướng dẫn sử dụng thẻ nav trong HTML để tạo Menu

Hướng dẫn sử dụng thẻ nav trong HTML để tạo Menu

Có rất nhiều cách để tạo cho mình cái MENU website như ý. Nhưng để đơn giản hóa các bước thiết kế Menu nhanh gọn hơn thì tìm hiểu về thẻ NAV trong HTML cùng mình nhé!

Thẻ NAV trong HTML là gì?

Thẻ Nav trong html được sử dụng để định nghĩa danh mục liên kết (một tập hợp gồm các đường dẫn liên kết). Ví dụ như MENU trang chủ của website mình dưới đây:

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
    <ul id="menu-menu-top" class="menunav-menu" aria-expanded="false">
        <li> <a href="https://theanh.tech/php/">PHP</a> </li>
        <li> <a href="https://theanh.tech/html-va-css/">HTML và CSS</a> </li>
        <li> <a href="https://theanh.tech/js/">Javascript</a> </li>
    </ul>
</nav>

Trên đây là mẫu menu sử dụng thẻ nav trong website của mình. Trong đó còn chứa các sub-menu tức các menu con và ô tìm kiếm nhưng mình đã xóa bớt đi để cho các bạn đỡ rối mắt rồi. Với đoạn code trên thì màn hình sẽ hiển thị:

Thẻ Nav thì cũng có thẻ đóng thẻ mở (<nav></nav>) như các thẻ khác thôi vì vậy cấu trúc cũng rất dễ nhớ. 

Cách sử dụng thẻ Nav làm Menu 

Tuy thuộc vào các hiển thị Menu hoặc menu đặt ở đâu mà bạn lựa chọn custom, chỉnh sửa sao cho nó phù hợp với website của bạn. Nếu bạn sử dụng nó ở Footer (chân trang) chẳng hạn: thì bạn chỉ cần sử dụng đoạn code mình ví dụ trên và custom thêm màu sắc, khoảng cách là được rồi. Còn bạn muốn làm menu giống header (đầu trang) của mình thì xem hướng dẫn dưới đây nhé!

Làm menu header

Vẫn sử dụng đoạn code bên trên làm mẫu cho các bạn nhé. Nhưng mình sẽ xóa hết class và id, bạn tạo 1 file header.html và thêm đoạn code dưới đây vào nhé!

<!DOCTYPE html>
<html>
    <head>
        <title>Hướng dẫn làm menu với thẻ NAV bởi THEANHTECH</title>
    </head>
    <body>
        <div>
            <nav>
                <ul>
                    <li> <a href="https://theanh.tech/php/">PHP</a> </li>
                    <li> <a href="https://theanh.tech/html-va-css/">HTML và CSS</a> </li>
                    <li> <a href="https://theanh.tech/js/">Javascript</a> </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Tiếp theo là bạn custom thêm css cho nó để thành 1 khối hàng ngang. Thường menu header thường sẽ cùng 1 hàng. Đôi khi các trang sản phẩm sẽ để hàng dọc và có thêm sub-menu nữa. Nhưng hôm nay mình sẽ hướng dẫn các bạn làm Menu đơn giản nhất có thể, theo dõi tiếp nhé.

<style type="text/css">
	div nav ul li{
		display: inline-block;
	}
</style>

Căn chỉnh thêm chút màu sắc, khung hình cho nó đẹp nào!

<style type="text/css">
    div nav ul li{
    display: inline-block; /* Thuộc tính cho thẻ li thành 1 khối và cùng trên 1 hàng */
    border: 1px solid black; /* Thuộc tính sử dụng để làm bo viền bên ngoài */
    line-height: 1.3; 
    padding: 10px;
    margin: 0 3px;
    }
</style>

Kết quả hiển thị:

Kết quả hiển thị Menu
Kết quả hiển thị Menu

Đây là kết quả hiện thị mình custom trước tiếp trên Website vì vậy màu chữ cũng bị ảnh hưởng bởi css từ trước. Nên kết quả hiển thị của các bạn có 1 chút khác với mình thì không có sao cả, yên tâm nhé !

Tất cả code mình demo dưới đây:

<!DOCTYPE html>
<html>
    <head>
        <title>Hướng dẫn làm menu với thẻ NAV bởi THEANHTECH</title>
        <style type="text/css">
        	div nav ul li{
        		display: inline-block;
    			border: 1px solid black;
    			line-height: 1.3;
   			 	padding: 10px;
    			margin: 0 3px;
        	}
        </style>
    </head>
    <body>
        <div>
            <nav>
                <ul>
                    <li> <a href="https://theanh.tech/php/">PHP</a> </li>
                    <li> <a href="https://theanh.tech/html-va-css/">HTML và CSS</a> </li>
                    <li> <a href="https://theanh.tech/js/">Javascript</a> </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Cách làm menu cực kì đơn giản với Bootstrap

Nếu các bạn chưa biết bootstrap là gì? Hay đang băn khoăn không biết cách sử dụng của bootstrap thì xem bài viết này nhé: Bootstrap là gì? Hướng dẫn sử dụng bootstrap 4 đơn giản nhất

Vẫn là ví dụ trên nhé nhưng các bạn thêm cho mình thẻ link để thêm bootstrap vào. Nếu bạn nào muốn có thể tải Bootstrap về rồi thêm vào thay vì thêm trực tiếp link như mình:

<!DOCTYPE html>
<html>
    <head>
        <title>Hướng dẫn làm menu với thẻ NAV bởi THEANHTECH</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </head>
    <body>
        <div>
            <nav>
                <ul>
                    <li> <a href="https://theanh.tech/php/">PHP</a> </li>
                    <li> <a href="https://theanh.tech/html-va-css/">HTML và CSS</a> </li>
                    <li> <a href="https://theanh.tech/js/">Javascript</a> </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Với bootstrap thì mọi chuyện dễ dàng hơn nhiều. Bạn chỉ cần sử dụng class cho các thẻ thành phần là bạn có thể có những menu đẹp như ý.

<!DOCTYPE html>
<html>
    <head>
        <title>Hướng dẫn làm menu với thẻ NAV bởi THEANHTECH</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    </head>
    <body>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <ul class="navbar-nav" style="list-style: none;" >
                    <li class="nav-item active"> <a class="nav-link" href="https://theanh.tech/php/">PHP</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="https://theanh.tech/html-va-css/">HTML và CSS</a> </li>
                    <li class="nav-item"> <a class="nav-link" href="https://theanh.tech/js/">Javascript</a> </li>
                </ul>
            </nav>
        </div>
    </body>
</html>

Kết quả hiển thị:

 

 

Có phải các bạn đang nghĩ: “Vậy lấy các class này ở đâu?” hoặc “Làm sao mà biết các class này để thêm vào?”. Đúng vậy, để biết sử dụng chi tiết và rất rất nhiều kiểu custom hay và đẹp hơn nữa thì bạn vào thẳng document của bootstrap nhé. Với thẻ nav thì các bạn tham khảo tại đây: https://getbootstrap.com/docs/4.5/components/navbar/

Cảm ơn các bạn rất nhiều đã theo dõi bài viết đến đây. Có những thắc mắc hay câu hỏi gì về thẻ nav trong html thì các bạn comment xuống đây hoặc đưa những câu hỏi về mail hỗ trợ để mình biết nhé <3

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *