post image

Dropdown Menu II – Vnexpress Style

Có lẽ Dropdown menu là loại menu phổ biến nhất hiện nay, trước đây tôi đã có một vài video nói về Dropdown menuFlyout menu với CSS và cả jQuery. Nhưng có nhiều người email hỏi tôi cách làm menu giống với trang Vnexpress.net. Tôi có trả lời nhiều lần là về nguyên lý nó giống y như phần Dropdown menu chỉ cần chỉnh sửa một chút. Nhưng đến hôm nay tôi quyết định làm hẳn một video để giải thích cho rõ hơn.

Trong bài này tôi sẽ không làm kỹ phần xây dựng code HTML và giải thích kỹ phần CSS. Bởi vì trong video trước tôi đã nói rất kỹ về vấn đề này. Do vậy trong phần này nếu có chỗ nào bạn không hiểu hoặc thấy lờ mờ. Hãy xem video trước để biết thêm chi tiết. Để Menu có thể hiển thị được với trình duyệt IE 6, bạn cần download file whatever.htc đi kèm với source code của tut này. Bạn cũng có thể dùng Javascript để khắc phục. Nhưng đơn giản hơn có lẽ là sử dụng file .htc.

Thời lượng: 23:17

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 154MB

«

»

59 Comments

( Comment bài này )
  1. Thanh Hùng says:

    Em tìm được 1 đoạn code tạo menu ngang như sau :

    <?php
    foreach($headMenu as $value){
    if(check_level($value) && check_auth($value)){
    if(preg_match('/'.$value['link'].'/',$_SERVER['PHP_SELF'],$matches)){
    echo '‘.$value['title'].’‘;
    }else{
    echo ‘‘.$value['title'].’‘;
    }
    }

    }

    ?>

    không thấy tên menu vậy mà khi chạy trang web lại có menu muốn sửa tên menu mà không biết tìm ở đâu nữa không rõ có phải đoạn code này list menu từ SQL ra không nữa xin mọi người giúp đỡ

  2. nguyễn văn vỹ says:

    đại ca dùng phần mềm nào đẻ hỗ trợ thiết kế web thế ạ

  3. Lê Minh Tuyên says:

    Nhiều kiến thức bổ ích, có giá trị. Thanksssss very much :X:X

  4. Thắng says:

    Cho em hỏi muốn làm cho cái con hiện chính giữa ngay chỗ menu cha thì phải làm thế nào? cái anh làm ở đây toàn căn trái thôi.huhu

  5. Mr QUY says:

    a oi …lam on day e viet code hát karaoke trực tuyến và có thể chát đc như trang điệp khúc đấy…e xin chân thành cảm ơn bác nhiều lắm

  6. anonymous says:

    bác làm thế nào chứ em thấy đạt yêu cầu nhưng chuyện căn lề cho menu con vẫn còn bỏ ngỏ là sao vậy ạ !

  7. linhguno1 says:

    mình đang dùng blogspot nhưng sài skin wordpress thì có áp dụng được tính năng này ko … hiện cái của mình đang là sổ dọc .nếu thay đổi được thì mình cần chỉnh sửa như nào … chỉ dùm mình nhé ^^

  8. Hiếu says:

    _Anh DW cho hỏi, còn cái active làm sao vậy anh, em thêm vào mà nó không chạy. Có ai biết làm cái active chỉ với

  9. Elgun says:

    ai giúp e làm cái menu như thế này với
    http://www.mediafire.com/?g3pwwf7sgky0vra
    gửi cả file index, file style, thư mục img nha
    thanks

  10. binhhe says:

    Các anh cho em hỏi:
    ví dụ như ta xem 1 cái video Trong Video/css/html/Dropdown menu II !!!
    vậy cho em hỏi muốn xem Dropdown menu I ở đâu anh!!
    mong các anh chỉ dùm!!!

  11. du doan says:

    dropline chứ không phải dropdown

  12. Doãn Du says:

    Thanks bác! Nghe bác hướng dẫn hài tung chưởng, nhg cũng hay lắm, dễ làm theo ^^. e thích rồi đấy :) )

  13. bachdienquan says:

    cái này chưa giống menu của vnexpress mà. mới có hover còn cái class=”active” thì tính sao?. nếu anh DW biết thì chỉ luôn cho anh em nha. hay cho link trang tham khảo củng tốt

  14. Đoàn Đức Hiệp says:

    Trời ơi, clip hay quá, nhưng anh nói đến đoạn kéo từ CSDL ra thì không thể không nhịn cười.

  15. Tran Thanh Dai says:

    DW ơi!Làm giứp e cái menu sổ khi click vào thì sổ menu con, click lần nữa thì đóng lại.Nếu được thì ths lắm lắm

  16. Jackhit08 says:

    Thanks very much!

  17. phạm quyết thắng says:

    cho e hỏi là làm sao để canh chữ của từng mục trên menu giống của vnexpress . Là khi mình nhấn vào mục nào , các phục lục của đối tượng đó phải canh lề theo nó. chứ không phải nằm ở góc trái giống như izwebz.com làm.

  18. abcbbbb says:

    nếu muốn hiển thị drop menu trên các trình duyệt từ IE 7 trở lên mọi người nhớ dùng thẻ để hiển được hiệu ứng, chứ mình dùng notepad++ không khai báo DOCTYPE nên khi mình dùng developer tool của IE9 nó báo là quirk mode và không hiển thị hiệu ứng drop-down giống như firefox và chrome, mất khá nhiều thời gian mới biết đến cách này nên chia sẻ cho mọi người cùng biết,đặc biệt là người mới bắt đầu html

  19. Thainguyen says:

    Hi
    Cho hỏi khi tạo 1 active tren menu cha xong rồi tôi move chuột qua menu cha phía trước menu đã active không work. có cách nào giúp tôi không

    Đã thêm Css:

    ul#topnav li.active_menu ul{display:block}
    ul#topnav li.active_menu{background: #fff}
    ul#topnav li.active_menu{color:#333}

    Html:

    Home
    About

    2Good Guys
    Bad Guys
    Good Gals
    Bad Gals

    Clients

    Good Guys
    Bad Guys
    Good Gals
    Bad Gals

    Contact Us

    Admin
    Moderator
    Super Mod
    Members

    Forum

    1Admin
    Moderator
    Super Mod
    Members

    FAQs

    2Admin
    Moderator
    Super Mod
    Members

1 2
  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>
  • Đặt code trong thẻ [php],[html],[javascript],[css]

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