Dropdown Menu II – Vnexpress Style
- February 8, 2010
- 59 comments
Có lẽ Dropdown menu là loại menu phổ biến nhất hiện nay, trước đây tôi đã có một vài video nói về Dropdown menu và Flyout menu với CSS và cả jQuery. Nhưng có nhiều người email hỏi tôi cách làm menu giống với trang Vnexpress.net. Tôi có trả lời nhiều lần là về nguyên lý nó giống y như phần Dropdown menu chỉ cần chỉnh sửa một chút. Nhưng đến hôm nay tôi quyết định làm hẳn một video để giải thích cho rõ hơn.
Trong bài này tôi sẽ không làm kỹ phần xây dựng code HTML và giải thích kỹ phần CSS. Bởi vì trong video trước tôi đã nói rất kỹ về vấn đề này. Do vậy trong phần này nếu có chỗ nào bạn không hiểu hoặc thấy lờ mờ. Hãy xem video trước để biết thêm chi tiết. Để Menu có thể hiển thị được với trình duyệt IE 6, bạn cần download file whatever.htc đi kèm với source code của tut này. Bạn cũng có thể dùng Javascript để khắc phục. Nhưng đơn giản hơn có lẽ là sử dụng file .htc.
Thời lượng: 23:17
Download định dạng .avi chất lượng cao: MediaFire
Dung lượng: 154MB
Cảm ơn anh rất nhiều!!!!
Anh đúng là siêu CSS, mong rằng có cơ hội được diện kiến với anh!
Em chỉ biết copy rồi “chế” lại chứ thực sự chưa rành code CSS. Em vốn gà đồ họa, photoshop xài chưa chuẩn nhưng sau khi xem được các bài viết trên IZWeb em mới thật sự thấy rằng khả năng đồ họa của CSS “quá trời” rộng, phải học code mới mong tăng được khả năng đồ họa.
Em chao Anh!
Em đã đọc video Dropmenu1 của anh nhưng sao khi em hover qua thi nó vẫn drop xuống nhưng ko có boder bao quanh và nó lại nằm dưới các phần khác của thân trang.
Có thể làm menu tiếng việt được không bạn.
Co ai co the cho em link dơnload chuong trinh ma chu DW dung de code HTML ko?Thanks so much.
@Thanh
Đọc FAQs nha bác
Cảm ơn bạn đã có những bài viết rất hay, tạo cho mình rất nhiều cảm hứng trong công việc phát triển web
Mình đang làm menu khi design một theme trong wordpress: Cho mình hỏi 2 vấn đề sau:
1. Mình áp dụng Cách tạo “New Page” và các “Page Con” để tạo ra các Menu.
(code này trong theme “inove”)
<li class="”><a class="home" title="” href=”/”>
——————–
Đoạn code trên có tác dụng list ra được menu.
****Vấn đề Yêu cầu:Có thể loại trừ 1 page không cho xuất hiện trên menu khi ta list ra như thế này được không? làm như thế nào?.
—————————————————————————————————
2. Mình thấy Wp có phần: “Category link and new link”
Mình tạo ra Category Link: Home, about,club location, contact
Trong các “Category link: Home, about,club location, contact” mình tạo các “Link” thuộc các category cha của nó.
Bây giờ mình làm một cái theme: Vấn đề ở đây là list các “category link” này để làm menu(các link con của category link là các sub menu)
-Nếu list ra được thì mình có thể loại trừ một category link nào đó không xuất hiện được không?
—————————————————————–
Mình đang nghiên cứu mà chưa ra. Xin các mem trên izwebh giúp mình.
Thanks
Em dán bài giới thiệu izweb.com lên đầu trên blog của 1 trong vòng 1 tuần, hy vọng sẽ giới thiệu đc giúp cho các anh
Thx em rất nhiều
Ai có blog thì giới thiệu izwebz với nha 
khi nào ra quyển sách thì bảo em nha
Mình cũng có ý kiến như một bạn ở trên là làm sao cho menu nó lên trên dc trong nó hở như thế xấu lắm. Thanks bác
mình thấy cũng hay, nhưng cho mình hỏ nếu bỏ file “whateverhover.htc” thì IE6 không chạy, có cách nào mà bỏ cái “whateverhover.htc” tất cả các trình duyệt đều chạy như nhau không?
Dear Anh!
Đọc và nghe những bài hướng dẫn của Anh em thấy rất hay và ý nghĩa.Em là IT phần cứng,hiện em rất muốn làm cho mình một trang web riêng,rất mong Anh giúp em với em phải bắt đầu từ đâu?về HTML em cũng bít nhưng chưa xâu lắm,Anh có thể chỉ cho em những bước cụ thể và em cần lắm vững những kiến thức gì để có thể làm một trang web riêng cho e,nếu có thể Anh cho em xin tài liệu mà em cần học Anh nhé
Rất mong nhận được hồi âm sớm từ Anh!
Cảm ơn Anh nhiều!
Mình có down source về và test trên IE tester phiên bản mới nhất nhưng ie6 ko chạy bạn ạ?
Mình chế 1 tí, tuy chưa phải là căn giữa nhưng nó cũng đỡ hơn chút
Cái li nào hover thì mình lấy tọa độ left của nó, gán cho thằng con (trừ đi 1 chút cho nó có vẻ căn giữa). :p
$(document).ready(function(){ $('#navigation ul li').hover(function(){ var p = $(this).position(); $(this).find('.children li:first').css('padding-left',p.left-50+'px'); }); });Theo em nghĩ, dùng css đơn thuần chắc là khó giải quyết, vậy dùng jquery, lấy toạ độ của menu cha khi hover qua, sau đó dựa vào tọa độ đó để set tọa độ left cho menu con?
Làm thế nào để các menu con nó căn giữa được vậy?
Có nghĩa là khi chúng ta đưa chuột đến menu cha thì các menu con sẽ hiện dòng thứ hai và đối xứng hai bên
Em có cùng câu hỏi với bạn. Menu của vnexpress nó căn giữa với menu cha của nó. Vậy phải làm như thế nào ạ? Chứ cái menu dài, chọn cái cuối rồi lại kéo chuột về đầu để chọn menu con thì bất tiện và xấu quá.
bạn chỉnh chỉ số margin va padding cua cái div chứa cái menu ve zero hết chắc là ổn mà, còn nếu vẫn chưa được bạn để position: absolute chỉnh bằng tay muốn đặt đâu thì đặt trong relative của nó
hoặc cũng có thể dùng top , hay float:top; … etc.. nghiên cứu nhé !
Cho em hỏi làm sao chỉnh menu này không còn khoảng trống phía trên menu nữa. Vì như vậy khi chèn vào web sẽ bị hở 1 khoảng trắng. Mong anh chỉ em cách khắc phục
Hình demo:
Link: http://www.chuyenraovat.com/helpmenu.jpg
Cái này bạn nên kiểm tra cái margin và padding ấy nếu muốn sát thì margin: 0; padding:0; ngoài ra bạn nên kiểm tra cái margin và padding của toàn bộ trang
Sao khi xem nhiều clip thì e rất thích a Demon Warlock. E k biết là a xài những chương trình nào để viết code ạk ? … E đang dùng cái phpDesigner 7 và Edit CSS(add on của firefox) e thấy a xài chương trình nào mà có thể mở 1 lượt nhiều project nữa ! … Thanks a nhiều lém !
Anh admin hum nào làm cái video hoàn chỉnh 1 cai giao diện trang web bằng CSS+HTML nhé..em làm thử bằng css thiết kế xong..các menu nó cứ nhảy lung tung khắp trang web..nó ko đặt được ở chỗ mình cần đặt…em chỉnh đường viền và các thứ mà ko được..có ai biết cách chỉ dùm mình với..thanks nhiều: có gì thì gửi vào mail giúp mình nhé: hienvic.cntt@gmail.com
Mình làm menu đã chạy tốt, do menu khi thiết kế phần xổ xuống chiếm nhiều diện tích, khi chạy thì menu đã hiện lên giao diện ngang, nhưng phần diện tích này nó vẫn còn chiếm trên trình duyệt, do vậy khi mình đưa vào trang aspx thì nó vẫn còn chiếm diện tích khá nhiều (từ trên menu xổ xuống như khi chưa có css), mình không biết khắc phục nó bằng cách nào, anh Demon Warlock giúp giùm em với . Thanks .
Bạn cho thêm dòng này vào css là được:
ul#topnav li:last-child{
border-right: none;
}
Có lẽ em hỏi hơi “cùi ” một tý, trong cái menu này, làm sao bỏ được cái phần phân cách (gạch đứng) ở cuối .
trong video của anh thì khi ta hover qua Menu trên thì Menu dưới mới xuất hiện và khi ta di chuột ra ngoài thì Menu dưới biến mất.giờ em muốn khi ta chọn 1 mục trên Menu trên và di chuột ra ngoài thì phần Menu dưới vẫn giữ nguyên mục vừa chọn và không bị biến mất.
Chú ơi cho con hỏi mấy cái slice hình ở trong video làm sao vậy ah.
Bác DW cho em hỏi là, bác làm sao canh cái chữ nó vô giữa hay thế ? Tự nhiên trong cái ul#topnav li a bác cho cái display: block là nó tự vô giữa à ? Em không hiểu chỗ này. Em nghĩ thường có 2 cách canh giữa chữ là dùng height = với line-height và text-align: center. Bác giải thích cho em được không ? Thanks bác. Trang web rất hay
Ban xem trong mục WordPress bài image slider
Mình thấy trong bài này phần trang wordpress có phàn trình diễn ảnh rất hay
Tiện thể cho mình hỏi cách làm được không vậy
Thank you rất nhiều
Có vậy mà bạn cũng phải nói nữa. Spam quá!
hơ hơ
ko thấy biểu tượng play video ngoài màn hình
tưởng là TUT chữ
“trải dọc hay trải ngang” Em dạo này hay nói nhịu
Đúng thế anh ạ! Ngay từ lần xem video em đã liên tưởng đến cái menu của vnexpress thấy nó chỉ khác nhau có đúng 1 điểm là trải rộng hay trải ngang ra thôi. Chỉnh display là được mà.