[TUT+] Navigation Menu - Vertical Navigation Menu

     Tiếp seri bài viết về navigation thì hôm nay mình xin tiếp tục có bài viết về navigation vertical, về cơ bản thì dạng menu này là dạng menu dọc và cũng rất tuyệt nếu bạn muốn có một thanh menu ở bên trái của web và có thể trượt theo khi kéo thanh scroll thì bạn hoàn toàn có thể lựa chọn loại nav này. Với sự sáng tạo của chính mình thì bạn hoàn toàn có thể tạo ra một nav phù hợp cho web của mình và dưới đây mình xin tổng hợp một số bài hướng dẫn mà mình tìm được trên mạng.

1. Orman Clark's Vertical Navigation Menu: The CSS3 Version

TUTORIAL
DEMO

2. A smooth dropdown menu for responsive web design

TUTORIAL AND DEMO

3. jQuery Tendina Plugin Demo

TUTORIAL
DEMO

Read More

[TUT+] Navigation Menu - Responsive Menu

      Trước sự phát triển của công nghệ mà đặc biệt là các thiết bị di động mà ngày nay trở nên hết sức phổ biến thì việc tạo ra một trang web hiển thị tốt trên các thiết bị di động là việc mà các bạn phải nghĩ tới, và hôm nay nhân tut+ về navigation thì mình cũng xin tổng hợp một số kiểu navigation đẹp cho các bạn tham khảo.

1. Simple Responsive Navigation (CSS & jQuery)

TUTORIAL
DEMO

2. CSS3 Responsive Menu (CSS-only)

TUTORIAL
DEMO

3. Convert a Menu to a Dropdown for Small Screens

TUTORIAL
DEMO

4. Responsive Mobile Menu

TUTORIAL
DEMO

5. Big Menus, Small Screens: Responsive, Multi-Level Navigation

TUTORIAL
DEMO

6. Trunk.js

TUTORIAL
DEMO

Read More

[TUT+] Navigation Menu - Side Menu

     Trong bài viết hôm nay mình xin giới thiệu vợ các bạn một loại menu khá độc đáo, với loại menu này các bạn hoàn toàn có thể tiết kiệm tối đa diện tích trang web và dành diện tích đó cho một chức năng khác mà không làm mất đi tính đa năng vốn có của thanh điều hướng lại cực kỳ trang nhã với một button "menu" rất đẹp mắt và đặc biệt hiển thị tốt trên hầu hết các thiết bị di động ngày nay.

1. Perspective Page View Navigation

TUTORIAL

DEMO

2. Transitions For Off-Cavas Navigation

TUTORIAL

DEMO

3. Menu Transition In Effects

TUTORIAL

DEMO

4. Responsive Slide Toggle Menu

TUTORIAL AND DEMO

5. Animated CSS3 Perspective Menu

TUTORIAL

DEMO

6. Closing Door Menu

TUTORIAL

DEMO

7. Google Nexus Website Menu

TUTORIAL

DEMO

8. Slide and Push Menus

 

TUTORIAL

DEMO

9.  Simple YouTube Menu Effect

TUTORIAL

DEMO

10. Animated Border Menus

TUTORIAL
DEMO

11. Circular Navigation

TUTORIAL

DEMO

12. Multi-Level Push Menu

TUTORIAL

DEMO

13. Slick Slide Side Navigation with jQuery and CSS3

TUTORIAL
DEMO

14. Responsive Sliding Side Navigation with jQuery and CSS3

TUTORIAL
DEMO

     Hi vọng bài viết có ích cho các bạn!!!

Read More

[TUT+] Navigation Menu - Simple Menu Bar Navigation

     Chắc hẳn các bạn không là gì với thành men - thanh điều hướng cho website, trong seri bài viết này mình sẽ tổng hợp những menu đẹp mà mình tìm được trên mạng và mình muốn chia sẻ cho các bạn trong bài viết này. Trước tiên chúng ta sẽ đến với đảng menu đơn giản nhất, không quá cầu kỳ nhưng mình vẫn thích loại menu này vì sự đơn giản của nó. Trang web của bạn không có quá nhiều những mục nhỏ, bạn cũng không muốn thanh điều hướng quá phức tạp và làm rối cho người dùng thì đây vẫn là sự lựa chọn tuyệt vời nhất dành cho bạn.

1. Tabbed Chrome and Blue

DEMO

2. Rough Algae Horizontal Menu

TUTORIAL AND DEMO

3. Creative CSS3 Animated Menus

TUTORIAL

DEMO

4. CSS3 Minimalistic Navigation Menu

TUTORIAL
DEMO

5. jQuery Style Menu with only CSS3

TUTORIAL
DEMO

6. Apple.com Menu Using Only CSS3

TUTORIAL

DEMO

7. CSS Menu With Rolling

TUTORIAL AND DEMO

8. Sliding Background Image Menu With Jquery

TUTORIAL
DEMO

9. Rocking And Rolling Rounded Menu With Jquery

TUTORIAL
DEMO

10. Animated Navigation with CSS3 Transitions and Transforms

TUTORIAL
DEMO

11. A Stylish Navigation Menu With jQuery

TUTORIAL
DEMO

12. jQuery Simple Slide Out And Drawer Effect Plugin

TUTORIAL
DEMO

13. jQuery Plugin For Animated Side Icon Menu - DD Icon Menu

TUTORIAL
DEMO


     Hi vọng bài viết có ích cho các bạn!!!

Read More

[TUT+] Navigation Menu - Dropdown

     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

10. Slide Down Box Menu With Jquery And Css3

TUTORIAL

DEMO

11. Dropdown Menu With Jquery

DEMO

12. Unfolding Menu Animation

TUTORIAL
DEMO

13. Depth and Perspective Themed jQuery Accordion

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.

Read More