• fans
  • 1036 reader
  • followers
Flyout Menu với CSS
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 19:14 phút
  • File size: 62.2 MB
  • Yêu cầu: Căn bản HTML & CSS

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.

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);
}

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Joli

    Anh cho em hỏi cái này nữa nha, cảm ơn anh trước. (em hỏi ngoài chủ đề này tí)

    hi anh. cho em hỏi có video nào chỉ cách tạo ra các tab ở phần chi tiết như, trang “http://vinasago.com/Products/DetailsProductElectric/201206301410571057″

    mục “hình ảnh” và “mô tả” …kg anh?, khi lick vao tab nao thi ra noi dung cua tab đó.

  • Joli

    có cách nào để bên IE cũng hiểu bo góc kg anh?

    mấy cách bo góc này chỉ áp dụng cho bên firefox..mà bên IE kg hiểu.

    • khiemnm

      IE thì không bạn ạ. Nhưng nếu bạn áp dụng cách cổ điển thì có thể. Nhưng làm điều này ko hay cho lắm. Với IE mình ko bao giờ quan tâm đến chuyện bo góc cho nó.

  • khiemnm

    Bạn chú ý nhé, vì firefox và chrome mới cập nhật phiên bản và thống nhất nên hiện giờ -moz-border-radius, -webkit-border-radius sẽ được thay thế bằng border-radius

  • Joli

    Anh cho em hỏi là lệnh”-moz-border-radius:8px 8px 0px 0px;
    -webkit-border-radius:8px 8px 0px 0px; ”
    Sao em thấy nó kg bo góc khi ra trình duyệt.
    nhưng khi em thay bằng
    “border-radius:8px 8px 0px 0px; ”
    thì khi duyệt thì lại thấy bo góc(em dùng trình duyệt firefox)

  • nguyễn Lập Thành

    Dear Demon Warlock!
    Em cảm ơn anh rất nhiều. anh chỉ hay và dễ hiểu. và anh có thể chỉ em làm menu flyout đa cấp đc ko. bây giờ là menu 2 cấp, thêm 1 cấp nữa mình phải làm sao!

  • http://khuong.vacau.com thanh khuong

    cho e hỏi là anh đang dùng editor gì, bundle anh nói sử dụng sao ạ, vd như gõ xong cái key word rồi thì ấn tiếp ctrl space hay sao ạ?
    thanks a

  • khoa

    các bạn cho mình hỏi bác chủ nhà có làm menu fly down ( kiểu như bấm vô nó chạy xuống đó – chứ không phải chạy qua phải – mà cũng không phải là dropdown) không nhỉ các bác, nếu có các bạn cho mình link nha .

  • phạm thị hòa

    like

  • Thu Hương

    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.

  • sunglass

    cho e hỏi là anh đang dùng editor gì, bundle anh nói sử dụng sao ạ, vd như gõ xong cái key word rồi thì ấn tiếp ctrl space hay sao ạ?
    thanks a.

  • http://www.izwebz.com/video-tutorials/css-html/flyout-menu-voi-css/ Help..!

    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.:)

    • hieu

      cho cái z-index của nó lớn hơn phần main là đc :D

  • http://www.izwebz.com/video-tutorials/css-html/flyout-menu-voi-css/ Vượng

    Thật là cảm ơn..!:D

  • trung

    hmweb rat hay,,anh DW huong dan de hieu,,vui nua,,hj,,thanks,,!!

  • http://cdcntn.net Lê Văn Kiên

    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 đó :D. Thank anh nhiều!

  • Dong

    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!

  • HuyDN

    Nay mầy mò cuối cùng cũng tìm được cách gõ tiếng Việt. anh DW ah :D

  • Nguyễn

    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.

    • tanlevis

      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

  • http://thinhnt.webchuyennghiep.net/ Thịnh Nguyên

    EM CẢM ƠN ANH NHIỀU! ANH ĐÃ CỨU EM RỒI

  • son0nline

    link file whateverhover.htc die mất rồi ai muốn down có thể vào đây

    http://www.mediafire.com/?n38msrm37t75xk0
  • Hjzumi

    anh gì pro ơi, thank anh nhiều nhiều nhe’, nhờ anh mà e biết được nhiều thứ hay

  • giang

    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!

  • eminem3979

    Bác pro đang sử dụng chương trình gì để viết thế chỉ mình với

  • http://none quochuy

    anh pro qua, khong biet bao gio em moi gioi duoc nhu anh day :((, anh lam em nan chi’ qua

  • http://www.izwebz.com Demon Warlock

    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.

  • http://koco anhvan

    CSS Image Switcher cua anh lam sao ko chay duoc tren trinh duyet IE?

    • nhtera

      @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.

  • Hạnh

    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!

    • nhtera

      @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

  • thần gầy

    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

  • http://hoasibiem.com phong

    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.

  • http://hoasibiem.com phong

    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

  • minh duc

    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. :D

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives