NƠI BẮT NGUỒN CỦA NIỀM ĐAM MÊ: Tạo menu đa cấp với CSS và HTML

Menu đa cấp (multi-level menu) là một menu trong đó một item nào đó của list lại chứa một list khác bên trong nó. Ở đây, chúng ta sẽ cùng tìm hiểu các tạo menu đa cấp đơn giản với CSS và HTML

Tương tự như bài trước thì đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.

Và dưới đây là mã HTML mình viết trong file menu.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div id="menu">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#">new</a>

            <ul>

                <li><a href="#">Sub menu</a></li>

                <li><a href="#">Sub menu</a></li>

            </ul>

        </li>

        <li><a href="#">Services</a></li>

        <li><a href="#">Site Map</a></li>

        <li><a href="#">contac</a></li>

    </ul>

</div>

Sau khi viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang 2 cấp phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang 2 cấp tuyệt đẹp thì chúng ta sẽ CSS để chính sửa nó. Tương tự như bài trước các bạn có thể viết CSS trong phần <head> hoặc tạo một file CSS bên ngoài rồi sau đó dẫn nó vào file menu.html. Ở đây mình sẽ viết CSS vào file riêng style.css. Dưới đây là các lệnh mình viết trong file style.css.

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

//CSS Tạo Menu Cấp 1

#menu ul{

list-style: none;

font-family: Arial, san-serif;

font-size: 12px;

padding: 0;

}

#menu ul li{

float:left;

position:relative;

}

#menu ul a{

text-decoration:none;

color:#fff;

display:block;

font-weight:bold;

padding:10px 30px;

background:#000;

}

#menu ul a:hover{

background:#555;

}

//CSS Tạo Menu Cấp 2

#menu li ul a{

background:#444;

}

#menu li ul{

position:absolute;

display:none;

width:200px;

}

#menu li:hover ul{

display:block;

}

Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé. Chúc các bạn sẽ làm được một thanh menu ngang hai cấp bằng HTML và CSS thật đẹp. Trên đây là mình đã hướng dẫn các bạn tạo một menu ngang đa cấp, chính xác là menu ngang 2 cấp từ đó các bạn có thể phát triển thêm các dạng menu ngang đa cấp khác nhé. Hy vọng bài viết này sẽ giúp ích cho các bạn mới bắt đầu học thiết kế website

NƠI BẮT NGUỒN CỦA NIỀM ĐAM MÊ

Trang

Thứ Năm, 11 tháng 9, 2014

Tạo menu đa cấp với CSS và HTML

Không có nhận xét nào:

Đăng nhận xét