TẠO MENU NGANG BẰNG HÌNH ẢNH

Có nhiều cách để tạo menu ngang (xem TẠI ĐÂY), hôm nay dunghennessy chia sẻ với các bạn cách làm menu ngang bằng hình ảnh (kiểu 2).

Cũng giống với menu ngang bằng hình ảnh kiểu 1 (xem TẠI ĐÂY), khi bấm vào một hình ảnh "nó" sẽ mở ra một bảng nhỏ (Popup) dẫn bạn đến với trang mà mình đã liên kết đến. Điều đặc biệt ở menu này là khi các bạn rê chuột vào hình ảnh bất kỳ thì ảnh sẽ xoay tròn 360 độ và khi bỏ chuột ra ảnh sẽ trở về vị trí cũ trông khá đẹp mắt...và ngộ nghĩnh. Ở bài viết này, tôi sẽ dùng menu ngang để đăng nhập vào các trang mạng chia sẻ...

Mời các bạn bấm vào thẻ Xem thử phía dưới để trải nghiệm trước nha.

MENU NGANG TRƯỢT THEO BLOG

Menu ngang này thuộc loại đơn giản (không có xổ xuống) nhưng menu này đặc biệt ở chỗ là lúc nào cũng nằm trên đầu trang blog. Khi bạn kéo thanh trượt xuống phía dưới cùng của blog thì nó vẫn xuất hiện ở đầu blog sẳn sàng cho bạn sử dụng.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ Menu ngang này.

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (Kiểu 4)

Tương tự kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY), kiểu 3 (Xem TẠI ĐÂY). Menu ngang này cũng xổ dọc xuống nhiều cấp khi bạn bấm vào một menu chính phía trên.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

TẠO MENU NGANG BẰNG HÌNH ẢNH

Hôm nay, rãnh rồi "mò mẫm" làm được thanh menu ngang bằng hình ảnh. 
Trong giới hạn bài viết này, tôi dùng menu ngang để đăng nhập vào các trang mạng chia sẻ của mình.

Ở menu ngang này, khi bạn rê chuột vào ảnh thì ảnh sẽ được phóng lớn hơn đi kèm với lời chú thích nhỏ. Điều đặc biệt là khi bạn click chuột vào, "nó" sẽ mở ra một bảng nhỏ để bạn có thể đăng nhập vào các trang mạng của mình mà không phải rời khỏi trang Blog hiện tại.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 

TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (Kiểu 3)

Nếu bạn chưa thoả mãn với 2 kiểu menu ngang xổ xuống một cấp (kiểu 1: Xem TẠI ĐÂY, kiểu 2: Xem TẠI ĐÂY.), các bạn có thể sử dụng menu ngang kiểu 3 này.
Với thủ thuật này, khi rê chuột vào một mục bất kỳ trên thanh menu sẽ có một menu con xổ dọc xuống "khá mướt" và khi bạn rê chuột vào thì menu con sẽ đổi màu "khá đẹp".

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 

Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về), còn nếu áp dụng cho các giao diện mặc định của Blogspot thì bạn phải kéo tiện ích này nằm sát trên khu vực bài đăng thì menu con mới xổ xuống được...

MENU DỌC XỔ XUỐNG NHIỀU CẤP

Với thủ thuật dưới đây, trên blog của bạn sẽ có một menu dọc khá đặc biệt, đó là khi bạn rê chuột vào một menu bất kỳ thì nó sẽ xổ ra một số menu con nhiều cấp nữa.
Bạn có thể làm menu con cấp 2, cấp 3...tuỳ thuộc vào link liên kết nhiều hay ít.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 
Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về) không áp dụng cho các giao diện mặc định của Blogspot...

MENU NGANG CÓ LOGO PHÍA TRƯỚC

Cũng giống các menu ngang khác, các tab ở menu này sẽ đổi màu khi bạn rê chuột và sẽ dẫn bạn đến một trang Web/blog nào đó khi bạn bấm vào "nó".

Đặc biệt hơn, trước mỗi tab bạn có thể gắn Logo bất kỳ để minh hoạ cho tiêu đề mà mình gắn trên menu.
Bạn bấm vào "Xem thử" phía dưới để thấy rõ hơn hiệu ứng của menu này.

MENU DỌC CÓ HIỆU ỨNG ĐỘNG (Kiểu 2)

Tiếp theo bài "TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG KIỂU 1" (Xem TẠI ĐÂY). Hôm nay tôi giới thiệu cho các bạn thêm một menu dọc nữa cũng có hiệu ứng động khi rê chuột vào menu.

Cũng không khác gì các menu dọc khác, menu này bao gồm các thanh màu xanh chứa các tên hiển thị liên kết và được sắp xếp theo hình răng cưa, khi bạn rê chuột vào thì thanh này sẽ sáng lên và trượt dài ra về bên trái, khi bạn bấm chuột vào nó sẽ dẫn đến trang mà bạn đã gắn liên kết.

TẠO MENU DỌC CHO HÌNH ẢNH

Với thủ thuật dưới đây, các bạn có thể dễ dàng tạo một menu cho một hình ảnh nào đó. Khi bạn rê chuột vào hình ảnh này thì sẽ có một menu xổ dọc xuống phía dưới hoặc phía trên tuỳ theo vị trí của ảnh. Các bạn có thể áp dụng thủ thuật này để làm liên kết với các blog khác...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (Kiểu 3)

Tương tự kiểu 1 (Xem TẠI ĐÂY) và kiểu 2 (Xem TẠI ĐÂY). Menu ngang này cũng xổ dọc xuống nhiều cấp khi bạn bấm vào một menu chính phía trên.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 2)

Tương tự kiểu 1 (Xem TẠI ĐÂY), menu ngang này sẽ đổi màu Tab khi bạn rê chuột vào.
Khi bạn rê chuột vào một mục bất kỳ trên menu ngang này thì lập tức một nút bấm xuất hiện lướt từ bên trái qua khá mướt. Khi bạn bỏ chuột ra, nút bấm này sẽ chạy ngược về mục đầu tiên. (Thủ thuật này chỉ áp dụng cho blog V2 blog được tải trên mạng về, không áp dụng cho giao diện mặc định của Blogspot)

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 3)

Tương tự kiểu 1 và kiểu 2, menu dọc này cũng xổ dọc xuống các menu con khi bạn bấm chuột vào menu chính nhưng đặc biệt hơn ở chỗ là khi bạn đang xem menu nào thì menu đó sẽ có màu khác (màu đỏ) tất cả menu còn lại sẽ có màu đen...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 2)

Thủ thuật này cũng giống như Kiểu 1 (Xem TẠI ĐÂY). Menu chính sẽ xổ xuống các menu phụ khi bạn click chuột vào nó, click vào lần nữa sẽ rút gọn menu lên... Ngoài ra, trên đầu menu còn có 2 tab "hiện hết menu" để bạn tiện sử dụng và tab "Rút gọn menu" để bạn đóng menu lại cho gọn khi hết sử dụng...

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

MENU DỌC XỔ XUỐNG CÁC MENU CON (Kiểu 1)

Để đáp ứng lời yêu cầu của các bạn, bắt đầu từ bài này mình sẽ lần lượt chia sẻ đến các bạn một số mẫu MENU DỌC XỔ XUỐNG CÁC MENU CON.

Với thủ thuật này, trên blog các bạn sẽ có một menu dọc khá đẹp, khi rê chuột vào mỗi menu sẽ có một bản tóm tắt giới thiệu về menu này. Khi bạn bấm chuột vào menu sẽ xuất hiện một số menu con phía dưới, bấm lần nữa thì menu này sẽ rút gọn lên... Bạn bấm vào Xem thử phía dưới để thấy rõ thủ thuật menu dọc này.

MENU NGANG ĐỔI MÀU TAB KHI RÊ CHUỘT (Kiểu 1)

Trước đây, tôi có post một bài về các mẫu menu ngang (Xem TẠI ĐÂY). Hôm nay, tôi "post" thêm một mẫu menu ngang đơn giản nhưng khá đẹp, menu ngang này sẽ có hiệu ứng đổi màu các Tab khi bạn rê chuột vào.

Menu này không có menu con nên rất thích hợp với các blog có ít nhãn. Mới bạn bấm vào "Xem thử" phía dưới để thấy rõ menu ngang này.

MENU NGANG TIỆN ÍCH

Chỉ với một đoạn code ngắn và đơn giản, blog của bạn sẽ có một thanh menu ngang khá đẹp chứa các tiện ích khá thông dụng cho một Web/Blog.
Các tiện ích bao gồm: Đồng hồ, các bảng dịch ra tiếng nước ngoài, các trang mạng chia sẻ nổi tiếng, nút bấm lên đầu trang xuống cuối trang...và cuối cùng là nút thu gọn cho menu.

TẠO MENU NGANG CÓ MENU CON XỔ XUỐNG MỘT CẤP (KIỂU 2)

Với thủ thuật này, các bạn có thể tạo cho mình một menu ngang màu đen, bên phải của mỗi menu có hình mũi tên, khi rê chuột đến mũi tên này thì sẽ xuất hiện một dãy menu dọc được xổ xuống phía dưới.

TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG

Trước đây, tôi có chia sẻ với các bạn các mẫu menu dọc cho Blogspot (xem TẠI ĐÂY), hôm nay tôi giới thiệu đến các bạn một mẫu menu dọc khá đẹp, khi sử dụng menu này, bạn rê chuột vào một menu bất kỳ thì menu đó sẽ có hiệu ứng lật và chuyển đổi màu khá mướt. Các bạn bấm vào Xem thử phía dưới để xem trước nha.

TẠO MENU NGANG CÓ MENU CON XỔ NGANG

Trước đây, tôi có chia sẻ với các bạn cách tạo menu ngang có nhiều menu con xổ dọc xuống (kiểu 1) và (kiểu 2), hôm nay tôi chia sẻ thêm cho các bạn menu ngang có menu con xổ theo chiều ngang.

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)

Trước đây, tôi có đăng bài TẠO MENU  NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1), với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.