04/10/2018, 17:05
[BÀI 10]Xây dựng menu đa cấp bằng CSS
Xây dựng menu đa cấp bằng CSS Cách xây dựng một menu đa cấp đơn giản bằng HTML chưa sử dụng CSS. Để xây dựng một menu trong HTML, chúng ta sử dụng thẻ <ul> và <li> Ví dụ : XHTML <body> <ul> < ...
Xây dựng menu đa cấp bằng CSS
-
Cách xây dựng một menu đa cấp đơn giản bằng HTML chưa sử dụng CSS.
Để xây dựng một menu trong HTML, chúng ta sử dụng thẻ <ul> và <li>
Ví dụ :
<body>
<ul>
<li>
<a href=”#”>Trang chủ</a>
</li>
<li>
<a href=”#”>Tin kinh tế</a>
</li>
<li>
<a href=”#”>Tin thời sự</a>
</li>
</ul>
</body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <ul> <li> <a href=”#”>Trang chủ</a> </li> <li> <a href=”#”>Tin kinh tế</a> </li> <li> <a href=”#”>Tin thời sự</a> </li> </ul> </body> |
Kết quả :
Còn để xây dựng một menu đa cấp, ta sẽ sử dụng các cặp thẻ <ul> và <li> lồng nhau.
Ví dụ :
<body>
<ul>
<li>
<a href="#">Trang chủ</a>
</li>
<li>
<a href="#">Tin kinh tế</a>
</li>
<ul>
<li>
<a href="#">Kinh tế trong nước</a>
</li>
<li>
<a href="#">Kinh tế thế giới</a>
</li>
</ul>
<li>
<a href="#">Tin thời sự</a>
<ul>
<li>
<a href="#">Thời sự trong nước</a>
</li>
<li>
<a href="#">Thời sự thế giới</a>
</li>
</ul>
</li>
</ul>
</body>
|
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 |
<body> <ul> <li> <a href="#">Trang chủ</a> </li> <li> <a href="#">Tin kinh tế</a> </li> <ul> <li> <a href="#">Kinh tế trong nước</a> </li> <li> <a href="#">Kinh tế thế giới</a> </li> </ul> <li> <a href="#">Tin thời sự</a> <ul> <li> <a href="#">Thời sự trong nước</a> </li> <li> <a href="#">Thời sự thế giới</a> </li> </ul> </li> </ul> </body> |
Kết quả :
-
Sử dụng CSS trong việc xây dựng menu đa cấp
Ví dụ :
<head>
<title>Ví dụ về Menu</title>
<meta charset="utf-8">
</head>
<style type="text/css">
ul{
float: left;
awidth: 300px;
}
ul li{
float: left;
height: 40px;/*Cao 40px*/
line-height: 40px;/*Cho chữ canh giữa 40px*/
list-style: none;/*Không hiển thị dấu chấm đầu menu*/
padding: 0px 15px;/*đẩy nôi dung menu vào 15px (trái + phải)*/
background: pink;/*màu nền màu hồng*/
border: solid 1px red;/*đường viền màu đỏ*/
border-right:none;/*Bỏ đường viền bên phải*/
position: relative;/*chọn làm khung*/
}
ul li ul li{
clear: left; /* xóa bỏ sự đẩy về bên trái của float : left*/
border-bottom: none;
border-right: solid 1px red;
}
ul li:last-child{
border-right: solid 1px red;/*thiết lập đường viền bên phải cho thẻ li cuối cùng*/
border-bottom: solid 1px red;
}
ul li ul{
position: absolute;/*chọn làm thành phần con của relative trên*/
top: 40px;/*cho cách menu cha 40px*/
left: -40px;/*đưa menu con qua bên trái -40px so với menu cha */
display: none;/*Ban đầu sẽ không hiển thị*/
}
ul li:hover ul{
display: block;/* trỏ chuột vào sẽ hiển thị menu con */
}
</style>
<body>
<ul>
<li>
<a href="#">Trang chủ</a>
</li>
<li>
<a href="#">Tin kinh tế</a>
<ul>
<li>
<a href="#">Kinh tế thế giới</a>
</li>
<li>
<a href="#">Kinh tế trong nước</a>
</li>
</ul>
</li>
<li>
<a href="#">Tin thời sự</a>
<ul>
<li>
<a href="#">Thời sự thế giới</a>
</li>
<li>
<a href="#">Thời sự trong nước</a>
</li>
</ul>
</li>
</ul>
</body>
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<head> <title>Ví dụ về Menu</title> <meta charset="utf-8"> </head> <style type="text/css"> ul{ float: left; awidth: 300px; } ul li{ float: left; height: 40px;/*Cao 40px*/ line-height: 40px;/*Cho chữ canh giữa 40px*/ list-style: none;/*Không hiển thị dấu chấm đầu menu*/ padding: 0px 15px;/*đẩy nôi dung menu vào 15px (trái + phải)*/ background: pink;/*màu nền màu hồng*/ border: solid 1px red;/*đường viền màu đỏ*/ border-right:none;/*Bỏ đường viền bên phải*/ position: relative;/*chọn làm khung*/ } ul li ul li{ clear: left; /* xóa bỏ sự đẩy về bên trái của float : left*/ border-bottom: none; border-right: solid 1px red; } ul li:last-child{ border-right: solid 1px red;/*thiết lập đường viền bên phải cho thẻ li cuối cùng*/ border-bottom: solid 1px red; } ul li ul{ position: absolute;/*chọn làm thành phần con của relative trên*/ top: 40px;/*cho cách menu cha 40px*/ left: -40px;/*đưa menu con qua bên trái -40px so với menu cha */ display: none;/*Ban đầu sẽ không hiển thị*/ } ul li:hover ul{ display: block;/* trỏ chuột vào sẽ hiển thị menu con */ } </style> <body> <ul> <li> <a href="#">Trang chủ</a> </li> <li> <a href="#">Tin kinh tế</a> <ul> <li> <a href="#">Kinh tế thế giới</a> </li> <li> <a href="#">Kinh tế trong nước</a> </li> </ul> </li> <li> <a href="#">Tin thời sự</a> <ul> <li> <a href="#">Thời sự thế giới</a> </li> <li> <a href="#">Thời sự trong nước</a> </li> </ul> </li> </ul> </body> |
Kết quả :
Trong ví dụ trên mình có chú thích tác dụng của từng dòng. Các bạn tham khảo nhé !!
Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.
Chúc các bạn thành công !!!
