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.
<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.
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:
#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.
#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:
#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:
#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:
#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:
#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!
Cảm ơn thầy cô!
Em đang phải làm cái này, vào đây copy lun ^^
Mong sẽ có nìêu bài basic như thế này nữa 😀
Mong Giang Tuấn Anh chịu khó ghé thăm nhà 🙂
em muốn kẻ border-right cho các li trừ li cuối cùng nên em đặt class cho li cuối cùng rồi định dạng trong css bằng .class { border : 0px;} nhưng sao nó vẫn k mất đường kẻ nhỉ ?
Chắc bạn làm chưa đúng, VD:
#menu li.last{
border-right:none;
}
—————-
<li class=”last”><a href=”#” rel=”nofollow”>Sem 4</a>>/li>
Mình xin lỗi nhưng mà mình đã thử cách này nhưng không hiểu sao lại bị lỗi, các trình đơn không xổ dọc xuống được mà chữ lại bị chồng đè lên nhau…
Mình gửi bản mình làm lên hộp mail mong TCLT có thể giúp đỡ: lienhe.tapchilaptrinh@gmail.com này của TCLT nhé 🙂 [hy vọng là không phiền]
Mà ngoài ra phương pháp dùng CSS thì mình có thể làm bằng JS được không? Cách làm bằng CSS này còn nhiều chỗ khiến mình chưa hiểu lắm
Bạn xem lại code CSS, chắc là lỗi ở đó. Còn việc dùng JS cho menu thì tất nhiên là được nhưng sẽ không đơn giản như CSS.
Thực ra thì mình cũng chưa hiểu lắm bộ code ở trên, nên cũng chẳng biết được sai chỗ nào 🙁
Bạn có thể giải thích rõ hơn về việc tại sao lại xây dựng code như vậy được không?
Vậy thì Silver Light cần tìm hiểu căn bản về HTML và CSS đã.
À thôi khỏi, ba ngày vừa rồi đủ để mình hiểu rồi. Nhìn chung là biến các tag thành nhưng khối di động và thả trôi trong khi đó thì dùng tag bọc lại với trách nhiệm là vị trí tuyệt đối. Hiều rồi.
em đã kiểm tra lại chính xác rùi mà sao nó không buông khi trỏ vào sem 1 và 2 ;nó chỉ có màu đỏ thui ạ, ai giải thích e với
Chắc bạn vẫn thiếu một selector nào đó chưa được định nghĩa?