Dropdown Menu với CSS
- August 23, 2009
- 42 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);
}
) với lại web bây giờ nghe nói khách...
Có gì mà gấp chứ , không có thì copy...
cám ơn n, rất rõ ràng và dễ hiểu ^^ chắc m phải ghé thăm site của anh thường xuyên thôi ^^
Rất vui được bạn ghé thăm và mong bạn sẽ lại thường xuyên hơn.
Anh có thể hướng dẫn thêm cách load database vào các dropdown menu dùng PHP và MySQL được không ạ. Cảm ơn anh rất nhiều.
giả sử em đặt background-color cho dropdown(Admin,Smod,Mod) làm thế nào để cho background-color nó hơi trong suốt nhỉ(mờ mờ vẫn nhìn thấy nền bên dưới)
VD: http://itacad.vn/dao-tao/lich-khai-giang.html
hi
hiem cũng mới học webEm có thể khai báo CSS như sau để được hiệu ứng “mờ mờ” như thế.
Trong đó giá trị cuối cùng 0.5 có thể thay đổi tùy theo độ trong suốt.
bạn có thể dùng thuộc tính
opacity: 0.5;nhưng IE ko hổ trợ cái nàyanh Demon Warlock cho em hỏi muốn edit file CSS ngay trên trình duyệt như trong video anh làm thì phải làm như thế nào.Em khong hiểu làm cách nào tạo ra được một ô soạn thảo CSS bên trái như anh làm.Thanks anh
@nobita: nó là addon này: https://addons.mozilla.org/en-US/firefox/addon/60
Cái đó là addon của trình duyệt FF tên là web developer toolbar. Em search trên google nhé. Hoặc em xem trên phần FAQs trên phần cùng tay phải của trang có hướng dẫn cụ thể.
Cám ơn anh Demon Warlock nhiều vì những tài liệu rất hữu ích.Em rất thích bộ css và photoshop của anh.Từ nay izwebz.com sẽ là web yêu của em.
có bao nhiêu cách tạo drop down menu.
ngoài css , còn dùng công cụ nào khác mà tất cả các trình duyệt web có thể hiển thị ?
____________
thank
chào anh Demon Warlock em rất thích trang wed của anh , phải nói là anh rất cần cù . chăm chỉ tất cả vì mọi người .Đây là wed chia sẻ kiến thức rất hay free mà em được biết cho đến bay giờ , bài giảng bằng video rất trực quan , giải đáp thắc mắc theo yêu cấu và rất nhanh chóng . Không biết nói gì hơn ngoài chữ thật tuyệt vời ! Chúc http://www.izwebz.com ngày càng phát triển lớn mạnh !
Nhưng bây giwof em thấy người ta hay dùng php để lập wed chứ việc dùng HTML không còn phổ biến nhiều nữa , hi vọng sắp tới anh sẽ cho ra những video nói về php !
Web bằng PHP thì thực chất cũng chỉ là sử dụng một phần mềm CMS thôi. Bây giờ thiếu gì những phần mềm CMS miễn phí. Chỉ cần mấy phút là em đã có web bằng PHP rồi. Sắp tới anh sẽ có một series dài về WordPress.
Nhưng cho dù là CMS nào đi chăng nữa thì output cuối cùng vẫn là HTML. Nếu em không biết về HTML thì làm sao có thể làm được trang web hoàn chỉnh được? Biết và hiểu về HTML và CSS là điều quan trọng nhất của người làm web.
anh DW ơi, anh có làm series CMS Joomla không?
Chắc là không em! vì anh cũng không thích Joomla lắm. Nặng và không dễ sử dụng như WordPress
Anh Demon Warlock cho em hỏi làm sao để cho hiệu ứng drop down với css chạy được trên IE 6,7 vậy ?
Mong anh chỉ dùm em, em cảm ơn nhìu nhìu!
Trong phần trên của bài anh có chỗ hack IE 6 kìa. Em xem kỹ lại nhé.
Bài viết của anh rất hay, cầu chúc cho trang web ngày một phát triển lớn mạnh. Hy vọng sẽ có nhìu bài viết hay để mọi người tham khảo.
Thanks so much !
À ! Anh cần có một bài Video về cách làm web chạy trên nhiều trình duyệt khác nhau , cách khắc phục việc giao diện web không phù hợp với các loại màn hình có độ phân giải khác nhau. Ví dụ trang izwebz.com của mình vẫn hơi bị “teo lại” khi mở trên các loại PC hay laptop có độ phân giải cao, font và hình trở nên nhỏ hơn và hơi khó nhìn đối với một số người. Thanks
Thanks bạn! Đơn giản nhưng rất hay !
.menu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(IMG/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.menu li{
float:left;
}
.menu li a{
float: left;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.menu li a b{
float: left;
display: block;
padding: 0 24px 0 8px;
}
.menu li.chon a, .menu li a:hover{
color: #fff;
background: url(IMG/menug_hover_left.gif) no-repeat;
background-position: left;
}
.menu li.chon a b, .menu li a:hover b{
color: #fff;
background: url(IMG/menug_hover_right.gif) no-repeat right top;
}
em tìm dc 1 đoạn code về cái menu,anh Demon có thể giải thích giúp em cái dòng
“menu li.chon a b,,menu li a:hover b”. a với b ờ đây là cái gì vậy anh
anh giải thích giùm em với
Cái đó chỉ là Selector trong CSS thôi
.menu có nghĩa là ul với class=’menu’ rồi li với class=’chon’ v.v..
Em có thể đọc thêm về bài CSS Selector để biết thêm nhé
theo em hiểu thì ở đây nằm trong và thì nằm trong .vậy với cách khai báo như thế này
.menu li.chon a b thì có phải là b nằm trong a ko anh
thanks! ví dụ rất dễ hiểu, giọng truyền cảm. Mong bạn ngày càng “sản xuất” ra nhiều videos như thế này.
Chào bạn!
Tôi là người mới bỡ ngỡ bước vào nghanhf IT.
Tôi thấy trên trình duyệt firefox của bạn có thanhc ông cụ rất hay, co thể edit code, anh …trực tiếp(có thể thấy thay đổi ngaytreen trình duyệt). Bạn có thể cho tôi biết đó là phần mềm nào được không? tôi đã tìm kiếm nhưng không đựoc. Mong bạn chỉ giúp.
Cảm ơn bạn về những gì đã share cho chúng tôi, chúc bạn luôn thành công!
Bạn xem câu trả lời ở phần FAQs nhé. Lần sau nhớ lướt qua phần này trước khi đặt câu hỏi.
A ới zi mình có thể làm menu động từ database được không ?
Sao không được? miễn sao nó có cùng cấu trúc với dạng HTML ở trên thì làm được hết.
với menu dropdown thì làm sao để hiệu chỉnh cho menu con nằm ngang hả anh ! em đã thử float:left cho #container ul li ul và ul li ul li nhưng vẫn không được.
Em mê web và đã tìm được kho sách sống này thật là tuyệt vừa cụ thể vừa dễ hiểu.
Em tìm bài Fly Out menu với CSS nhé!
anh ơi ! phai hiệu chỉnh CSS trong bài này như thế nào để menu giống như vnexpress.net hả anh ! em đã thử làm nhưng hầu như không có tác dụng .
anh là thần tượng của em đóa !! hihihi
Đó là sử dụng jQuery và nguyên tắc thì giống như bài Dropdown menu với jQuery và CSS nhưng chỉ khác là thay vì cho hiển thị theo chiều dọc thì cho nó display: inline thôi.
mình phát hiện 1 điều kỳ lạ:
cái này chạy đc trên IE 7 nếu:
#container
{
background: #e4e4e3; /*bỏ đi dòng này:*/
}
#container ul
{
background: #e4e4e3; /*thêm dòng này:*/
}
thì chạy đc trên IE 7. Thật kì lạ ko hiểu tại sao nữa
với dropdown menu này mình đã làm thành công menu giống hệt website vnexpress.net mà không dùng tới jquery .ah nhân dịp này thank anh DW nhiều vì những kiến thức anh đã truyền đạt giúp em đạt điểm 9 trong môn thiết kế web(hơi cùi nhỉ …) anh DW mà ở việt nam chắc em tới bái sư tầm đạo quá….
Mong izwebz sẽ phát triển và sẽ là kho kiến thức bổ ích cho mọi người
anh Daklak ui! có thể share cho em cái code dropmenu anh làm giống trang vnexpress đc ko ạ? em làm mãi mà ko đc? nếu đc thì anh gửi giúp em vào mail này nhé! nhatnhat1090@gmail.com Thanks anh nhiều!
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
cám ơn!.anh rất nhiều!.video của anh rất hay!
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?
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!
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