Để thấy rõ hơn các bạn hãy xem demo:View Demo
Phần 1: Giới thiệu code hoàn chỉnh của Menu drop với CSS3
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin> (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ ]]></b:skin> .
/*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:100%; border-radius:5px; box-shadow: 3px 3px 2px #888888; } /*top list items*/ .top_menu { float:left; position:relative; border-right:1px solid #ff00cc; border-left:1px solid #ff00cc; margin-left:-1px; } /*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:80px; border-top-right-radius:2px; border-top-left-radius:2px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } /*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; } /*sub menu list items*/ #main_menu ul li { padding-top:1px; margin-left:-25%; } /*sub menu list anchors*/ #main_menu ul a { color:#ffff00; box-shadow: 3px 3px 2px #888888; }6- Lưu mẫu lại.
<ul id="main_menu"> <li class="top_menu"><a href="#">Menu 1</a> <ul> <li><a href="#">Sub menu 1.1</a></li> <li><a href="#">Sub menu 1.2</a></li> <li><a href="#">Sub menu 1.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 2</a> <ul> <li><a href="#">Sub menu 2.1</a></li> <li><a href="#">Sub menu 2.2</a></li> <li><a href="#">Sub menu 2.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 3</a> <ul> <li><a href="#">Sub menu 3.1</a></li> <li><a href="#">Sub menu 3.2</a></li> <li><a href="#">Sub menu 3.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 4</a> <ul> <li><a href="#">Sub menu 4.1</a></li> <li><a href="#">Sub menu 4.2</a></li> <li><a href="#">Sub menu 4.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 5</a></li> </ul>8- Lưu tiện tích lại và xem kết quả.
Phần 2: Các bước để tạo nên menu với CSS 3
- Để tiện bạn hãy tạo một trang HTML trên máy bằng cách vào Start=> All program => Accesories => Notepad và pate đoạn code sau vào:
<!DOCTYPE html> <html> <head> <style type="text/css"> Phần để chèn code CSS </style> </head> <body> Phần để chèn code menu </body> </html>
<ul id="main_menu"> <li class="top_menu"><a href="#">Menu 1</a></li> <li class="top_menu"><a href="#">Menu 2</a></li> <li class="top_menu"><a href="#">Menu 3</a></li> <li class="top_menu"><a href="#">Menu 4</a></li> <li class="top_menu"><a href="#">Menu 5</a></li> </ul>Copy code trên vào file menu.html vừa tạo và lưu lại rồi mở lên bạn sẽ thấy như sau:
Code CSS tạo nền và font chữ.
/*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:100%; border-radius:5px; box-shadow: 3px 3px 2px #888888; }
- Thuộc tính background, quy định màu nền cuat thanh menu.
- Thuộc tính con gradient để tạo hiệu ứng của CSS3.
- Các tiền tố –webkit –moz -ms –o là thuộc tính hack trên các trình duyệt như Opera, Ie, Sarapi,....
- width:100%; là bề rộng,
- font-family:sans-serif; là font chữ,
- float:left; là căn lề trái tiêu đề trên menu có thê thay đổi thành center hoặc right. (Phần này bạn không được bỏ qua)
- list-style-type: none; Phần này để xóa các dấu chấm do thẻ <li> tạo ra. Do vậy đừng thay đổi. (Phần này bạn không được bỏ qua)
Định dạng Tiêu đề menu chính.
/*top list items*/ .top_menu { float:left; position:relative; border-right:1px solid #ff00cc; border-left:1px solid #ff00cc; margin-left:-1px; }
- float:left;. Thuộc tính này rất quan trọng bạn không thể bỏ vì nó sẽ đẩy các thẻ <li> về bên trái theo thứ tự và tạo thành một thanh ngang trên cùng một dòng. Tất nhiên bạn có thể đẩy các thẻ về bên phải bằng cách sửa float:left thành float:right và đẩy vào giữa bằng cách đổi thành float:center.
- positon:relative Giờ thì menu đã hiện ra nhưng khi rê chuột vào một tiêu đề trên Menu chính thì tiêu đề còn lại bị đẩy qua phải. Nguyên nhân là do thuộc tính float lúc đầu của top_menu bên trên.
Để khắc phục tình trạng này ta cho vị trí các sub menu lệ thuộc vào các top_menu bằng cách sử dụng 2 thuộc tính position:relative; Lúc này vị trí của các menu con (sub menu) sẽ bị lệ thuộc vào top_menu. - border-right:1px solid #ff00cc; và border-left:1px solid #ff00cc; là các đường viền ngăn cách của các tiêu đề bạn có thể chỉnh sửa to hoặc nhỏ bằng cách chỉnh sửa 1px. Hoặc xóa bỏ phần màu vàng đi.
- Thêm thuộc tính background quy định màu nền của cặp thẻ <a></a>. Bạn nên sử dụng màu nền này trùng với màu nền của menu. Nếu tháy rắc rối bạn có thể thay phần mình tô màu xanh bên dưới thành background:transparent; để quy định màu nền trong xuốt.
- display: block; Thuộc tính này quy định các tiêu đề trong thẻ <a></a> nằm trong 1 hộp thoại theo đường thẳng không lung tung lộn xộn. Hay nói cách khác phần này bạn không được phép thay đổi.
- Tiền tố radius của thuộc tính border quy định bo góc của các menu con. Nếu không thích bạn có thể xóa bỏ phần màu vàng này hoặc chỉnh sửa lại các con số trong đó..
- Để điều chỉnh độ dày (chiều cao) của menu namkna đề nghị bạn sử dụng thuộc tính padding bằng cách thêm thuộc tính padding:5px;
- Điều chỉnh khoảng cách giữ các tiêu đề bằng cách điều chỉnh độ rộng của cặp thẻ <a></a> chứa tiêu đề đó bằng thẻ width:. ở đây mình đặt width:80px. tất nhiên bạn có thể thay đổi nếu tiêu đề của bạn quá dài để tránh hiện tượng xuống dòng.
- Và thêm thuộc tính text-decoration:none; để xóa gạch chân bên dưới mỗi tiêu đề củamenu.
/*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:80px; border-top-right-radius:2px; border-top-left-radius:2px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }
<ul> <li><a href="#">Sub menu 1.1</a></li> <li><a href="#">Sub menu 1.2</a></li> <li><a href="#">Sub menu 1.3</a></li> </ul>- Sau khi thêm vào ta được đoạn code mới như sau:
<ul id="main_menu"> <li class="top_menu"><a href="#">Menu 1</a> <ul> <li><a href="#">Sub menu 1.1</a></li> <li><a href="#">Sub menu 1.2</a></li> <li><a href="#">Sub menu 1.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 2</a> <ul> <li><a href="#">Sub menu 2.1</a></li> <li><a href="#">Sub menu 2.2</a></li> <li><a href="#">Sub menu 2.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 3</a> <ul> <li><a href="#">Sub menu 3.1</a></li> <li><a href="#">Sub menu 3.2</a></li> <li><a href="#">Sub menu 3.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 4</a> <ul> <li><a href="#">Sub menu 4.1</a></li> <li><a href="#">Sub menu 4.2</a></li> <li><a href="#">Sub menu 4.3</a></li> </ul> </li> <li class="top_menu"><a href="#">Menu 5</a></li> </ul>- Vị trí nào không muốn tạo drop menu bạn không cần thêm. Trong trường hợp trên mình không tạo Drop cho menu 5.Lúc này bạn sẽ được như hình dưới.
- list-style-type: none; Dùng thuộc tính này để xóa bỏ các dấu chấm xuất hiện do thẻ <li>.
- Thuộc tính position:absolute; quy định sự lệ thuộc của thẻ <ul> menu con vào class top_menu của thẻ <li> của menu chính. Giúp tiêu đề menu chính không dịch chuyển lung tung khi xem các menu con 1.
- Thuộc tính display:none; Để ẩn các menu con (submenu) đi.
- Khi đó ta được thẻ CSS sau:
/*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;
}
- Đến đây menu con đã xuất hiện nhung lại lẹch và xuống dòng như bên dưới:Định dạng lại vị trí sub menu con
/*sub menu list items*/ #main_menu ul li { padding-top:1px; margin-left:-25%; } /*sub menu list anchors*/ #main_menu ul a,#main_menu ul a:hover { color:#ffff00; box-shadow: 3px 3px 2px #888888; width:170px; }padding-top:1px; quy định khoảng cách từ tiêu đề menu dưới với tiều đề menu trên. Nói cách khác là khoảng cách của thẻ <li>
MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :
Hỗ trợ ZALO 24/24 : Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!
Không có nhận xét nào
Một số lưu ý khi bình luận
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.
Để bình luận một đoạn code, hãy mã hóa code trước nhé!
» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !