KH_WEB_CB_2026_01

KH_DSA_C_2026_01

KH_TT_CB_2026_01

KH_OOP_C_SHARP_2026_01
KH_WEB_CB_2026_01

🌈 Xây dựng UI – Navigation 🧭✨

bởi Phạm Xuân Hoài - 11 tháng 2, 2026

🌈 Xây dựng UI – Navigation 🧭✨

🧭 Sơ đồ học UI

UI – Thanh Menu Website
 ├── Phần 1 – Khung Menu Tổng
 │     ├── Level 1: HTML
 │     ├── Level 2: CSS
 │     └── Level 3: Trang trí
 │
 ├── Phần 2 – Logo
 │     ├── Level 1: HTML
 │     ├── Level 2: CSS
 │     └── Level 3: Trang trí
 │
 ├── Phần 3 – Menu Chữ
 │     ├── Level 1: HTML
 │     ├── Level 2: CSS
 │     └── Level 3: Trang trí
 │
 └── Phần 4 – Nút Đăng Nhập + Icon
       ├── Level 1: HTML
       ├── Level 2: CSS
       └── Level 3: Trang trí

🧱 PHẦN 1 — KHUNG MENU TỔNG

🥚 Level 1 — HTML

<section class="navigation"></section>

Đây là hộp lớn nhất chứa toàn bộ thanh menu.

Hiểu đơn giản:

👉 Giống cái bàn dài để đặt:

  • Logo
  • Menu chữ
  • Nút đăng nhập

🎨 Level 2 — CSS

.navigation {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

Giải thích dễ hiểu:

Thuộc tínhÝ nghĩa
width 100%Rộng hết màn hình
max-widthKhông quá 1024px
margin autoCanh giữa
flexXếp ngang
space-betweenDãn cách đều
align-centerCanh giữa dọc
wrapHết chỗ xuống dòng

✨ Level 3 — Trang trí

Chưa cần trang trí, có thể tạo khung border để căn chỉnh

/* border: 1px solid #ccc; */

🖼️ PHẦN 2 — LOGO

🥚 Level 1 — HTML

<img src="https://placehold.co/190x50" alt="Logo" />

Đây là hình logo website.

Hiểu như:

👉 Bảng hiệu cửa hàng 🏪

🎨 Level 2 — CSS

.navigation img {
    width: 190px;
    height: 50px;
    aspect-ratio: 19 / 5;
    object-fit: cover;
}

Ý nghĩa:

  • Luôn giữ size 190×50
  • Không bị méo hình

✨ Level 3 — Trang trí

Logo đang để vuông góc — chưa bo góc, chưa đổ bóng.

📚 PHẦN 3 — MENU CHỮ

🥚 Level 1 — HTML

<div class="menus">
    <div class="active">Trang Chủ</div>
    <div>Khóa Học</div>
    <div>Dự Án</div>
    <div>Tài Nguyên</div>
    <div>Đánh Giá</div>
    <div>Liên Hệ</div>
</div>

Đây là các nút chuyển trang.

Giống menu game 🎮 hoặc menu app 📱

🎨 Level 2 — CSS

.navigation .menus {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding-left: 50px;
    flex: 1;
    flex-wrap: wrap;
}

Giải thích:

Thuộc tínhDễ hiểu
flexXếp ngang
gapKhoảng cách chữ
padding-leftThụt vào
flex:1Chiếm khoảng trống
wrapHết chỗ xuống dòng

Chữ không bị bể dòng

white-space: nowrap;

Nếu không có:

Tài
Nguyên

Có rồi:

Tài Nguyên

✨ Level 3 — Trang trí

Menu đang chọn:

.navigation .menus div.active {
    color: rgb(27, 179, 179);
}

👉 Đổi màu để biết đang ở trang nào.

🔐 PHẦN 4 — NÚT ĐĂNG NHẬP + ICON

🥚 Level 1 — HTML

<button><i class="fa fa-sign-in" aria-hidden="true"></i> Đăng Nhập</button>

Gồm:

  • Icon đăng nhập
  • Chữ “Đăng Nhập”

Icon lấy từ Font Awesome.

🎨 Level 2 — CSS

.navigation button {
    width: 140px;
    height: 35px;
    border: 1px dashed #ccc;
    background-color: transparent;
    flex: 0.2;
    cursor: pointer;
    white-space: nowrap;
}

Hiểu đơn giản:

Thuộc tínhÝ nghĩa
widthNgang nút
heightCao nút
dashedViền nét đứt
transparentNền trong
cursorHover thành tay
nowrapKhông bể chữ

✨ Level 3 — Hover

.navigation button:hover {
    color: rgb(27, 179, 179);
    background-color: rgba(27, 179, 179, 0.1);
}

Hiệu ứng:

  • Rê chuột → đổi màu
  • Có nền nhẹ

🧩 GHÉP UI LẠI

Khi ghép tất cả:

[ Logo ] [ Menu Menu Menu ] [ Đăng Nhập ]

Thanh này gọi là:

👉 Navigation Bar (Thanh điều hướng)

Dùng để:

  • Đi trang
  • Xem nội dung
  • Đăng nhập

🌈 Tham khảo code

Xem code 
<!-- index.html -->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề trang web</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <link rel="stylesheet" href="main.css" />
    </head>

    <body>
        <section class="navigation">
            <img src="https://placehold.co/190x50" alt="Logo" />
            <div class="menus">
                <div class="active">Trang Chủ</div>
                <div>Khóa Học</div>
                <div>Dự Án</div>
                <div>Tài Nguyên</div>
                <div>Đánh Giá</div>
                <div>Liên Hệ</div>
            </div>
            <button>
                <i class="fa fa-sign-in" aria-hidden="true"></i> Đăng Nhập
            </button>
        </section>
    </body>
</html>
/* main.css */
.navigation {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    /* border: 1px solid #ccc; */
}

.navigation img {
    width: 190px;
    height: 50px;
    aspect-ratio: 19 / 5;
    object-fit: cover;
}

.navigation .menus {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding-left: 50px;
    flex: 1;

    flex-wrap: wrap;
}

.navigation .menus div {
    cursor: pointer;
    white-space: nowrap;
}

.navigation .menus div.active {
    color: rgb(27, 179, 179);
}

.navigation button {
    width: 140px;
    height: 35px;
    border: 1px dashed #ccc;
    background-color: transparent;
    flex: 0.2;
    cursor: pointer;
    white-space: nowrap;
}

.navigation button:hover {
    color: rgb(27, 179, 179);
    background-color: rgba(27, 179, 179, 0.1);
}