• fans
  • 1036 reader
  • followers
Dropdown Menu với CSS
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 15:46 phút
  • File size: 22 Mb
  • Yêu cầu: Căn bản HTML & CSS

Hiện nay Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang. Do vậy Dropdown menu là dạng menu lý tưởng để giải quyết vấn đề này. Trước đây nếu muốn có được Dropdown menu bạn cần phải dùng Javascript và cũng hơi rắc rối mới có được menu như ý.

Nhưng hiện nay với những trình duyệt tân tiến hơn bạn hoàn toàn có thể dùng CSS để tạo ra dropdown menu rất đơn giản. Tuy nhiên, như đã nói, cách này chỉ phù hợp với những trình duyệt mới, còn những trình duyệt cũ như IE 7 trở xuống sẽ không dùng được mà nếu muốn dùng bạn phải dùng Javascript để khắc phục.

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

#container 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á.

  • cuong pham

    Chào các bạn, bạn nào rành về CSS cho mình hỏi như sau : Mình đang gặp lỗi khi load ảnh background trong CSS.
    File css của mình như thế này : #content {background: url(/Themes/images/anh.jpg); }

    Trong đó : Mình đặt file ảnh trong thư mục như các bạn thấy ở trên. Nếu mình gọi #content trong MasterPage thì background load được bình thường. Nhưng nếu mình gọi #content trong trang con, sử dụng MasterPage thì ảnh trên lại không hiển thị.

    Mong các bạn giúp đỡ.

    Thanks !

  • xuanhau

    Bạn dùng z-index nhé. Thằng nào có z-index cao hơn thì nằm trên.

  • http://bcdonline.net/ bancamden

    Sử dụng cái này tuy không có hiệu ứng drop down đẹp nhưng rất thoáng và nhẹ!

  • phamhuy89

    Anh ơi,cho em hỏi,cái này em có làm 1 lần rồi nhưng mà quên,em có làm 1 cái menu bằng html,và em muốn nhúng nó vào index.php của template trong joomla,cái này em mới học,em nhớ là chỉ cần 1 dòng code thôi là chèn được cái menu này vào trang,giờ em cài lại mà không nhớ ra,mong anh giúp đỡ,cảm ơn anh

  • Nguyen Nhat Khang

    Cam on thay !!!!!!!!!!!!!!!!!!!!!!

  • Lê Bốn

    Cho em hỏi là nếu reset lại trình duyệt như thế này có gì khác nhau không

    * {margin: 0px; padding: 0px;}

    body {margin: 0px; padding: 0px }

    • http://itforyoublog.tk Nam Lùn

      Có chứ bạn, bạn sử dụng add-on edit css ngay trên trình duyệt của firefox bạn sẽ thấy rõ điều này, con link download bạn vô phần FAQs nhá. Chúc bạn vui vẻ

  • http://xedapbuclop.net kidtieuka

    khi cái menu thả xuống nhưng gặp 1 đối tượng div bên dưới và nó chui xuống dưới cái div đó nên ko chọn đc ! vậy phải xử lý làm sao ?
    http://nq0.upanh.com/b4.s28.d1/e68998ebdd7dae5d33000b994ced733f_48591850.error.jpg

  • Bạch Thế Vinh

    Cách nói chuyện của anh rất là vui, và anh cũng rất là pro..Cám ơn những hướng dẫn hữu ích của anh.

  • http://đangtậplàm Hoàng Minh Tùng

    Anh ơi cho em hỏi là tại sao em làm dropdown như anh chỉ.Nhưng mà cái thanh menu của em nó là hàng dọc nên khi hiện drop down thì bị đè lên nhau chứ không tự động di chuyển xuống dưới

  • muốn học web

    có bạn nào hiểu giải thích giùm mình với là: Tại sao ul cũng float: left mà li cũng float:left. theo mặc định menu sẽ ở dạng element nhưng sao mà khi float left nó lại đứng ngang hàng với nhau. mình đã nghe anh Demon nói là khi mà 1 thành phần nào đó mà float thì thành phần mẹ của nó phải có overflow. Mình ngu quá nghĩ mãi không ra . Xin vài lời giải thích giùm

    • http://cnc.com.vn Bàn Chân Trần

      li float left thì nó sẽ nằm ngang nhưng khi đó ul sẽ không lấy được height của các thành phần trong nó… cụ thể là height của các li… thêm float left cho ul để giải quyết vấn đề đó… hoặc sử dụng overflow: hidden…
      bạn thử sử dụng firebug để kiểm tra height của ul khi có và không có thuộc tính trên để hiểu cách sử dụng….
      theo mình nó là như thế.. ^^

  • Nguyễn Vinh Thành

    A cho em hỏi, em đã cài edit css xong nhưng khi em load file html lên và mở edit css biên soạn nhưng ko có tác dụng gì cả. A có thể cho em biết lý do tại sao ko?

    • http://cnc.com.vn Bàn Chân Trần

      có thể do trong file html bạn có link tới file css rồi…

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