Dropdown Menu với CSS
- August 23, 2009
- 103 comments
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.
Thời lượng: 15:46
Link Download file định dạng .mp4 chất lượng cao hơn: MegaUpload, Mediafire
Xem Demo: Dropdown menu với 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
#container ul {
behavior: url(whateverhover.htc);
}
ôi bác gì ơi làm web hayquas à nghen.rất cảm ơn bác giúp em có chỗ học tập tốt thank you
izwebz quả thực là trang web bổ ích.Mọi tài nguyên trên web đc bác DW chia sẻ free.Cảm ơn bác DW.
anh demon warlock oi cho em hoi tai sao cai dropdown menu cua em khi hover wa thi nhung thanh phan ben duoi no van hien ra trong khi em thay nhung trang web khac thi nhung thanh phan do an di duoc
mấy anh cho emm hỏi cách hương dan tạo dropdown menu động lấy từ cơ sở dữ liệu.
thứ hai cho em cách hướng dan tạo session để lưu thông tin sản phẩm khi so sánh mà người dùng sau khi check chọn sản phẩm naỳ, thì nó sẽ lưu vào một chỗ nào đó, sau đó chọn cái thứ hai, rồi chọn so sánh nó sẽ show ra thông tin hai sản phẩm song song nhau,
em rất cảm ơn diễn đàn này đã mang lại cho em rất nhiều kiến thức hay và mới
Trang http://www.izwebz.com là một Trường Đại Học chất lượng nhất mà tôi từng biết đến. sẽ không có một trường đại học nào ở việt nam sánh được với trang web này, và Admin của trang web (người đưa lên các bài viết hướng dẫn, các video hướng dẫn) là một người Thầy lớn!
Chúng ta hãy cùng giới thiệu Trường Học Lớn này đến thật nhiều người để tỏ lòng biết ơn đến chủ nhân và vì nó rất bổ ích các bạn nhé!
mong anh có thể làm video dạy cách làm button trong photoshop để ứng dụng làm cho web…..e đang rất cần….tạo nút nhấn j đó vâng
Cảm ơn anh DW, nhờ Izwebz mà em đả hiểu nhiều vấn đề CSS, và bản chất của nó, nếu hiểu bản chất của CSS thì có thể làm bất cứ những gì bằng CSS. I love Izwebz and Izwebz number one;
anh cho em hoi
#menu ul li:hover ul va #menu ul li ul:hover khac nhau o cho nao ah
em cam on anh,anh lam video rat hay
nó theo cấp đó bạn
#menu ul li {…}
/*tương ứng với
/*còn #menu ul li ul {….}
/* tương ứng là
….
tức là ul là tính cả list , còn li là từng item trong list
Hy vọng giúp được bạn !
chết thât, mình quên đóng thẻ lại, tại xem video của DW ,chứ trước giờ mình code chưa bao giờ mở code mà không enter 2 lần và đóng tag cả. Hix !
NẾu bạn hiểu Selector trong CSS thì bạn sẻ hiểu, nếu bạn không hiểu thì bạn có thể tự làm cái Demo cho mình, vì mỗi khi mình không hiểu thì mình tự làm như vậy, Bạn đừng nghĩ phức tạp làm gì cho đâu đầu ý mà. good luck
li:hover ul la khi ban hover wa cai do cai con se thay doi. con li ul :hover la ban hover cua cai the la the con cua the ma. tat nhien phai khac nhau rui
anh ơi cho em hỏi, em làm được menu giông như anh rồi, nhung khi chèn vào HTML nó ko khích vào trong 1 ô, em chỉnh hoài không dc, mong anh giúp em với
em cảm ơn anh nhiều
thank you
Anh Demon ơi… anh có thể dành thời gian làm 1 tut về DropMenu cho Navigation được không ạ?
Cách tạo Menu 2 cấp hoặc 3 cấp ý… nếu có thể anh chèn cả code php vào để thay đổi tự động giống như có 1 tut anh đã làm …cho ấn tượng anh ạ
Chúc các anh mạnh giỏi !!
Anh ơi! Cho em hỏi chút tại sao Trang Web của mình không có nút “Like” các trang mạng xã hội. Như thế thì mình sẽ dễ quảng cáo hơn. Nếu có Thì chỉ giúp em với
Cảm ơn anh! bài viết rất hay
Anh ơi, em làm theo anh (edit css ngay trên trình duyệt), khi nhấn reload page thì phần css trong khung edit css cũng reset lại luôn, chứ nó không giữ css lại giống như của anh. Mình có cần tùy chỉnh gì không anh?
Tại vì bạn chưa lưu style.css hoặc bạn chưa lưu style ở phần code html lên khi bạn F5 nó sẽ bị mất Style ở Edit CSS
Anh DW có thể làm video tut về thanh menu như trang này được không?
http://www.bachkhoa-software.com/
cái menu đó đẹp thật nhưng ko đẹp bằng vnexpress….nếu đc a DW có thể làm tut về menu giống vnexpress cho tụi e tham khảo với….
anh ơi, sao em làm giống như anh, nhưng khi mà hover chuột vào menu drop down thì nó phóng to luôn cả các bground của container luôn. Nó ko giữ im được cái khung như anh. Giúp em với
Css là thiên hạ vô địch
hic mấy cái thẻ div nó mất tiu òi.em viết lại
Quản lý sản phẩm
Thêm sản phẩm
Xóa sản phẩm
Chỉnh sửa sản phẩm
Quản lý bán hàng
Quản lý tài khoản
gì kì zậy…làm sao post được nguyên code anh
Anh Demon ơi !
Khi sử dụng e-text Editor Anh có thể làm như sau để mỗi khi save lại thì nó save là tiếng việt
c1 : File / Save format / Encoding / Unicode 8bit – UTF- 8
c2 : Edit / Setting / Encoding / Unicode 8bit – UTF- 8
Mong rằng các tutorial sau anh sử dụng tiếng việt để tụi em dễ hiểu và dễ hình dung hơn. Nhưng mà nếu anh không thích thì anh sử dụng tiếng Anh cũng được, hok có sao hết
. Các tutorial của anh rất hay .
Cho mình hỏi tí: Khi mình làm riêng thì dropdown vẫn bình thường mà khi mình ghép vào trang thì không hiển thị đc, nếu mình cho độ cao của menu lên thì mới thấy đc, còn không thì nó vẫn nằm yên ak. Có ai giúp mình được k?
anh ah em xem va lam thu video Dropdown Menu với CSS
và tất cả những gì thì đều chạy trên fifox 3.6, nhưng khi chạy trên Internet Explorer 7
thì lại không chạy như ở fifox 3.6
tại sao vậy anh
Do trình duyệt đó no không hiểu đó bạn
IE không tương thích lắm nên dùng FF hơn
Hjhj
Em làm y chang lần đầu thì được làm lại lần 2 cũng y chang lại không được. Rõ là mệt với cái css này.
Sao y chang mà ko được chú, chú thử copy cái code lần 1 bỏ sang xem có chạy ko ^^. Ko được tức là đã có sai rồi.
- Còn cái nào cũng mệt cả, chả có cái nào sướng hehe
bạn xem lại đường dẫn tới file css xem đúng chưa?