» Bài viết:
Làm thanh Menu đa cấp (Menu bar) với HTML5 và CSS3 từng bước đơn giản» Lượt xem: 743
Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Rất nhiều trang web tên tuổi đã hướng dẫn làm thanh menu đa cấp (multilevel menu bar) tuy nhiên trong bài viết này ChiaseIT.Mobie.In vẫn
hướng dẫn cách làm từng bước một thanh menu bar đơn giản với HTML và CSS3. Đây không phải là một hướng dẫn xơi ngay kiểu “mì ăn liền” mà là giúp các bạn hiểu quy trình để làm ra một thanh menu bar như thế nào.
Khi đã hiểu rõ bạn hoàn toàn có thể tùy biến theo ý thích của mình, đổi màu, thêm background, thêm hiệu ứng hover. và nhiều thứ khác nữa…
Demo :
xem
1. Tạo một trang HTML5 với một menu list
a. Tạo một trang HTML5
Mã:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Đây là cấu trúc cơ bản của một trang HTML5, trong đó phần code CSS mình sẽ chèn giữ thẻ <head> và code html mình chèn giữa thẻ <body>
b. Tạo một menu list.
Bản chất của một thanh menu là tập hợp những đường link được sắp xếp theo trình tự. Một thanh menu chính là một danh sách các đường link được trang trí và trình bày lại theo hàng ngang. Để dễ trang trí ta dùng các thẻ id (main_menu) và class (top_menu)
Danh sách cấp 1 của menu
Mã:
<ul id="main_menu">
<li class="top_menu">
<a href="#">Design</a>
</li>
<li class="top_menu">
<a href="#">Tutorials</a>
</li>
<li class="top_menu">
<a href="#">Coding</a>
</li>
<li class="top_menu">
<a href="#">Blogger</a>
</li>
<li class="top_menu">
<a href="#">General</a>
</li>
</ul>
Chú ý các thẻ
<ul> <li> và
<a> với thuộc tính href chúng được sắp xếp lặp lại. Bạn có thể thay thế phần anchor text và các đường link theo ý thích.
Bây giờ phải thêm phần danh sách cấp 2 của menu. Ta lại dùng các cấu trúc thẻ
<ul> <li> và
<a>
Mã:
<ul>
<li><a href="#">Freebies</a></li>
<li><a href="#">Wallpaper</a></li>
<li><a href="#">Web Design</a></li>
</ul>
Ghép chúng lại theo kiểu “một danh sách nằm trong một thẻ
<a> “ ta có toàn bộ thanh menu 2 cấp phái dưới. Bạn cần chú ý vị trí đặt thẻ
<ul> của danh sách cấp 2.
Mã:
<ul id="main_menu">
<li class="top_menu">
<a href="#">Design</a>
<ul>
<li><a href="#">Freebies</a></li>
<li><a href="#">Wallpaper</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li class="top_menu">
<a href="#">Tutorials</a>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Writting skills</a></li>
</ul>
</li>
<li class="top_menu">
<a href="#">Coding</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li class="top_menu">
<a href="#">Blogger</a>
<ul>
<li><a href="#">Buzz</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
</ul>
</li>
<li class="top_menu">
<a href="#">General</a>
</li>
</ul>
Phần khung sườn của menu đã xong ta chuyển sang phần trang trí chúng dùng CSS3
2. Trang trí thanh menu 2 cấp với CSS3
Trước tiên là trang trí cho toàn bộ thanh menu với thuộc tính background, thuộc tính này có giá trị bao trùm cả toàn bộ thanh menu của chúng ta. Thực tế phần gradient không quan trọng, chủ yếu để ứng dụng hiệu ứng của CSS3. Các tiền tố
–moz –o –webkit -ms là để cho các trình duyệt khác nhau hiểu về phần thuộc tính đi phía sau nó.
Phần code này cũng quy định các thành phần khác cho toàn bộ thanh menu bar như bề rộng, font chữ, căn lề…. Thuộc tính đáng chú ý nhất ở đây là
list-style-type: none; bạn không được thay đổi. Bạn hãy tự khám phá vì sao không được thay đổi nhé!
Mã:
/*container list*/
#main_menu{
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
font-family:sans-serif;
list-style-type:none;
text-align:center;
float:left;
width:90%;
border-radius:5px;
box-shadow: 3px 3px 2px #888888;
Bây giờ ta sẽ trang trí đến top_menu, class top_menu quy định các thuộc tính của thẻ <li> cấp 1. Thuộc tính quan trọng nhất của phần này là
float:left;. Một list mặc định sẽ được liệt kê theo từng dòng một. Khi đặt thuộc tính
float:left; các thẻ <li> sẽ xếp lớp về bên trái theo thứ tự và tạo thành một thanh ngang trên một dòng. Ngoài ra thuộc tính
positon:relativetuy không quan trọng bằng nhưng bổ sung thêm cho float. Nếu thích bạn có thể tìm hiểu thêm
ở đây
.
Mã:
/*top list items*/
.top_menu {
float:left;
position:relative;
border-right:1px solid #ff00cc;
border-left:1px solid #ff00cc;
margin-left:-1px;
[rde]
Chú ý: Các bạn cần hình dung trình tự trang trí mà chúng ta đang làm. Khi trang trí bằng code CSS bạn nên bắt đầu từ cái rộng nhất cho đến các chi tiết. Trình tự trước tiên là toàn bộ thanh menu thẻ
<ul>< rồi đến các thẻ <li>. Bây giờ chúng ta bắt tay vào thẻ <a> .
Phần code bên dưới dây quy định cho cho phần text nào nằm trong thẻ <a> của thanh menu điều này có nghĩa là nó được áp dụng cho cả 2 cấp menu của chúng ta.
Trong phần thuộc tính có 2 điểm chúng ta nên ghi nhớ là phần background, display.
Phần background quy định màu nền của thẻ <a> khuyến cáo các bạn sử dụng màu nền này trùng với màu nền của toàn bộ menu để bảo đảm yếu tố thẩm mỹ.
Phần display: block; thì không được thay đổi vì nó ảnh hưởng trực tiếp đến phần khung sườn của toàn bộ thanh menu. ...
Cùng Chuyên Mục
KhoTai321@gmail.Com
Sử dụng trình duyệt Uc Browser để cải tiến vào mạng và tải nhanh gấp 9 lần Opera tiết kiệm 99% phí GPRS.
