Navigation bar, hay còn gọi là thanh điều hướng, là một phần quan trọng của một trang web. Nó giúp người dùng dễ dàng điều hướng giữa các trang và phân loại nội dung. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo navigation bar trong CSS với mã mẫu và ví dụ minh họa.

1. Navigation Bar trong CSS là gì? Tại sao sử dụng Navigation Bar?

Navigation Bar, hay thanh điều hướng, là một thành phần trực quan quan trọng trên một trang web, thường xuất hiện ở phía trên hoặc bên dưới đầu trang. Nó bao gồm một tập hợp các liên kết hoặc các mục menu, giúp người dùng dễ dàng di chuyển giữa các trang và phân loại nội dung trên trang web đó.

Lý do quan trọng trong việc cần thiết sử dụng Navigation Bar là:

  • Dễ dàng điều hướng: Navigation Bar giúp người dùng dễ dàng tìm kiếm và truy cập vào các trang quan trọng của trang web. Thay vì phải quay lại trang chủ hoặc sử dụng các phím tắt duyệt web, họ có thể trực tiếp chọn từ menu thanh điều hướng.
  • Tăng trải nghiệm người dùng: Khi một trang web có một Navigation Bar rõ ràng và dễ sử dụng, điều này giúp cải thiện trải nghiệm người dùng. Người dùng không cần phải mất nhiều thời gian để tìm kiếm thông tin hoặc trang cần thiết, từ đó tạo ra sự hài lòng và tăng khả năng quay lại trang web.
  • Phân loại nội dung: Navigation Bar thường được tổ chức thành các mục như Trang Chủ, Giới Thiệu, Dịch Vụ, Sản Phẩm, Liên Hệ, và nhiều hơn nữa. Điều này giúp người dùng hiểu được cấu trúc và nội dung của trang web một cách logic và rõ ràng.
  • Tăng khả năng tương tác: Navigation Bar cũng có thể được sử dụng để thúc đẩy tương tác của người dùng với trang web. Bằng cách chứa các liên kết đến trang quan trọng hoặc các chức năng như tìm kiếm, đăng nhập, hoặc giỏ hàng, Navigation Bar có thể tạo ra các điểm tiếp cận và tương tác dễ dàng cho người dùng.
  • Tạo điểm nhấn thiết kế: Một Navigation Bar được thiết kế tốt không chỉ là một phần của chức năng, mà còn là một yếu tố thẩm mỹ quan trọng của trang web. Bằng cách áp dụng các hiệu ứng hoặc thiết kế sáng tạo, Navigation Bar có thể tạo ra một điểm nhấn thu hút sự chú ý của người dùng và tạo nên ấn tượng đầu tiên mạnh mẽ.

Navigation Bar là một phần không thể thiếu của một trang web hiệu quả, việc sử dụng Navigation Bar giúp cải thiện trải nghiệm người dùng, tăng khả năng tương tác, và tạo điểm nhấn về thiết kế quan trọng.

>>>>> Xem thêm bài viết tương tự:

 

2. Navigation Bar cơ bản trong CSS

Chúng ta có rất nhiều cách để tạo Navigation Bar trong CSS. Nhưng, cách đơn giản nhất, cũng như chuẩn SEO nhất đó là sử dụng thẻ <ul> và <li>, chúng ta cùng xem ví dụ sau đây:

<style>
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
</style>
<nav>
    <ul>
        <li>
            <a href="javascript:void(0)">Menu 1</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 2</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 3</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 4</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 5</a>
          </li>
    </ul>
</nav>

Trong ví dụ trên chúng ta đã sử dụng thẻ <ul> và <li> để tạo ra một Navigation Bar cơ bản nhất. Đồng thời, chúng ta sử dụng thêm một số CSS như margin: 0; padding: 0; để loại các cài đặt lề mặc định của trình duyệt, list-style-type: none; để có thể loại bỏ dấu danh mục của thẻ <li> vì với Navigation Bar chúng ta không cần dấu này. Chúng ta cùng xem kết quả 

3. Navigation Bar trong CSS theo chiều dọc

  • Tạo kiểu đơn giản cho Navigation Bar
<style>
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    ul li a {
        width: 100px;
        text-decoration: none;
        color: #FFF;
        background-color: #FF4954;
        display: block;
        padding: 10px 10px;
    }
    
    ul li a:hover {
        font-weight: bold;
        background-color: #a9111a;
    }
</style>
<nav>
    <ul>
        <li>
            <a href="javascript:void(0)">Menu 1</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 2</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 3</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 4</a>
          </li>
        <li>
            <a href="javascript:void(0)">Menu 5</a>
          </li>
    </ul>
</nav>

Bằng cách trên chúng ta đã có thể tạo ra một thanh điều hướng đơn giản bao gồm màu nền, cũng như là hiệu ứng thay khi người dùng hover chuột vào. Ở ví dụ trên, chúng ta đã sử dụng display: block để có thể tạo khối cho thẻ <a> thông qua đó, chúng ta có thể click chuột vào bất kỳ vị trí nào của phần tử thay vì chỉ click vào văn bản của thẻ <a>

  • Tạo kiểu cho phần tử Navigation Bar đang active

Để tạo style cho phần tử đang active chúng ta có thể thể class .active vào phần tử Navigation Bar như sau:

ul li a:hover, ul li a.active {
    font-weight: bold;
    background-color: #a9111a;
}
<a class="active" href="javascript:void(0)">Menu 1</a>
  • Ví dụ cho Navigation Bar đầy đủ
<style>
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    ul li:not(:last-child) a {
        border-bottom: 1px solid #FFF;
    }
    
    ul li a {
        text-decoration: none;
        color: #FFF;
        background-color: #FF4954;
        display: block;
        padding: 10px 10px;
    }
    
    ul li a:hover, ul li a.active {
        font-weight: bold;
        background-color: #a9111a;
    }
</style>
<div style="height: 300px; overflow: auto">
    <div style="display: flex; overflow: auto">
        <div style="width: 100px; height: 300px; background-color: #FF4954; position: fixed">
            <nav>
                <ul>
                    <li>
                        <a class="active" href="javascript:void(0)">Menu 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 2</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 3</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 4</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 5</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div style="margin-left: 130px;">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius?
            Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi!...
        </div>
    </div>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi!

4. Navigation Bar trong CSS theo chiều ngang

Tương tự, để tạo Navigation Bar theo chiều ngang chúng ta có rất nhiều cách như: display: inline, float: left. Nhưng, trong bài này chúng ta sẽ cùng nhau tìm hiểu cách sử dụng display: flex để có thể tạo ra Navigation Bar theo chiều ngang như sau:

<style>
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
    }
    
    ul li:not(:last-child) a {
        border-right: 1px solid #FFF;
    }
    
    ul li a {
        text-decoration: none;
        color: #FFF;
        background-color: #FF4954;
        display: block;
        padding: 10px 20px;
    }
    
    ul li a:hover, ul li a.active {
        font-weight: bold;
        background-color: #a9111a;
    }
</style>
<div style="height: 300px; overflow: auto">
    <div style="overflow: auto">
        <div style="width: 100%; position:sticky; background-color: #FF4954;">
            <nav>
                <ul>
                    <li>
                        <a class="active" href="javascript:void(0)">Menu 1</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 2</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 3</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 4</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">Menu 5</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div style="margin-top: 40px;">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius?
            Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi!...
        </div>
    </div>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit, soluta ut similique minus, qui quo, pariatur tempora fuga aperiam ea veniam ad dolor porro saepe magni aspernatur voluptatum? Temporibus, eius? Provident laborum possimus, iusto ipsum aspernatur tempore laudantium accusantium tempora mollitia voluptatem officiis, illum eaque nisi exercitationem perspiciatis, omnis adipisci sunt corrupti sed ipsa? Quas voluptatibus fugiat mollitia harum sequi!

Tổng kết

Navigation bar là một phần quan trọng của một trang web, giúp người dùng dễ dàng điều hướng trên trang web của bạn. Bằng cách sử dụng CSS, bạn có thể tạo ra các navigation bar đẹp mắt và chuyên nghiệp. Hy vọng rằng với hướng dẫn trên các bạn có thể thử tạo navigation bar của riêng mình và cải thiện trải nghiệm người dùng trên trang web của mình ngay hôm nay!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Banner bottom