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

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.

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 serieHTML 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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:
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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.
1
2
3
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)
1
2
3
4
5
6
7
8
9
10
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).
1
2
3
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.
1
2
3
4
5
6
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.
1
2
3
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.