HTML/CSS | Kết hợp với menu, mục lục

Học HTML, CSS từ Zero Tới Hero

• Thêm thẻ a vào menu
• Thêm thẻ a vào mục lục

Thêm thẻ a vào menu

Trong thử thách Danh sách lồng nhau #3 chúng ta đã làm phần khung của menu đa cấp.

Và đây là đáp án của thử thách:

<ul>
    <li>Global</li>
    <li>Clusters</li>
    <li>Apps</li>
    <li>Settings</li>
    <li>
        Security
        <ul>
            <li>Users</li>
            <li>Groups</li>
            <li>Roles</li>
            <li>Pod Security Policies</li>
            <li>Authentication</li>
        </ul>
    </li>
    <li>Tools</li>
</ul>

• Global
• Clusters
• Apps
• Settings
• Security
  • Users
  • Groups
  • Roles
  • Pod Security Policies
  • Authentication
• Tools

Một thứ còn thiếu trong code HTML trên đó là những liên kết. Cần có liên kết thì các mục như Clusters, Apps, v.v mới có thể nhấn vào được.

Bài học này nhằm hướng dẫn các bạn bổ sung thêm các liên kết trong các thẻ <li>.

Thêm các liên kết:

<ul>
    <li><a href="#!">Global</a></li>
    <li><a href="#!">Clusters</a></li>
    <li><a href="#!">Apps</a></li>
    <li><a href="#!">Settings</a></li>
    <li>
        <a href="#!">Security</a>
        <ul>
            <li><a href="#!">Users</a></li>
            <li><a href="#!">Groups</a></li>
            <li><a href="#!">Roles</a></li>
            <li><a href="#!">Pod Security Policies</a></li>
            <li><a href="#!">Authentication</a></li>
        </ul>
    </li>
    <li><a href="#!">Tools</a></li>
</ul>

• Global
• Clusters
• Apps
• Settings
• Security
  • Users
  • Groups
  • Roles
  • Pod Security Policies
  • Authentication
• Tools

Vì chúng ta tạm thời chưa biết sử dụng liên kết nào cho thẻ <a> nên tạm thời có thể đặt href="#!", như vậy nếu có vô tình bấm vào thì cũng không bị tải lại trang (nếu để href="") hoặc bị rời đi trang khác (nếu để href="URL").

Việc sử dụng href="#!" ở đây có thể hiểu như một biện pháp giữ chỗ tạm thời. Khi có liên kết phù hợp thì chúng ta sẽ thay thế nó vào.

Thêm thẻ a vào mục lục

Mục lục trên các trang web thường có thể nhấn vào để di chuyển tới các tiêu đề tương ứng trong nội dung.

Xem video dưới đây:

Dưới đây là mẫu thiết kế phần mục lục:

Đây là phần code HTML cho menu trên:

<ul>
    <li>
        Meet Laravel
        <ul>
            <li>Why Laravel?</li>
        </ul>
    </li>
    <li>Your First Laravel Project</li>
    <li>
        Laravel & Docker
        <ul>
            <li>Getting Started On macOS</li>
            <li>Getting Started On Windows</li>
            <li>Getting Started On Linux</li>
            <li>Choosing Your Sail Services</li>
        </ul>
    </li>
</ul>

• Meet Laravel
  • Why Laravel?
• Your First Laravel Project
• Laravel & Docker
  • Getting Started On macOS
  • Getting Started On Windows
  • Getting Started On Linux
  • Choosing Your Sail Services

Tương tự như phần menu trước, vì thiếu các liên kết nên chưa nhấn được vào các mục trong danh sách.

Tiếp theo, thêm các liên kết cho mục lục:

<ul>
    <li>
        <a href="#!">Meet Laravel</a>
        <ul>
            <li><a href="#!">Why Laravel?</a></li>
        </ul>
    </li>
    <li><a href="#!">Your First Laravel Project</a></li>
    <li>
        <a href="#!">Laravel & Docker</a>
        <ul>
            <li><a href="#!">Getting Started On macOS</a></li>
            <li><a href="#!">Getting Started On Windows</a></li>
            <li><a href="#!">Getting Started On Linux</a></li>
            <li><a href="#!">Choosing Your Sail Services</a></li>
        </ul>
    </li>
</ul>

• Meet Laravel
  • Why Laravel?
• Your First Laravel Project
• Laravel & Docker
  • Getting Started On macOS
  • Getting Started On Windows
  • Getting Started On Linux
  • Choosing Your Sail Services

Sang bài sau chúng ta sẽ học thêm kiến thức để có thể làm được như video dưới đây.

Trong video này, khi nhấn vào mục lục sẽ chuyển tới phần tiêu đề tương ứng trong nội dung trang web.

Tóm tắt

• Khi làm menu, mục lục, v.v cần sử dụng thêm thẻ <a> để có thể nhấn vào các mục.
• Khi chưa có URL để thêm vào menu, có thể tạm thời sử dụng href="#!" để giữ chỗ (tránh nhấn vào trang bị tải lại với href="" hoặc bị nhảy lên đầu trang với href="#").