Dropdown Menu với CSS
- August 23, 2009
- 60 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);
}
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.
thank anh rat nhieu
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
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,
File video này không xem online được . !!!
Đã sửa lại link! cảm ơn bạn đã thông báo.
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
.
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
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….^^
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!
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.
@Huynh Minh Thien
w3schools là một lựa chọn tốt
http://www.w3schools.com
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 !
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.
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
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.
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
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;
}
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.