Biên soạn theo hướng dẫn của CSS Tutorial

Với CSS.

Trong bài hướng dẫn này các bạn sẽ được hướng dẫn từng bước để triển khai một trình đơn hàng ngang.

[sourcecode language=”html”]
<div id="menu">
<ul>

<li><a href="#">Sem 1</a>
<ul>
<li><a href="#">Computing Fundametal</a></li>
<li><a href="#">C Programming</a></li>
<li><a href="#">Building Dynamic Website</a></li>
<li><a href="#">MS Transact-SQL</a></li>
<li><a href="#">Project</a></li>
</ul>
</li>
<li><a href="#">Sem 2 </a>
<ul>
<li><a href="#">Cloud Computing</a></li>
<li><a href="#">APJ – I</a></li>
<li><a href="#">APJ – II</a></li>
<li><a href="#">APJ – III</a></li>
<li><a href="#">eProject</a></li>
</ul>
</li>
<li><a href="#">Sem 3</a></li>
<li><a href="#">Sem 4</a></li>

</ul>
</div>
[/sourcecode]

Hình minh họa dưới đây cho chúng ta thấy trình đơn (sử dụng danh sách) khi chưa sử dụng CSS:

Trước hết, bạn cần tạo ba bộ chọn sau đây để cố định phông chữ cho trang HTML và đặt phân vùng cho trình đơn (chiều cao, đường viền, khoảng cách và màu nền.

[sourcecode language=”css”]
body{
font-family: Arial;
}

#menu{
height: 30px;
padding:0;
margin:0;
background-color: #000000;
border: 1px solid #CDCDCD;
}

#menu ul, #menu li{
padding:0;
margin:0;
}
[/sourcecode]

Sau khi bổ sung các bộ chọn CSS ở trên vào trang của bạn, bạn có thể thấy định dạng mới như sau:

Định nghĩa tiếp một bộ chọn riêng cho các phần tử trong danh sách:

[sourcecode language=”css”]
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
[/sourcecode]

Trình đơn của bạn sẽ có dạng như sau với bộ chọn ở trên:

Bước tiếp theo bạn định nghĩa một bộ chọn dành cho các liên kết trong trình đơn, bộ chọn này sẽ cố định độ rộng của một mục chọn trong trình đơn, chiều cao, cách hiển thị và định dạng về văn bản của các liên kết trong trình đơn.

[sourcecode language=”css”]
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}

#menu ul ul li a{
width: 200px;
text-align: left;
padding-left: 10px;

}
[/sourcecode]

Kết quả sẽ như sau:

Bạn cần bổ sung thêm một bộ chọn dành cho trường hợp khi các liên kết được con trỏ đưa qua, bộ chọn sẽ chuyển màu nền của liên kết sang màu đỏ khi xảy ra sự kiện này:

[sourcecode language=”css”]
#menu li a:hover{
background-color: red;
}
[/sourcecode]

Kết quả sẽ như sau:

Chúng ta cần thêm một bộ chọn dành cho các danh sách con (trình đơn con) để quy định về vị trí hiển thị của chúng so với mục chọn của trình đơn cha. Bộ chọn đó như sau:

[sourcecode language=”css”]
#menu ul ul{
position: absolute;
top: 30px;
}
[/sourcecode]

Với bộ chọn trên trang của bạn sẽ như sau:

Hiện tại bạn có thể thấy các mục chọn của trình đơn con đang hiển thị lên và đè lên nhau, bạn cần bổ sung thêm một mô tả với thuộc tính  visibility cho bộ chọn #menu ul ulmà bạn vừa định nghĩa ở trên, khi đó bộ chọn này sẽ như sau:

[sourcecode language=”css”]
#menu ul ul{
position: absolute;
top: 30px;
left: 15px;
visibility: hidden;
}
[/sourcecode]

Kết quả tiếp theo trình đơn của bạn sẽ như sau:

Cuối cùng, để các trình đơn bị ẩn sẽ hiển thị mỗi khi con trỏ được đưa qua mục chọn của trình đơn cha, bạn cần tạo thêm một bộ chọn nữa như sau:

[sourcecode language=”css”]
#menu ul li:hover ul{
visibility: visible;
}
[/sourcecode]

Bộ chọn trên được áp dụng cho các danh sách con (trình đơn con) mỗi khi mục chọn tương ứng ở trình đơn cha xảy ra sự kiện đưa con trỏ qua. Kết quả cuối cùng bạn sẽ được một trình đơn buông xuống dạng hàng ngang như sau:

Chúc bạn thành công!