Scribd Logo
Upload

Welcome to Scribd!

  • Bai 6-Menu

    Uploaded by

    bibu71295
    7 views8 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views8 pages

    Bai 6-Menu

    Uploaded by

    bibu71295

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Bài 6 Tạo Menu

    (Hãy đọc tài liệu và thực hiện các ví dụ, các bài tập)
    Để có thể xây dựng được menu đa cấp thì mọi người cần phải có kiến thức về HTML (ul li)
    cộng với một số kiến thức CSS.
    1. Tạo menu ngang đa cấp
    Bước 1. Đầu tiên chúng ta sẽ xây dựng cấu trúc HTML của menu như sau:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Cách tạo Menu ngang Đa cấp </title>

    </head>
    <body>
    <ul class="menucap1">
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Giới thiệu</a>
    <ul class="menucap2">
    <li><a href="#">Lịch sử phát triển</a></li>
    <li><a href="#">Thành tích đạt được</a></li>
    <li><a href="#">Cơ sở</a></li>
    </ul>
    </li>
    <li><a href="#">Khoa/Bộ môn</a>
    <ul class="menucap2">
    <li><a href="#">Khoa CNTT-Điện</a></li>
    <li><a href="#">Khoa Cơ Khí</a></li>
    <li><a href="#">Khoa KTDV</a></li>
    <li><a href="#">Bộ môn Lái Xe</a></li>
    </ul>
    </li>
    Trang 1
    <li><a href="#">Phòng Ban</a>
    <ul class="menucap2">
    <li><a href="#">P. Hành chính</a></li>
    <li><a href="#">P. Đào Tạo</a></li>
    <li><a href="#">P. Tuyển Sinh</a></li>
    <li><a href="#">P. Tài Vụ</a></li>
    </ul>
    </li>
    <li><a href="#">Liên hệ</a></li>
    <li><a href="#">Góp ý</a></li>
    </ul>
    </body>
    </html>

    Lưu lại với tên menu.html


    Chạy file đó xem kết quả:

    Bước 2. Thêm CSS (trang trí cho menu để được menu đa cấp)
    Trong thẻ <head>, viết code vào chỗ (Thêm code vào đây) như hình dưới:

    Trang 2
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Cách tạo Menu ngang Đa cấp </title>
    (Thêm code vào đây)
    </head>

    Code:
    <style>
    .menucap2 {
    display: none;
    padding-left: 0px;
    width: 300px;
    background: #ccc;
    }
    .menucap1 li {
    list-style-type: none;
    float: left;
    border: 1px solid red;
    position: relative;
    }
    .menucap1 li a {
    text-decoration: none;
    color: black;
    padding: 5px 10px;
    }
    .menucap1 li a:hover {
    background: blue;
    color: #fff;
    }

    /* Menu cấp 2 */
    .menucap1 li:hover ul {
    Trang 3
    display: block;
    position: absolute;
    }
    .menucap2 li {
    float: none;
    border: none;
    }
    .menucap2 li a:hover {
    background: red;
    color: yellow;
    }
    </style>

    Sau khi thêm code xong, nhấn nút LƯU và load lại trang web để xem kết quả:

    Bài tập 1. Hãy tạo thêm Menu giống hình dưới

    Trang 4
    Bài tập 2. Tạo thêm menu như hình dưới

    2. Tạo menu dọc đa cấp


    Ví dụ tạo menu

    Các bước thực hiện:


    Bước 1. Viết cấu trúc HTML và cấu trúc menu
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    <ul>
    <li>
    <a href="#">Trang Chủ</a>
    </li>
    <li>
    <a href="#">Tin Tức</a>
    <ul>
    Trang 5
    <li>
    <a href="#">Tin Trong Nước</a>
    </li>
    <li>
    <a href="#">Tin Nước Ngoài</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Khoa Học</a>
    <ul>
    <li>
    <a href="#">Viễn Tưởng</a>
    </li>
    <li>
    <a href="#">Sáng Tạo</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Pháp Luật</a>
    <ul>
    <li>
    <a href="#">Văn Bản</a>
    </li>
    <li>
    <a href="#">Kiến Nghị</a>
    </li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

    Bước 2. Vào khu vực thẻ <head>, thêm vào thẻ <style>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>

    </style>
    </head>
    (code CSS viết trong thẻ <style> này)
    Bước 3. Menu này có chiều rộng là 250px nên ta thiết lập chiều dài cho thẻ UL là 250px

    Bước 4. Chiều cao của mỗi menu là 30px nên CSS như sau (có giải thích một số thuộc
    tính)

    Trang 6
    Bước 5. Vì chúng ta có thuộc tính border-bottom: none nên ở menu cuối cùng sẽ không có
    đường viền ở bottom. Để giải quyết nó thì ta sẽ thêm border-bottom cho thẻ li:last-child
    (thẻ li cuối cùng).

    Bước 6. Sau khi xong menu cha thì bây giờ ta xử lý menu con. Menu con nằm trong menu
    cha nên selector của nó sẽ là ul li ul.

    Bước 7. Vậy là menu con đã ẩn đi. Bây giờ làm thế nào để menu con hiển thị khi hover
    chuột vào menu cha? Ta sẽ sử dụng CSS cho sự kiện hover ở thẻ li menu cha.

    Kết quả:

    Trang 7
    CHÚC CÁC BẠN THỰC HIỆN HỌC TẬP TỐT!

    Trang 8

    You might also like