Dropdown Menu với CSS
- August 23, 2009
- 116 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);
}
Những tut của anh rất hay và bổ ích!
Chúc anh sức khỏe để có những tut hay và bổ ích hơn nữa nhé!
Cảm ơn anh nhiều!
Chào anh Demon Warlock .
Em mới tham gia vào web của anh,và đã xem một số bài dạy của anh.Em thấy rất hay và bổ ích ,các bài được viết theo trật tự làm cho người đọc dễ theo dõi và học.But em thấy có môn javascript cũng rất cần thiết cho việc làm web vậy
Anh có thể làm thêm video về môn này được không ạ.Cám ơn anh rất nhiều về các bài học trên web
Xin lỗi e không biết viết bài này vào đây nên vào đây comment.
Anh oi khong hieu sao sau khi em cho
#container li ul {
position:absolute;
}
thì phần menu xổ xuống không hề nhảy ra bên ngoài thẻ , mà lại nhảy vào trong thẻ div . nó căn chỉnh theo thẻ mẹ position:relative; nên e thấy nó nhảy vào trong thẻ cũng hợp lý , anh có thể hướng dẫn em được không ạ , em tìm mãi không ra
Anh DW fix lại link down file whateverhover.htc dùm em với. link die rồi
hi a DW !
Hiệu ứng hover trên IE 6,7 chạy được khi dùng whateverhover.htc ,nhưng của e nó chỉ hover ra thôi ,di chuột ra chọn vào menu mới hiển thị để click thì không được . Mong anh giải đáp
Anh ơi! Cho em hỏi là làm sao để menu khi sổ xuống thì nó sẽ nằm phía trên những cái div phía bên dưới thanh menu.
Cảm ơn anh nhiều nha!
Hơn một tuần nghiên cứu download nhiều code về gặm mà chẳng hiểu tí chi, tự nhiên khi trưa vào gg tìm, sao mà hiện ra cái trang web của anh, ngon ghê.
Chúc anh sức khỏe, thành đạt.
Video rõ ràng dễ hiểu lắm, mong anh sẽ đăng nhiều bài hay để bọn em kiếm một ít kiến thức.
Cảm ơn!
Bạn có chắc là viết đúng không? vì đôi khi người ta hay nhầm chữ behhaviour và behavior nhé! phải là behavior mới được. Tôi vừa kiểm tra lại demo trong trình duyệt IE 6 hoạt động rất tốt.
http://img691.imageshack.us/img691/8720/worksh.png
Đã dùng thử file whateverhover.htc , không những không thấy tác dụng , mà còn làm trình duyệt IE6 báo lỗi (mình test trên soft IEtester)
http://ca0.upanh.com/13.591.17810861.Lu0/scripterror.png
từ cách làm của anh em làm theo tương tự nhưng không hiểu tại sao ở cái menu dropdown cái thẻ li nó không sát vào bên trái thẻ ul má cách ra 1 đoạn, em làm hết mọi cách rối mà nó vẫn không thay đổi gì cả. Lý do là làm sao vậy anh Demon.
anh có thể chỉ em cách làm drop down dọc sổ ngang được không anh, cái ngang sổ dọc thì em làm được rồi nhưng em muốn làm dọc sổ ngang như trang 24h mà vẫn chưa được code css ngang sổ dọc của em nè . anh có code dọc sổ ngang không post em với
@charset “utf-8″;
#vavMenu {
margin:0;
padding:0;
}
#vavMenu ul {
margin:0;
padding:0;
line-height:20px;
}
#vavMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#008040;
}
#vavMenu ul li a {
text-align:center;
font-family:”Times New Roman”, Times, serif;
text-decoration:none;
height:20px;
width:80px;
display:block;
color:#000;
border:1px solid #000;
}
#vavMenu ul ul {
position:absolute;
visibility:hidden;
top:20px;
}
#vavMenu ul li:hover ul {
visibility:visible;
}
#vavMenu li:hover {
background:#e9e9e9;;
}
#vavMenu ul li a:hover ul li a:hover {
background:#ffe8e8;
color:#f6c;
}
#vavMenu a:hover {
color:#000;
}
cho em hỏi cái chỗ này
#container li ul{
nếu em để backgound thì không sao..
nhưng nếu bỏ thì nó sẽ bị như này:
http://upanh.tv/images/23876350822104992690.jpg
Thật sự là em chưa làm được mong được anh giúp đỡ. Em thấy mọi người đều nói đến ĐỆ QUI, nhưng em không biết sử dụng nó như thế nào. Anh có thể làm và cho mọi người tham khảo được không? Em đang rất cần mà.
Hic đệ qui gì đâu trời, chỉ là cách em sắp xếp trong SQL thôi.
Bạn Hiếu hãy suy nghĩ thêm về menu đa cấp nhé. Là bạn không biết làm thế nào chứ không phải là bạn không thể làm. Bạn hãy tìm hiểu cách thức để một hệ thống Menu như thế nào sẽ trở thành một Menu đa cấp, lúc đó bạn sẽ thực hiện được nó thôi.
- Cũng nói sơ qua cho bạn biết, nếu bạn từng làm với loại hàng hóa rồi thì bạn cũng biết Category chính, trong Category chính thì còn có cái phụ, sau đó mới đến sản phẩm, kiểu như : Máy tính -> Lap Top -> Ram
Em không biết bây giờ ai quản lý website này nữa, nhưng cho em hỏi về ít PHP nhé. Em đang làm menu đa cấp bằng PHP lấy ra từ Database nhưng không biết làm như thế nào. Sẵn Website của mình đang hướng dẫn học PHP, em mong các anh sẽ quay một Tutorials về cách làm HOÀN THIỆN một menu đa cấp bằng PHP. Vấn đề này cũng có rất nhiều người muốn biết và muốn học. Mong các anh trả lời sớm vấn đề này. Thanks các anh nhiều.
Em chào anh !
Em mới bắt đầu tự amyf mò HTML và CSS. ghé qua trang của anh đọc các bài viết và hướng dẫn dễ hiểu quá…..
Căm ơn anh nhìu nhà ! Anh và Web này sẽ là người Thầy đầu tiên của em !
Chúc anh luôn mạnh khỏe !
@Huynh Minh Thien
w3schools là một lựa chọn tốt
http://www.w3schools.com
Hi anh Demon,
anh viet tut rat hay và anh rất vui tính rất hích xem tut của anh.
anh có thể cung cấp cho em tài liệu của các thuộc tính trong css va x(html) ko,
nếu được em rất cám ơn anh.
Anh Demon Warlock ơi! Em đã làm cái menu đa cấp như anh chỉ rồi, và em cũng dowload file whateverhover.htc về và làm đúng như anh hướng dẫn. Nhưng trong trình duyệt IE6 thì chỉ hiển thị được cấp thứ hai à còn cấp thứ 3 thì nó không hiển thị. Anh có thể chỉ em cách khắc phục lỗi đó được không! thank anh nhiều!
em sửa template free trên mạng, làm dropdown menu giống như anh chỉ, nhưng vẫn có 1 vài chỗ ko được, anh có thể xem lại code dùm em được ko? thanks anh vì bài viết….^^
Sao em hack cho IE không được. nếu để tất cả các file trong một thư mục thì được mà em tách riêng ra thì nó lại không đươc. em có sửa lại đường dẫn rồi, vậy là sao anh
Trang web này nhiều bài hay quá. Vừa làm cho cái trang web thành 1 đống rác div, vào đây mới ngộ ra nhiều thứ, thx thx thx.luyện tiếp đây
.
Đã sửa lại link! cảm ơn bạn đã thông báo.
File video này không xem online được . !!!
cho em hỏi là giữa cách dùng % và px thì mình lên dùng cái nào hay hơn chuyên nghiệp hơn ạ,em cũng mới bước vào thế giới web nên gà mờ,theo em nghĩ vầy, mình dùng % thì nó sẽ căn chỉnh tùy thuộc vào màn hình rộng hay hẹp,còn px thì nó căn chỉnh đúng khoảng cần dùng …em nghĩ như vậy không biết có phải không ạh,
cho em hỏi cái behavior kia nó có chức năng j nhỉ ? k hiểu rõ lém mong a giải thích thêm cho em
Anh ơi!cho em hỏi chút! Em làm như anh code rùi em save lại và chạy với trình duyệt IE 8 và chrome thì tất cả hiệu ứng bình thường.Nhưng khi em mở bằng FireFox 3.6 thì các hiệu ứng css mất hết ạ. Như vậy là lỗi do đâu ạ ? Mong các anh chỉ giúp với ạ!
Anh Demon Warlock ui! Em tạo 1 file css bằng dreamweaver rùi link đến file HTML anh ạ. Nhưng nó chỉ chạy trên IE và Chrome thôi khi em mở bằng firefox thì hiệu ứng css mất hết. Và khi em bật
web developer toolbar để edit css thì hiệu ứng lại hiện ra,khi đóng toolbar thì lại mất.Như vậy la do trình duyệt hay do đâu hả anh? Mong anh chỉ giúp em!Thanks anh nhiều!
Chào a, bài này rất hay, nhưng e có thắc mắc là nếu làm menu 3 hay 4 cấp theo cách này có được ko? nếu được thì chỉnh css như thế nào?
cám ơn!.anh rất nhiều!.video của anh rất hay!
Rất cám ơn anh về website!
Em mới tập làm web và thật may mắn khi biết được trang web của anh. Chúc anh luôn mạnh khỏe