CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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ụ: XEM DEMO

Bài viết này được đăng tại [free tuts .net]

<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à đây là hình ảnh lúc chạy lên:

menu doc hai cap don gian png

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ụ: XEM DEMO

<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:

menu doc hai cap don gian png png

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{
    width: 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.

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Top