Chủ đề nổi bật

Bài 11: Xây dựng menu dọc hai cấp đơn giản bằng CSS

DEMO Vậy là ...

DEMO

Vậy là chúng ta đã học khá nhiều thuộc tính hay và cho tới bài này thì chúng ta chưa có bài tập thực hành, vì vậy hôm nay minh sẽ làm một menu hai cấp đơn giản bằng CSS. Tuy bài này ở mức đơn giản nhưng rất phù hợp với những bạn mới học CSS, vì vậy nếu bạn nào cảm thấy quá dễ thì có thể bỏ qua bài này.

1. Ý tưởng sử dụng CSS xây dựng menu dọc hai cấp

Menu hai cấp được chia làm hai phần chính: Phần thứ nhất là menu cha cấp cao nhất và phần thứ hai là menu con của nó. Nhưng vấn đề ở đây là nên sử dụng những thẻ HTML nào để xây dựng menu? Câu trả lời chính là thẻ UL và LI nằm trong serie HTML căn bản.

Thẻ UL dùng để chứa các thẻ LI và đương nhiên để có hai cấp thì chúng ta phải lồng thêm một cặp UL và  LI nữa.

Ví dụ:

<ul>
    <li>
        <a href="#">Trang Chủ</a>
    </li>
    <li>
        <a href="#">Tin Tức</a>
        <ul>
            <li>
                <a href="#">Tin Trong Nước</a>
            </li>
            <li>
                <a href="#">Tin Nước Ngoài</a>
            </li>
        </ul>
    </li>
</ul>

Vấn đề của chúng ta là sử dụng thêm CSS để tô màu cho chúng và ẩn luôn menu con, chỉ khi nào hover chuột vào menu cha nào thì menu con đó mới hiển thị. Để ẩn hay hiển thị thì chúng ta chỉ cần sử dụng thuộc tính display trong CSS, nhưng để di chuyển menu con trong phạm vi của menu cha thì chúng ta sử dụng thuộc tính position relative và absolute trong CSS mà bạn đã được học (nghĩa là menu cha sẽ có giá trị position:relative và menu con sẽ có giá trị position:absolute).

2.  Sử dụng CSS xây dựng menu dọc hai cấp đơn giản

Bài này mục đích cho bạn làm quen với những gì đã học trước đây nên nó rất đơn giản,  hiểu được nó thì ở những bài sau bạn mới dễ dàng nắm bắt và theo dõi bài viết.

Đây chính là HTML của ví dụ: 

<body>
    <ul>
        <li>
            <a href="#">Trang Chủ</a>
        </li>
        <li>
            <a href="#">Tin Tức</a>
            <ul>
                <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>

Chúng ta sẽ xây dựng menu như sau:

Chúng ta sẽ thực hiện các bước sau (sau mỗi bước bạn nên chạy thử để xem nhé):

Bước 1: 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.

ul{
    awidth: 250px;
}

Bước 2: 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)

ul li{
    height: 30px;           /*Cao 30px*/
    line-height: 30px;      /*Cho chữ canh giữa 30px*/    
    list-style: none;       /*Không hiển thị dấu chấm đầu menu*/
    padding: 0px 10px;      /*đẩy nôi dung menu vào 10cm (trái + phải)*/
    background: pink;       /*màu nèn màu hồng*/
    border: solid 1px red;  /*đường viền màu đỏ*/
    border-bottom: none;    /*vì menu liền kề nhau nên border-bottom không cần*/
    position: relative;     /*chọn làm khung*/
}

Bước 3: 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).

ul li:last-child{
    border-bottom: solid 1px red;
}

Bước 4: 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.

ul li ul{
    position: absolute;     
    top: -1px;          /*cho ngang hàng với menu cha, vì menu cha có border - 1 nên ta phải trừ đi 1*/
    right: -250px;      /*vì nàm ngoài khung và dài 250px nên là số âm 250px */
    display: none;      /*Ban đầu sẽ không hiển thị*/
}

Bước 5: 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.

ul li:hover ul{
    display: block;
}

Vậy là chúng ta hoàn thiện xong menu dọc hai cấp đơn giản. XEM DEMO.

3. Lời kết

Như ban đầu mình đã nói thì trong bài này mục đích là giúp bạn làm quen với cách xây dựng menu và sử dụng các thuộc tính quan trọng đã được học trong CSS để xây dựng menu dọc hai cấp, ở những bài tiếp theo chúng ta sẽ tiếp tục tìm hiểu một số thuộc tính nâng cao trong CSS nữa.

BÀI KẾ SAU
BÀI KẾ TIẾP
 

Nguồn: code24h.com

Bài liên quan
Mới nhất

Animation trong CSS

Animation là gì ? Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động. Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS. Để tìm hiểu chi tiết, ...

Chuyển đổi từ PX sang EM trong CSS

Chuyển đổi từ PX sang EM Như đã được trình bày trong chương Đơn vị trong CSS , một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12px thì mỗi đơn vị em sẽ là 12px, do đó 2em sẽ là 24px. Do đó, trong ...

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn. Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3: Giá trị Miêu tả appearance Cho phép người dùng làm cho các phần tử ...

Chia cột trong CSS

CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo. Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3: Giá trị Miêu tả column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill ...

Tổng hợp các màu trong CSS

Bảng dưới đây liệt kê 16 tên cùng mã màu (mã Hex code) đã được giới thiệu trong HTML 3.2. Bạn cũng có thể sử dụng các màu này trong CSS. Tên màu Giá trị Hex Code Màu aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff green #008000 ...

Responsive trong CSS | Responsive CSS là gì

Responsive CSS là gì ? Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px ...

2D Transform trong CSS3

2D Transforms được sử dụng để tái thay đổi cấu trúc phần tử, ví dụ như translate, rotate, scale, và skew. Bảng dưới liệt kê một số giá trị thường được sử dụng trong 2D Transforms: Giá trị Miêu tả translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x và trục y ...

Thuộc tính box sizing trong CSS3

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử. Bắt đầu từ CSS2, thuộc tính box làm việc như sau: awidth + padding + border = chiều rộng thực sự của một phần tử box height + padding + border = chiều cao thực sự của một phần tử box Nghĩa là, khi bạn ...

3D Transform trong CSS

Sử dụng 3D Transform trong CSS, bạn có thể di chuyển các phần tử theo 3 trục: x, y và z. Dưới đây là các ví dụ xác định một cách rõ ràng cách phần tử sẽ quay theo các trục. Các phương thức của 3D Transform trong CSS Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong ...