post image

Flyout Menu với 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.


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);
}
Get the Flash Player to see this content.

«

»

35 Comments

( Comment bài này )
  1. Không hoạt động trên IE 6 :p

  2. Đúng rồi, nhưng lỗi này có thể hack được bằng java hoặc sử dụng .htc file và link đến nó trong style sheet.

    Chỉ có điều IE6 giờ cũng ít người xài :p cho nên tôi cũng lười :D

  3. Forevernone says:

    Hay quá. Cám ơn bạn đã chia sẻ :)

  4. nguyen thanh trung says:

    website nay bo ich qua ,cam on ban nhe

  5. học hỏi says:

    nè bác DW có thể cho em biết có thể làm menu 2 cấp bằng CSS ko tức là menu có dạng tree ấn vào cái cha thì xổ ra 1 loạt cái con bên dưới ko
    giống như phần mềm AllyNova Tree Menu v2.4 có thể tạo ra bằng javascript ý

  6. Lananh says:

    Cái này dùng Javascrip + CSS hoặc jquery + CSS. Anh Demon Warlock đang làm tutorial này mà bạn. Không biết nên dùng cách nào thì tốt hơn… Javascrip và jQuery có gì khác nhau không…

  7. billle says:

    Vậy giờ muốn các menu con ko hiện ra bên phải, mà hiện bên dưới thì làm sao bạn? Thanks trước bạn hen!

  8. Hoang Long says:

    Thì bạn xem bài dropdown menu ý.

  9. billle says:

    ko. tạo menu giống như thế này nè: http://it.dlu.edu.vn/Default.aspx

  10. À! cái đó là một hiệu ứng khác của jQuery. Anh sẽ có tut về cái đó trong một ngày gần đây.

  11. DontAsk says:

    -moz-border-ratius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;

    Anh xem giúp em,2 cái này hình như ko có tác dụng anh à.

    À anh cho em hỏi Anh dùng soft gì mà chỉnh CSS nó thay đổi luôn vậy a.

  12. Ha Thanh Son says:

    -moz-border-ratius:5px 5px 0px 0px;
    -webkit-border-radius:5px 5px 0px 0px;
    Anh xem giúp em,2 cái này hình như ko có tác dụng anh à.
    À anh cho em hỏi Anh dùng soft gì mà chỉnh CSS nó thay đổi luôn vậy a.

  13. Thanh Long says:

    Hai thuộc tính đó chỉ làm việc với trình duyệt firefox, chrome và safari thôi.

    Bác DW sử dụng addon của FF là web developer toolbar.

  14. Hong Tai says:

    Một trang web bổ ích. cám ơn bạn

  15. kenichifc says:

    Bài viết rất hay….
    E muốn hỏi anh về cách làm Menu như thế này :
    Link1:http://i156.photobucket.com/albums/t6/dinhcoich/Menu-1.jpg

    Link2:http://i156.photobucket.com/albums/t6/dinhcoich/MENUok.jpg

    Thanks anh rất nhiều ! Hi vọng sẽ nhận dc trả lời sớm nhất từ anh ^^!

  16. Menu dạng này Anh có video rồi mà. Em xem video tạo accordion menu với jQuery nhé.

  17. thanh son says:

    khi dung IE sao menu con khong hien ra duoc vay? Con khi chay bang firefox thi lai hien duoc

  18. Aliza says:

    (-_-) Thanks

  19. daopro says:

    hay dã man, làm thêm nhìu nhìu những video khác mà có ứng dụng css thêm nữa đi tác giả ơi

  20. chung says:

    phần CSS:
    /*css cua trang chinh*/

    #container {
    width: 750px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
    }
    #header { height: 150px;
    background: #DDDDDD;
    padding: 0 0px;
    }
    /*cac thanh phan cua header*/
    #logo{
    float: left;
    height: 150px;
    width: 192px;
    background: #345232;
    }
    #banner{
    height: 110px;
    width:550px;
    background: #110022;
    margin: 0 192px;
    }
    #navigation {
    float: left;
    height: 35px;
    width: 550px;
    padding: 0px;
    margin: 0px 194px;
    background: #abdcad;
    }

    ul li {
    float: left;
    list-style: none;
    }
    li a{
    font-weight: bold;
    text-decoration: none;
    padding: 0em 6px;
    }
    li a:hover{
    color:white;
    background: #75A2B9;
    }
    #navigation{
    float: left;
    margin:
    }
    #header h1 {
    margin: 0;
    padding: 10px 0;
    }
    #sidebar1 {
    float: left;
    width: 192px;
    background: #EBEBEB;
    padding: 15px 0;
    }
    #sidebar1 h3,
    #sidebar1 p {
    margin-left: 10px;
    margin-right: 10px;
    }
    #mainContent {
    margin: 0 1.5em 0 13em;
    }
    #footer {
    padding: 0 10px;
    background:#DDDDDD;
    }
    #footer p {
    margin: 0;
    padding: 10px 0;
    }
    Phần index.html

    New Document

    <!– header –>
    logo

    banner

    Trang chủ
    Xem điểm
    Chương trình đào tạo
    Đăng kí

    sidebar1 Content

    Main Content

    Footer

    Anh xem giúp em vẫn chưa hoạtđộng chính xác!

  21. nhtera says:

    @chung lần sau đừng post cả đống code css lên thế này . css thì phải gắn với html chứ :D . Bạn up file của bạn làm rồi post link lên đây hoặc gửi mail cho anh DW .
    Làm menu này thì phải dựa vào 2 cái chính: một là thuộc tính position trong css và hai là khi bình thường sẽ ẩn submenu đi và khi hover sẽ hiện nó lên .Đó là những ý chính bạn cần xoay quanh để làm nó :D

  22. chung says:

    link file php và css day:http://www.mediafire.com/?sharekey=9c03a2ae4efdd2c3ab1eab3e9fa335caf4b1b9d6aec90e67
    mọi người xem phần menu khi đưa chuột vào nó hiển thị hover không chuẩn, mình muốn nó chỉ hiện thị vừa khít phần navigation thôi ( cách làm là đưa text vè giữa, nhưng mình chưa làm dc)

  23. Anh có thể hướng dẫn em làm cái hiệu ứng menu giống như website này không anh
    http://vannyneo.com/

  24. học hỏi says:

    http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
    trang này có bạn nè
    đây là 1 plugin của jquery gọi là lavalamp
    http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp-0.2.0.zip
    link trong trang đó luôn
    bạn down về thử nha

  25. học hỏi says:

    Your comment is awaiting moderation.
    bác DW ơi sao lại có dòng này nhỉ

  26. Tran Khanh says:

    Bài viết của bạn rất dễ hiểu, cho mình hỏi thêm là
    Giờ mình muốn khi click vào Sub menu thì sub đó hiện luôn bên dưới và không ẩn đi nữa, còn các sub khác vẫn giữ nguyên(vẫn ẩn). Mình phải tạo thêm class cho của sub à? hay xóa phần “ul li ul”?.
    Cám ơn bạn

  27. Ku_zien says:

    Cảm ơn izwebz.com và chúc izwebz ngày càng lớn mạnh và phát huy được tiêu chí hành động của mình.Cảm ơn rất nhiều!

  28. Huynh Minh Thien says:

    sao em chinh css trên firefox ma no ko thay đổi gì cả.cứu em voi anh DW

  29. ssssssssssssssssss says:
  30. binh says:

    video nay su dung soft gi de viet code vay, va soft gi thay viet css no thay doi luon vay anh

  31. nhtera says:

    Ko biết có bao nhiêu bác hỏi câu này rồi . Đọc FAQ đi bác sẽ có câu trả lời
    http://www.izwebz.com/faqs/

  32. quynh says:

    chào bạn.Tôi mới biết được trang này và tôi đã xem,Nó rất hữu ích.Tôi kính phục bạn về mọi mặt cả về phong cách và hiểu biết của bạn về lập trình, nói như vậy có khen bạn quá không vì tôi đã xem thông tin tác giả của trang web nay.Tôi mới học lập trình web nên tôi có rất nhiều câu hỏi để hỏi bạn.
    Trước hết tôi xin hỏi 2 câu như sau:
    1, tôi làm 1 cái menu thả xuống như của bạn nhưng thực hiện trên Dreamweaver CS4.lưu lại file dưới đuôi .html khi làm song cho trình duyệt explorer7 thì nhiều cái nó không đúng như yêu cầu,nhưng khi cho chạy trên Mozilla firefox thì chạy đúng như yêu cầu.Tôi có ghép trang này vào trang php của tôi với dòng lệnh . khi làm song cho chạy trên mazilla fiefox thì cấu trúc trang web của tôi nó bị phá vỡ,trang web của tôi nó không hiển thị ra giữa mà hiển thị sát mép trái.nhìn vào đoạn code cũng bị phá vỡ tôi kẻ các ô bằng table rồi trèn code vào không dùng div.bây giờ tôi muốn tất cả trở về như vị trí cũ thì khắc phục chúng ra sao.
    2, thay vì tạo menu như của bạn bằng html tôi tạo thanh công cụ bằng trang menu có sẵn trong Dream CS4 rồi sửa theo ý muốn của mình. rồi lưu dưới dạng .php nhưng không hiểu sao khi tôi tạo một cái menu mới với công cụ trên nhưng tôi chỉnh sửa theo dạng khác nhưng khi nhìn vào đoạn code mình làm thì tất cả cái gì mình sửa thì các trang menu khác mình đã làm trước kia cũng thay đổi theo(trong trang CSS). tôi không hiểu vì sao lại như vậy.
    Bạn trả lời giúp tôi nha.tôi ngoại ngữ Anh rất kém nên có phần hạn chế tìm hiểu tài liệu bằng tiếng anh.Chúc bạn có nhiều bài hay để đăng lên chia sẻ cùng mọi người.

    • Về các lỗi của bạn tôi đã đọc qua và thấy rằng bạn còn phụ thuộc quá nhiều vào Editor. Bạn sử dụng DW sẽ giúp bạn thao tác tạo nhanh, nhưng theo đó lại tạo ra những class hoặc ID không cần thiết, sẽ làm cho code của bạn rối ren, dẫn đến khi chỉnh sửa sẽ gây lỗi cho toàn trang.

      Với cấu trúc menu, bạn chỉ sử dụng 2 thẻ ul và vài li tùy theo yêu cầu của bạn, như thế bạn có thể code tay, nếu khi bạn code tay vẫn không được tôi sẽ sửa code đó cho bạn và hướng dẫn cụ thể. Bạn vui lòng code và nén lại gửi cho tôi.

  33. Trần Hải says:

    Thật tình cờ hôm nay em mới biết đến trang này qua một từ khóa trên google là: “tự học làm flash”. Cảm ơn 2 anh DW và CS ( Counter-stricker :D ) nhé. Đọc mục giới thiệu của hai anh có rất nhiều điểm giống em, đơn cử như học một lĩnh vực chả liên quan ji đến thiết kế web nhưng lại cứ đam mê, thành ra cứ phải mày mò tỉ mẩn, may có trang của 2 anh chia sẻ rất tận tình nên có lẽ từ hôm nay em sẽ nhiệt tình học từ những bài viết của các anh. Cảm ơn các anh rất nhiều, chúc các anh sức khỏe, viết nhiều,viết khỏe, nhiều donate :D để duy trì và luôn cống hiến cho những con gà như em được học hỏi nhiều.

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Wrap code trong dấu `backtick` (dấu trên phím Tab)

Chọn kiểu gõ: Tự động TELEX VNI Tắt