Dropdown Menu II – Vnexpress Style
- February 8, 2010
- 17 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ăn bản PHP – Bài 4 – Phần 1
Đú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à.
“trải dọc hay trải ngang” Em dạo này hay nói nhịu
hơ hơ
ko thấy biểu tượng play video ngoài màn hình
tưởng là TUT chữ
Có vậy mà bạn cũng phải nói nữa. Spam quá!
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
Ban xem trong mục WordPress bài image slider
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
Chú ơi cho con hỏi mấy cái slice hình ở trong video làm sao vậy ah.
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.
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 .
Bạn cho thêm dòng này vào css là được:
ul#topnav li:last-child{
border-right: none;
}
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 .
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
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 !
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
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é !
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