Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản
20
Your ads here!
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 blogger 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 HHV 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… Bài viết hơi dài tuy nhiên để thư giãn mời bạn ghé thăm trang demo trước khi bắt tay vào việc.
1. Tạo một trang HTML5 với một menu list
a. Tạo một trang HTML5
<!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
<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 lai dùng cấu trúc thẻ các <ul> <li> và<a>
<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.
<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é!
/*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:relative tuy 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.
/*top list items*/
.top_menu {
float:left;
position:relative;
border-right:1px solid #ff00cc;
border-left:1px solid #ff00cc;
margin-left:-1px;
}
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.
/*anchors*/
#main_menu a, #main_menu a:hover {
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);
color:#ffffff;
display:block;
padding:5px;
text-decoration:none;
width:150px;
border-top-right-radius:2px;
border-top-left-radius:2px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
Một trong những cách học hay nhất là vừa làm vừa thực hành, HHV khuyến cáo các bạn sử dụng một chương trình như Notepad++ để code vừa code vừa lưu lại. Sau đó bạn có thể vừa xem trên trình duyệt vừa chỉnh sửa CSS bằng cách dùng firebug
Như vậy phần menu cấp 1 đã hoàn thành bây giờ chúng ta tiếp tục đến menu cấp 2. Đoạn code sau quy định các thuộc tính cơ bản và lớn nhất của nó.
/*sub menu list*/
#main_menu ul {
list-style:none;
position:absolute;
display:none;
}
/*sub menu when hover on top item*/
#main_menu li:hover ul {
display:block;
}
Phần code bên dưới có 3 thuộc tính cả 3 thuộc tính bên dưới đều cực kỳ quan trọng và không thể bỏ qua. Thuộc tính list-style-type: none; đã đề cập ở trên ta không nhắc lại nữa,.
Thuộc tính position là để biến toàn bộ thẻ <ul> (submenu) thành một khối như vậy các thẻ<li> (của sub menu) sẽ không bị chạy loạn xạ mà chỉ nằm trong một khối và nằm ngay bên dưới thẻ <li> (menu) bên trên nó.
Thuộc tính display:none; là vì ở điều kiện bình thường thì các submenu bị ẩn đi, chỉ khi bạn rê chuột vào (hiệu ứng hover) thì nó mới hiện ra.
Bây giờ tiếp tục trang trí cho thẻ <li> (submenu)
/*sub menu list items*/
#main_menu ul li {
padding-top:1px;
margin-left:-25%;
}
Cuối cùng là trang trí cho phần thẻ <a> của submenu.
/*sub menu list anchors*/
#main_menu ul a {
color:#ffff00;
box-shadow: 3px 3px 2px #888888;
}
3. Kết luận – những điểm cần ghi nhớ
Nếu tìm hiểu kỹ bài viết này bạn có thể hoàn toàn làm cho mình một thanh menu hoàn hảo theo ý thích, bạn có thể thêm các thuộc tính background là hình ảnh, thêm các hiệu ứng hover (bằng cách thêm thuộc tính transform của CSS3). Tuy nhiên điều quan trọng là bạn phải nắm được cấu trúc và trình tự. Cần chú ý các điểm sau.
1. Menu đa cấp thực ra là một danh sách trong một danh sách.
2. Khi trang trí code thì phải theo thứ tự từ cái rộng nhất đến cái chi tiết nhất.
3. Thuộc tính list-style-type: none; cho tất cả các thẻ <ul>
4. Thuộc tính positon: block; cho tất cả các thẻ <a>
5. Thuộc tính float:left cho thẻ <li> của menu cấp 1
6. Thuộc tính positon: block; và display:none; cho thẻ <ul> của submenu
Cuối cùng HHV biết rằng hơi dài dòng và khá rắc rối nên có chỗ nào mơ hồ thì cứ để lại comments ở dưới bài viết này…