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.

«

»

22 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)

  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