Flyout Menu với CSS
- September 1, 2009
- 57 comments
Giống như Drop Down menu Flyout menu cũng được sử dụng rộng rãi trên nhiều trang web. Đặc biệt là những trang web có nhiều nội dung và cần nhiều tầng menu để trình bay hết nội dung. Trong tutorial này, tôi sẽ hướng dẫn bạn cách tạo ra flyout menu hoàn toàn bằng CSS.
Thời lượng:19:14
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 62.2MB
Hack IE 6: Để menu có thể hiển thị tốt trên IE 6 bạn cần download file whateverhover.htc và trong phần CSS bạn thêm
div#mainNav ul {
behavior: url(whateverhover.htc);
}
like
tuyệt quá. Mình cần gì, muốn hỏi gì thì ở trên izwebz đều có hết, tuyệt thật. Cảm ơn anh DW rất nhiều. Em thật sự thần tượng anh rùi. hì hì. Chúc anh luôn thành công và hi vọng anh sẽ gắn bó lâu hơn nữa với izwebz.
Tại sao tạo cái menu vào trong web Menu cấp 2 bị ẩn vào trong phần main ai biết giúp dùm với nghĩ mãi không ra.:)
Thật là cảm ơn..!:D
hmweb rat hay,,anh DW huong dan de hieu,,vui nua,,hj,,thanks,,!!
Anh DW chỉ hay quá. Rất dễ hiểu mà lại hài nữa. Có khi anh lại sắp đc làm khách mời VTV3 như Cù Trọng Xoay vì khiếu hài hức đó
. Thank anh nhiều!
Sào đưa vào web, cả trang nó lại lệch về phía bên trái nhỉ? ai giúp với!
Nay mầy mò cuối cùng cũng tìm được cách gõ tiếng Việt. anh DW ah
A DW có thể giúp e chút về cái tut này được không? Tình hình là e làm menu đa cấp fly out như thế này nhưng nó chỉ đúng với 2 cấp thôi. Nếu có từ 3 cấp trở lên thì khi hover lên cấp root(trang chủ,..) thì tất cả các cấp con(gồm cấp 2,3,4,…) đều hiện ra hết luôn. Vậy làm thế nào để nó đệ qui lai giống như cấp 1 và 2(trường hợp chỉ có 2 cấp như a demo). THANKS o lot.
Mình nghĩ bạn nên dùng luật css sau đê style nó: #container > ul.
Luật này chỉ ảnh hưởng đến các con của #container k ảnh hưởng tới các cháu của nó, nên khi hover #container thì trong luật này ta thêm dòng display:block.
Hope it help
EM CẢM ƠN ANH NHIỀU! ANH ĐÃ CỨU EM RỒI
link file whateverhover.htc die mất rồi ai muốn down có thể vào đây
anh gì pro ơi, thank anh nhiều nhiều nhe’, nhờ anh mà e biết được nhiều thứ hay
Tuyệt vời. Anh DW siêu quá. Mong a làm thật nhiều cái tutorial cho bọn e được mở mang tầm mắt với nha!
Bác pro đang sử dụng chương trình gì để viết thế chỉ mình với
anh pro qua, khong biet bao gio em moi gioi duoc nhu anh day
(, anh lam em nan chi’ qua
Có nhiều khi tôi chỉ muốn hướng dẫn các bạn sử dụng CSS và các thủ thuật của nó. Không phải lúc nào cũng làm cho tất cả các trình duyệt được đặc biệt là IE.
Nhưng nếu muốn hack thì cũng hack được, nhưng như đã nói ở trên, đây chỉ là một ví dụ minh họa.
CSS Image Switcher cua anh lam sao ko chay duoc tren trinh duyet IE?
@anhvan sao hỏi lộn chỗ vậy nè, bài này là Flyout Menu sao hỏi bài khác vào đây.
Demon Warlock!
Tôi đã làm y chang như anh đã chỉ dẫn, trên firefox thì chạy rất ổn rồi nhưng trên IE (thậm chí cả IE8) thì menu chạy linh tinh hết (ul cấp 2 chạy đúng vị trí nhưng ul cấp 1 bị lệch vị trí). Tôi đã copy đoạn crack IE ở phần đầu nhưng trong file css của tôi thì “behavior” bị gạch chân đỏ và báo “Validation (CSS 2.1) ‘behavior’ is not a known CSS property name”. Cảm ơn anh rất nhiều!
@Hạnh
Bạn cần đưa code của bạn nên để test thử chứ, demo của anh DW chạy tốt trên IE8 mà. Hơn nữa đã hack cho IE6 thì khó lòng viết css đạt chuẩn css2.1
em thấy trong bài này có đề cập tới việc hack hover cho ie
nhần tiện đó sao anh không làm một Tutorials về hack css cho ie, safari
Cái file whateverhover.htc ở đây không down đc, mình có thể sử dụng whateverhover.htc của Dropdown menu trong trường hợp này được không.
Rất cảm ơn bạn. Hướng dẫn của bạn rất chi tiết và hữu ích.
P/S: trong clip mình thấy bạn nhấp chuột liên tục để đổi chế độ gõ tiếng Việt. Tuy nhiên nếu bạn dùng Unikey thì chỉ cần bấm Ctrl+Shift để chuyển đổi chế độ rất tiện lợi
Mong bác sớm có 1 bài hướng dẫn làm menu 3 cấp dạng:
đầu tiên là kiểu dropdown menu, sau đó di chuột vào nó ra fly-out menu
hoặc flyout menu đa cấp.