Hướng dẫn làm menu đổ dọc xuống - 27 November 2011 - Thủ thuật - Đừng Sợ Ma
Thứ tư, 2017-03-29, 11:21 AM
Chào mừng Khách | RSS
Trang chủ | Thủ thuật | Đăng kí | Đăng nhập
Về trang chủ
DUNGSOMA
XE
Ảnh
Ngọc Trinh mặc bikini trên tạp chí Thái
Bảo Trân rạng ngời với gu đen - trắng
Tạo lời chào khi khởi động Window (Trước Welcome)
Cách cài idm cho firefox 4 dễ dàng
XE
N
Bình luận mới
барабаны скачать торрент ...

астрал скачать бесплатно ...

Tìm kiếm
Liên kết
Blog FD
Vinh's info
BlOg Namkna
Xây nhà nhỏ
Kiếm tiền trên mạng
Game di dong
Tai game mien phi
Đặt liên kết>>
Thống kê

Tổng số người đang online: 1
Khách online: 1
Thành viên online: 0
dungsoma
Trang chủ » 2011 » Tháng 11 » 27 » Hướng dẫn làm menu đổ dọc xuống
Bấm LIKE để nhận thủ thuật mới nhất
2:15 PM
Hướng dẫn làm menu đổ dọc xuống

Hiện trên mạng có rất nhiều trang web share những code làm menu đổ dọc xuống hay còn gọi là drop menu. Nhưng chắc nhiều bạn chưa biết tạo menu đó như thế nào.Hôm nay dungsoma.dmon.com sẽ giúp các bạn biết cách tự tạo cho mình một drop menu.

 

 

Bước 1 - Tạo Menu

Mình sẽ sử dụng các code <ul> </ ul> để tạo ra hai cấp của các menu.
Cấp đầu tiên sẽ được menu chính. Cấp thứ hai sẽ có các menu phụ.

Mình sẽ sử dụng hai id chọn khác nhau là để xác định hai cấp độ menu. id =  một trình đơn chính. Đơn Cấp Một sẽ được hiển thị trên menu. id = cấp hai sẽ được sử dụng cho tất cả các trình đơn phụ mà chúng ta khai báo cái này sẽ ẩn. hiển thị khi rê chuột lên mục trình đơn chính.Dưới đây là mã cho trình đơn Level 2. Dán mã này vào phần thân của trang của bạn.

 

<ul id=level-one> <!-- For creating the main menus. -->
<li>First</li>
<li>Second 
 <ul id=level-two> <!-- For creating the sub menus. -->
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 <li><a href=#>sub-Second</a></li>
 </ul>
</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul> 
 
Bước 2: Trang trí cho menu chính

1 ul#level-one{

2 background:

3 #FFFFFF url("images/menu-back.png") repeat-x bottom left;;

4 background:

5 -moz-linear-gradient(top, #FFFFFF, #f0f0f0);

6 background:

7  -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0));

8 line-height: 36px;

9 list-style: none ;

10 position: relative;

11 width: 90%;

12 height: 36px;

13 }

 

 

Giải thích: 

Dòng 1: tên menu

Dòng 3: Màu nền menu ví dụ #00000 Hoặc chọn nền là ảnh chèn link ảnh vào images/menu-back.png"

Dòng 7: Thay đổi màu sắc của menu từ dưới cùng bên trái trở đi, ở ví dụ trên menu thay đổi màu từ trắng đến xám, bạn có thể chọn màu khác đẹp hơn.

Dòng 8: Đây là chiều cao của menu con

Dòng 10: Vị trí tương đối

Dòng 11: độ rộng của menu

Dòng 12: chiều cao menu chính

 

Bước 3: Thiết kế menu con

 

 ul#level-two{
 background:
 
 #FFA500 url("images/menu-grad.png") repeat-x;
background:
 -moz-linear-gradient(top, #FFA500, #FF4500);
background:
 -webkit-gradient(linear, left top, left bottom, from(#ffa500), to(#ff4500));
display: none;
list-style: none ;
margin: auto;
padding: 12px;
position: absolute;
width: 200px;
} 

 

Muốn thêm bao nhiêu menu con vào 1 menu cha cỉ cần sử dụng thẻ

<li> </li>

Bước 4: Tạo hiệu ứng

 

ul#level-one li:hover > ul#level-two{
 display: block;
} 

Bước 5: Thay link vào # cho phù hợp.

 

Thể loại: Thiết kế website | Lượt xem: 641 | Người gởi: admin | Tags: menu | Đánh giá: 5.0/1
Tông số bình luận: 0
Chỉ thành viên mới được bình luận
[ Đăng kí | Đăng nhập ]
Thiết kế bởi: nguoichonggia8311 2011-2017 Powered by uCoz