Menu đa cấp với CSS và jQuery
- November 5, 2009
- 58 comments
Menu đa cấp hay còn gọi là menu thả xuống ngày càng trở nên phổ biến. Bởi vì diện tích chiều ngang thì có hạn do vậy để tiết kiệm diện tích thì cách tốt nhất là sử dụng Menu đa cấp. Trên izwebz bạn đã biết được 2 cách tạo menu thả xuống một tầng và menu flyout một tầng. Trong bài này chúng ta sẽ học cách tạo menu đa cấp
Tôi sẽ không đi quá sâu vào phần CSS của bài này mà tôi chỉ “lướt” qua. Nếu bạn có chỗ nào không hiểu thì bạn xem lại hai video về Menu Dropdown và Menu Flyout để biết thêm chi tiết. Cuối cùng của video chúng ta sẽ sử dụng một chút jQuery để “thêm mắm, dặm muối” cho nó thêm màu mè
Thời lượng:27:49
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 60 MB
bài viết của anh rất hay va rất ý nghia.Anh có thể chỉ cho e cách cài và sử dụng jquery
để tạo menu như trên trong asp.net không anh.Em vẫn không biết cài như thế nào
Anh ơi
Cái này mà tắt JavaScript thì chịu chết hả anh?
có cách nào css menu 2 tầng ko dùng javascript không anh?
Chào anh!
Tại sao em viết cái css của anh trên ie9 nó không di chuôt được vào menu con nhỉ? cứ di vào menu con là nó biến mát luôn!!!
Anh giúp em với?
Thanks!
anh DW ơi đoạn cuối a viết khó hiểu quá e ngồi đọc mãi mà ko hiểu chỗ CSS cuôi.cuối cùng e sửa thành
#nav li:hover ul,
#nav li:hover ul ul{
display:none;
}
#nav li:hover ul,
#nav li li:hover ul,
{
display:block;
}
vẫn chạy đc anh àh
công nhận những bài giảng của anh rất hay rất có giá trị em đã từng học qua rất nhiều trang nhưng website của anh làm em rất hài lòng và giọng nói của anh cũng rất tuyệt. thank a vì tất cả.
Anh ơi bài này em k hỉu 1 đoạn css ở cuối cùng…có phải a viết hơi dư không…
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; }lẽ ra nhiêu đây là đủ:
#nav li:hover ul ul, { display: none; } #nav li:hover ul, #nav li li:hover ul, { display: block; }khong phai dau. day là anh ay con du dinh nhung cap tiep theo nua do ban. Nhung cua ban thi chi dc 3 cap ma thoi
cam on anh that la nhieu nhe
Anh ah ..làm menu css nhung font không ở chế độ tiếng việt được ah
Tôi cũng thấy như bạn vậy. bạn biết lý do thì cho tui biết với nha. Hay anh DW làm thừa nhỉ
Viết như vậy để tránh không bị chảy văn bản, và tránh các thiết lập default của browser có khi lại phá lung tung. Bình thường các framework sẽ có cái reset.css để thiết lập chế độ ban đầu cho đúng chuẩn. Anh ấy ở đây viết thận trọng.
Còn về hiển thị tiếng Việt, mình nghĩ có lẽ tại font bạn không hỗ trợ. Bạn xem lại font-family, chỉnh về Arial hoặc Tahoma.
Mình không phải dân CNTT nhưng vì yêu thích nên cũng đang tập thiết kế website, rất may mắn tìm được trang web này để học hỏi, xin cảm ơn bạn Demon Warlock.
Về vấn đề không hiển thị tiếng Việt trên menu, như mình thấy không phải là do thiếu font, mà do: muốn hiển thị tiếng Việt trên menu thì trong cửa sổ Code phải thêm một vài ký tự. Ví dụ: muốn hiện chữ “Trang chủ” trên menu thì trong cửa sổ code phải gõ: “Trang chủ″. Tại sao như vậy thì mình chịu. Tốt nhất là phải gõ trực tiếp tiếng Việt trong cửa sổ Design, vấn đề ở đầy phải sửa lại css một chút để cho các menu con (ẩn) hiện hết ra mới sửa được.
Qua nhiều ngày tìm kiếm thông tin trên mạng để đáp ứng code javasrcipt cho trang web của mình, cuối cùng thì em đã tìm được chỗ dừng chân để học thêm về thiết kế web. Em đã xem qua nhiều video hướng dẫn của anh, rất hay và thu hút người xem.
Hiện tại thì em có kiến thức cơ bản về HTML, ASP.NET, nhưng do ASP.NET không hỗ trợ về javasrcip và một số nguồn mở, lượng code viết nhiều dẫn đến khó khăn cho việc thiết kế web. Em muốn chuyễn sang học PHP, CSS, javasrcip. Anh có thể cho em về những giáo trình và tài liệu liên quan bằng file PDF hoặc tên sách giáo trình được không? Qua những giáo trình đó em có thể tự học, nếu không hiểu chỗ nào hoặc thấy những bài hay thì em sẽ post bài lên làm tiêu đề cho mọi người tham thảo, hihi.
Em rất mong được sự quan tâm của anh, nếu anh có giáo trình nào hay thì gửi về: long_long250@yahoo.com. Cám ơn anh nhiều!
bạn vào mục Nguồn lập trình trên izwebz đó
cám ơn a rất nhiều, video này của a rất hay, trang web rất có ích cho những người mới vào nghề như e.
mình xem những clip của bạn thấy rất hay, muốn click quản cáo ủng hộ web mà tìm không thấy. bạn có thể chỉ ra chỗ nào có banner quản cáo không Cường?
Thank you very much!
anh àh menu anh làm như trên em muốn cho rộng ra hết màn hình nhưng koh đc anh àh anh có thể hướng dẫn qua giúp em đc koh
Thank anh DW, em đã học được rất nhiều điều từ trang web của anh
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul {
display: none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
display: block;
}
Sao cái đoạn code css trên anh dùng nhiều li và ul thế, có tác dụng gì em chưa hiểu rõ, trong khi chỉ cần viết như bên dưới là cũng hiện ra rồi
#nav li:hover ul ul{
display:none;
}
#nav li:hover ul,
#nav li li:hover ul{
display:block;
}
@Nguyễn Trúc Anh Tuấn
Bác nên tìm hiểu về Selector trong css sẽ hiểu rõ hơn. Trong ví dụ này bác thử cho thêm một cấp nữa là biết ngay tác dụng
ở đây dùng chỉ có 2 cấp con thui thì dùng như tui là ok rùi mà, chưa hiểu ý ông bạn lắm.
thank anh nhiều nhé, rất hay em rất thích nó
em muon lam cho menu no rộng ra thì làm thế nào anh,em chỉnh ở thẻ thì menu nó bị làm sao ý.
Hay lam anh oi ! Trang web cua anh giup do em rat nhieu trong viec hoc thiet ke web !tk anh !