Phần 1: Một số lưu ý trước khi bắt đầu:
- display:none; ẩn module đi
- display:block; hiện module vào 1 block
- display:inline; xếp các module vào cùng hàng ngang (để tạo menu ngang)
margin: và padding: là 2 thuộc tính sắp xếp vị trí tương đối của các đối tượng với nhau
width: là thuộc tính qui định chiều rộng của module
ngoài ra còn 1 số thuộc tính css khác nữa để trang trí cho menu. Bạn có thể tìm hiểu chi tiết tại bài viết CSS căn bản
<html> <head> <style type='text/css'> Đây là vị trí đặt css </style> </head> <body> Đây là vị trí đặt menu </body> </html>
Phần 2. Bắt đầu vào việc nào
1- Tạo Menu chính.
- Đâu là phần đầu tiên của Menu chính mà mọi người nhìn thấy trong chế độ hoạt động (tức là khi chúng ta chưa dê chuột vào). Phần này bao gồm một danh sách các Tên được sắp xép liên kề nhau và theo chiều ngang.- Các tên này được chứa trong các Class và Id khác nhau. Tên của các id và class này có thể khác nhau tùy theo nhà thiết kế nhưng về cơ bản cấu trúc HTML của nó là như nhau:
<ul id='menu'> <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a></li> <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a></li> </ul>- Nếu chỉ dừng ở đây thì các bạn sẽ chỉ nhận được một cột hàng dọc như hình dưới:.
- Để xóa các dấu chấm ở đầu mỗi menu chúng ta sử dụng
ul {list-style-type:none;}- Xếp theo hàng ngang
li.main-menu {float:left}Ở đây mình để các tiêu đề load qua trái. Các bạn có thể để load qua phải hoặc trung tâm bằng cách thay đổi left thành center hoặc right.
- Để bỏ phần gạch chận các bạn dùng mã sau:
ul#menu a {text-decoration:none; padding:0 5px;color:#990066;font-size:20px}Mã padding:0 5px là khoảng cách giữa 2 tên của menu phần này bạn có thể thay đổi. và #990066 là màu chữ. font-size:20px là kích thước chữ trên menu
- Thêm nền cho menu và khi dê chuột vào:
#menu{ background:#999; float:left; width:100%; }Thuộc tính float:left; bạn không thể bỏ qua vì như thế nền sẽ không xuất hiện, và background:#999; là màu nền
- Đến đây để ý các bạn sẽ thấy tên các menu cách các lề của trình duyệt một khoảng nhìn khá sấu khắc phục bằng cách sử dụng đoạn mã sau:
ul, li {margin:0; padding:0}-
2- Tạo menu con cấp 1.
<ul class='menu-1'> <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li> <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li> </ul>- Khi đó bạn sẽ được như sau:
<ul id='menu'> <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a> <ul class='menu-1'> <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li> <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li> </ul> </li> <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a> <ul class='menu-1'> <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li> <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li> </ul> </li> </ul>Đến đây ta được 2 cột như sau:
ul.menu-1{display:none}
li.main-menu:hover ul.menu-1 {display:block;z-index:100}
Ở trên mình thêm cả thuộc tính z-index:100 để menu hiển thị tốt với những blog nền có thuộc tính nổi.
li.main-menu {position:relative;} ul.menu-1 {position:absolute;width:200px;background:#999;}
3- Tạo menu con cấp 2.
Bây giờ ta sẽ tạo các menu con (sub-menu) cho menu chính. Ta chỉ cần thêm các đoạn code bên dưới vào trước thẻ đóng </li> (phần mình tô màu vàngở trên).<ul class='menu-2'> <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li> <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li> </ul>
- Khi đó ta được như sau:
<ul id='menu'> <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a> <ul class='menu-1'> <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a> <ul class='menu-2'> <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li> <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li> </ul> </li> <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a> <ul class='menu-2'> <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li> <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li> </ul> </li> </ul> </li> <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a> <ul class='menu-1'> <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a> <ul class='menu-2'> <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li> <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li> </ul> </li> <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a> <ul class='menu-2'> <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li> <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li> </ul> </li> </ul> </li> </ul>
ul.menu-2 {display:none;background:#999} li.sub-1:hover ul.menu-2 {display:block}background:#999 là màu nền của sub menu 2
li.sub-1 {position:relative;} ul.menu-2 {position:absolute;}- Lúc này xuất hiện hiện tượng menu đè lên nhau:
ul.menu-2 {left:200px; top:0px}
ul.menu-2 {width:200px;}
4. Menu Drop 3 cấp trở lên.
5. Rút gọn css.
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 ý !