Hướng dẫn tạo Menu Slide Down Box với jQuery và CSS3

[LiBee KS]

Bài này mới được dịch nhé


Trong bài viết này tôi sẽ hướng dẫn các bạn tạo ra một menu slide box cực kỳ độc đáo. Ý tưởng để tạo ra menu là “mỗi khi bạn rê chuột vào mỗi box menu thì lập tức nó sẽ trượt ra một mục menu con đồng thời sẽ xuất hiện một hình ảnh nhỏ với những hiệu ứng chuyển động mượt mà”. Ngoài ra, bạn cũng sẽ tạo cho các menu con trượt sang trái hoặc qua phải tùy vào vị trí của mục menu con mà người dùng ra chuột qua.
Demo online:

Code:

http://tympanus.net/Tutorials/SlideDownBoxMenu/

Lưu ý bạn cần phải tải thư mục hình kèm theo để thực hiện bài hướng dẫn. Trong bài viết này, chúng ta sẽ sử dụng Plugin jQuery Easing và những hình ảnh tuyệt đẹp của tác giả có tên tibchris.

Bước 1: Xây dựng mã html
Đối với cấu trúc HTML, chúng ta sẽ sử dụng một danh sách không theo thứ
tự ( thẻ <ul>) để chứa các mục liên kết chính và một phần tử
<div> chứa các mục menu con.

Nếu không có mục menu con thẻ <div> có thể dễ dàng bị rời ra.
Khi mới bắt đầu, hình ảnh sẽ không hiển thị vậy nên chúng ta sẽ gán giá
trị chiều rộng và chiều cao của nó là bằng 0 trong CSS.

---

Bước 2: Khai báo CSS

Chúng ta sẽ bắt đầu khai báo CSS cho phần tử thẻ <ul> trước tiên:

Chúng ta sẽ loại bỏ các thuộc tính text-decoration và outline được khai báo mặc định trong các trình duyệt đối với tất cả các phần tử liên kết trong menu của chúng ta.

Mục menu của chúng ta sẽ được thả trôi về phía tay trái và có vị trí tương đối vì vậy chúng ta sẽ sử dụng thuộc tính position: absolutecho
các phần tử nằm bên trong. Nếu chúng ta không gán giá trị đó, các phần
tử con nằm bên trong sẽ được so sáng tương đối với toàn bộ trang dẫn
đến sẽ tạo ra kết quả không như chúng ta mong muốn.

Tiếp theo, chúng ta sẽ khai báo cho các phần tử liên kết chính nơi
chúng ta có hai phần mở rộng cho phần nội dung của mục menu con.

Chú ý thuộc tính z-index chúng ta dùng để xác định thứ tự cho tất cả các phần tử quan trọng luôn được nằm ở lớp trên cùng trong trang web.
Chúng ta sẽ sử dụng hiệu ứng như gương với một gradient bán trong
suốt. Khi bạn sử dụng một nền pattern (như pattern gỗ được sử dụng trong
bản demo) nó giúp làm cho hiệu ứng nhìn ấn tượng hơn. Hãy thử với các
mẫu pattern khác nhau mà bạn có – việc làm này có thể giúp cho bạn
chọn ra được mẫu pattern phù hợp với thiết kế của mình hơn !
Bạn cũng có thể thêm một ít hiệu ứng bóng đổ – thay đổi các giá trị 0px
0px 4px #000 bằng 2px 2px 6px #000 sẽ tạo ra được hiệu ứng đó.
Khai báo mã CSS cho các hình ảnh như dưới đây:


Chúng ta cần tạo thêm một hiệu ứng animation cho hình ảnh khi chúng
xuất hiện từ phía bên dưới đi lên, đó là lý do tại sao chúng ta phải
định vị trí của nó là tuyệt đối bằng cách sử dụng “đáy” như một điểm
tham chiếu. Chúng ta cũng sẽ thêm vào thuộc tính box-shadow.
Khai báo hai giá trị đầu tiên bằng 0, làm cho bóng trải đều xung quanh
hình ảnh. Chúng ta cũng sử dụng cách này cho các phần tử liên kết. Thuộc
tính box-shadow có thể được xem như là một thủ thuật nhỏ, bất cứ khi nào bạn muốn tạo ra một hiệu ứng đường viền nhẹ. Ưu điểm của thuộc tính box-shadow
là nó thực sự tạo được hiệu ứng bóng đổ như mong muốn – mà bạn không
cần phải cân nhắc tính toán đến chiều rộng hoặc chiều cao của các yếu tố
nằm bên trong. Nhưng không hay, hiện nay CSS3 chưa được hỗ trợ trong
trình duyệt IE.
Bây giờ đến phần khai báo CSS cho những vùng mở rộng bao quanh phần nội dung của mục menu con:

Nếu phần nội dung của mục menu con lớn hơn, bạn cần phải sửa lại cho phù
hợp với các giá trị này. Hãy chắc chắn rằng các giá trị được sửa lại
cũngphải phù hợp với các giá trị animation được khai báo trong mã
JavaScript.
Tiếp theo, chúng ta xác định hình dáng cho hộp màu xám được trượt
xuống. Chúng ta cung cấp cho nó một chiều cao là bằng 0 và vị trí của nó
đã được khai báo, vậy nên bây giờ chúng ta chỉ cần tăng chiều cao của
nó trong khai báo hiệu ứng animation.

Chúng ta tiếp tục khai báo mã CSS cho các vùng mở rộng và các liên kết trong các box:

Khai báo cho phần nội dung:

Mục menu con ban đầu sẽ được ẩn dưới các box màu xám. Sau đó chúng ta sẽ
cho nó di chuyển sang bên phải hoặc bên trái tùy thuộc vào nơi chúng
ta đang có. Trong bài hướng này tôi muốn khi ra chuột qua mục menu cuối
cùng nó sẽ trượt qua bên trái còn tất cả các mục menu khác thì khi ra
chuột qua nó đều sẽ trượt qua bên phải.

Liên kết đầu tiên trong mục menu con nên được khai báo giá trị margin-top:

Vậy là phần khai báo mã CSS đã hoàn thành, giai đoạn cuối cùng chúng ta
cần làm là thêm các mã javascript để tạo ra các hiệu ứng tuyệt vời.

---

Bước 3: Thêm mã javascript

Khi con trỏ chuột của chúng ta rà vào một thành phần của menu, hình ảnh sẽ được phóng to và các thành phần nằm trong hai class sdt_active và sdt_wrapsẽ hiển thị. Nếu phần tử con nào có class sdt_box
thì nó sẽ được trượt sang bên. Mục menu cuối sẽ được trượt sang bên
trái còn tất cả các mục menu còn lại sẽ đều sẽ trượt sang bên phải khi
rà chuột qua.

Và menu slide box xuất hiện ! Tôi hy vọng bạn thích hiệu ứng menu này và
hy vọng các bạn đã tìm hiểu được một điều gì đó hữu ích! P/S. Nó trông
sẽ cool hơn trong trình duyệt Google Chrome.

Theo Tympanus

[baoden.mango]

khá là hay nhưng mà làm hơi công phu