[TUT+] Navigation Menu

Trong loạt bài này mình sẽ tổng hợp những loại nav menu mà mình thấy đẹp kèm theo code của nó, điều này cõ lẽ sẽ giúp ích ít nhiều cho ae khi phải tìm một giao diện phù hợp cho web của mình.

Và trong bài đầu, mình xin giới thiệu dropdown menu. Với sự phát triển của CSS3, giờ đây việc làm một dropdown menu trở nên rễ ràng hơn rất nhiều và dropdown ngày càng phổ biến đối với người dùng web và người làm web.

1. Simple css3 dropdown menu

Cái này chỉ là một bản demo sơ sài mà mình tìm được trên mạng, các bạn chịu khó chỉnh sửa đi là ok.

DEMO

2. Vimeo top navigation

Đây là một sáng tạo khác của dropdown, nó là nav của trang vimeo nổi tiếng, nhưng hình như giờ vimeo nó thay đổi rồi, nhưng vẫn một dạng thôi.

DEMO

3. CSS3 Dropdown Menu

Ở bản này, nó thêm icon cho các thanh ul, li nên khá đẹp mắt.

DEMO

4. Ajax Menu Dropdown

Cái này sử dụng Ajax, thực sự rất thú vị.

DEMO

5. Horizontal Drop-Down Menu

Cái này thì dùng cho những trang có quá nhiều nội dung mà bạn muốn đưa chúng lên hết thanh nav.

DEMO

6. CSS Swinging Panel Menu

Cái này thực sự làm mình ấn tượng, nhờ sử dung JS mà nó có sự chuyển động rất hay, sao bạn không thử?

DEMO

7. Dropdown color

Cái này là do mình code, lang thang trên mạng thấy có cái kiểu này hay hay nên code để giới thiệu với mọi người, cũng đáng để thử chứ? Các bạn chịu khó thêm mấy cái icon nữa vào thì tuyệt.

DEMO

8. Tooltip Menu

Cái này cũng là một sự lựa chọn không tồi.

DEMO

9. CSS3 Mega Drop-Down Menu

Cái này cũng như cái Ajax, cũng rất tuyệt, đúng không?

TUTORIAL

DEMO

14. Colorful CSS3 Animated Navigation Menu

TUTORIAL
DEMO

Hi vọng bài viết của mình hữu ích với ai đó, rất mong nhận được sự ủng hộ từ các bạn.

13 tháng 7, 2014