Menu đa cấp với CSS và jQuery
- November 5, 2009
- 32 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
Get the Flash Player to see this content.
jQuery & PHP Form Validation (phần 2/2) »
http://www.beponline.vn/index.asp?lang=1
bác DW thử vào đây xem
em muốn làm menu 2 cấp thế này thì có làm bằng css được ko
Cảm ơn anh DW về Tut rất hay này. Tiện đây anh cho em hỏi thêm : Nếu mình muốn Load các danh mục từ CSDL ra làm Menu thì phải Code như thế nào ạ. Nếu áp dụng cách trên làm có được không ah. Nếu có time anh làm thêm tut về cách làm menu đa cấp bằng PHP anh nhé. Em cảm ơn anh rất nhiều !!!
Làm gì có menu bằng PHP em. Nếu muốn làm menu cho các trình CMS thì output cuối cùng kiểu gì cũng phải là HTML. Mỗi một CMS cho ra một dạng mã HTML khác nhau cho nên không thể làm một tut chung được.
Nhưng cho dù Php có được viết ntn Di nữa thì output vẫn phải là dạng ul hoạc ol và các thành phần vấn sẽ là li. Như vậy em vẫn có thể sử dụng cách trên để làm menu.
Dạ, em hiểu rồi ạ. Em đang làm Web bằng PHP nhưng phần Menu đa cấp Load từ CSDL em làm mãi mà vẫn chưa được… Hic…
Chao anh. Em muon tai hieu hoc Jquery, anh co the cho em mot it tai lieu duoc khong ah.
vào http://jquery.com/ tìm hiểu đi bạn, nơi đó có các tut rất hay và dể hiễu nữa.
hi ! anh có dạy thiết kế wed kg ? em muốn tầm su học đạo ! nếu anh có dạy thì mail cho em biết nha . thankyou. antran.net@gmail.com
cho em hỏi nếu drop down menu mà là image thì làm sao, nghĩa là khi drop down xổ xuống là một list image chứ không phải text. Ở đây em design một menu có 2 image:
vd: home meun em có home_on.jpeg(khi click chuột vào menu) home_off.jpeg(không focus chuột) thì em làm được rồi, nhưng em muốn home menu sổ xuống là home1, home2(mà là image giống như home) thì làm sao? mong anh và mọi người giúp em với.
Thanks!
anh làm 1 cái menu đa cấp load từ csdl ra đc không
“anh làm 1 cái menu đa cấp load từ csdl ra đc không”
Load được hết mà
Chao anh a.anh cho em hoi mot chut dc ko a?
em dang xay dung mot website bang asp.net-C#. em lam menu da cap bang cach su dung cong cu menu trong toolbox va em thay viec sung dung cong cu menu do thao tao rat de dang va ko fai viet code. cho em hoi la neu dung cong cu menu va xay dung menu da cap nhu video anh huong dan o tren thi viec ket noi voi csdl cai nao de hon a.em cung chua hieu lam ve cong cu menu do,anh co the giang qua giup em duoc ko a. cam on anh nhiu!
@vu thi phuong : bạn Phuong thân mến, chắc anh DW chưa trả lời cho bạn nên mình muốn nói sơ vài thứ. Kết hợp Css với Jquery được coi là 1 trong những công cụ kết hợp để bạn có thể làm tốt hơn trong công việc của mình. Với câu hỏi của bạn, bạn có hỏi đến việc kết nối CSDL, nhưng chắc bạn đã nhầm vì căn bản của CSDL có thể bạn cần thay đổi các cấu trúc của Menu, thêm bớt các submenu đúng ko ?. Căn bản điều đó ko ảnh hưởng quá nhiều đến Jquery, nếu bạn biết cách khôn khéo để tích hợp CSS, jQuery và SQL thì đó sẽ là một menu động được điều khiển cấu trúc từ Backend(Admin CP) ^^.
cam on vi cau tra loi cua ban!!
Anh DW có thể hướng dẫn em làm thanh menu đa cấp như của trang này được không em thấy lúc đưa chuột vào menu cấp 1 và 2 có cùng 1 màu khác màu với các menu không được chọn xem nó dể phân biệt và đẹp hơn nhiều. Cám ơn anh DW nha, em mới học css và jquery nên cũng còn kém lắm.
http://shop.symantecstore.com/store/symnahho/en_US/DisplayHomePage/pgm.5937500/ThemeID.106300?resid=SzV0fAoHAj4AAEVMNjIAAAAG&rests=1261797906995
Cái đó là em phải sử dụng Class để định màu cho menu đang được Selected. Thường thì class cho menu hay được tạo ra tự động bởi script. Anh cũng có một bài hướng dẫn rồi đó. Em tìm bài Từ PSD sang HTML phần 4 hoặc 5 đó.
Em la sinh vien nam thu 3 cua dai hoc khoa toan tin em cung co so thich thiet ke website nhung kien thuc em con rat it va lai nghanh em hoc cung khong phai theo nghanh thiet ke web vi vay co gi anh co the chi gium em nhe cam on anh nhieu !!!!!!!!!!!!!!
Em đã làm cái menu như anh hướng dẫn,và nó gặp sự cố như thế này:
đây là code của em:
file menu.php:
Trang chủ
2 Kyu ↓
Từ vựng
Chữ hán
Ngữ pháp
Đọc hiểu
Nghe
Đăng nhập
Đăng ký
file style.css:
*{padding:0;margin:0;}
#menu{
position:absolute;
top:111px;
width:100%;
height:2em;
background:url(“anh/menu.gif”);
}
#menu1{
list-style:none;
text-decoration:none;
line-height:2em;
}
#menu1 ul{
list-style:none;
width:12em;
display:none;
}
#menu1 li{
margin-left:2em;
margin-top:0em;
float:left;
width:8em;
}
#menu1 ul li{
border:1px solid #c85a17;
margin-left:0em;
}
#menu1 a:link,#menu1 a:active,#menu1 a:visited{
text-decoration:none;
width:8em;
color:white;
height:2em;
}
#menu1 ul a{
float:left;
width:8em;
background:#c85a17;
}
#menu1 ul a:hover{
background:white;
color:#333;
}
#menu1 li:hover ul{
display:block;
}
file dropdown.js:
$(document).ready(function(){
$(“#menu1 li”).hover(function(){
$(this).find(‘ul:first’).css({visibility:”visible”,display:”none”}).show(400);
},function(){
$(this).find(‘ul:first’).css({visibility:”hidden”});
});
});
và file jquery thì em dow trên trang chủ jquey.
anh xem hộ em với nhé.cảm ơn anh!
hjc không hỗ trợ.mất hết file menu.php rồi:
cái sự cố đây
đây là file menu.php
Cái đó là do phần Absolute em để top là 111px hơi bị lớn nên tạo ra một khoảng trống. Em cho nó nhỏ đi sao cho không có khoảng trống nữa là OK.
Trang web rất hữu ích. Rất hi vọng có nhiều người biết đến izwebz hơn nữa
Hehe, bạn giới thiệu nhiều thì sẽ nhiều người biết thôi
.
Mình cũng đặt link text cho izwebz trên forum lớp rồi , ko biết có ma nào vào không .
anh ơi có thể chỉ giúp em làm sao có thể tạo một menu theo chiều dọc được không, nó giống như trang 24h.com.vn, em cảm ơn nhiều
Có menu dọc rồi mà : http://www.izwebz.com/video-tutorials/flyout-menu-voi-css/
Tuyệt vời..amdin ở Mỹ ah? sướng nhỉ..em ước gì được như Anh đấy..tai e sinh ra trong gia đình nông thôn ngheo tai việt nam nên mọi điều ước của em đều khó thành hiện thực..hj..Đang là sv IT nên đọc bai viết này mình rất thích..minh muốn kết bạn với tất cả các bạn đang nghiên cứu về web (thích cntt)..xin hãy liên hệ với mình tại:!Mail: changtraicaothuong2091988@yahoo.com
Hihi ! cái email nghe kêu nhở ?
hjhj..anh clackken.smith là ai zậy?cho e học hỏi với…
Chào anh! em đang làm cái menu đa cấp nhưng rê chuột vào nó lại bị phần content che mất. Phải sửa như thế nào anh. cái này em làm bằng cả javascript và css nhưng đều bị như thế. Mong anh sớm trả lời em.
Cảm ơn anh!
nhờ anh làm ơn chỉ giúp em cách làm menu đa cấp nhưng khi di chuột vào nó là nó sổ ngang chứ không phải dọc như anh đã hướng dẫn, em cám ơn anh nhiều
tutorial giúp ích cho việc học web của em, cám ơn anh DW
Video xem không có hình bạn ơi, chỉ có tiếng không à. hichic
Bạn ơi mình mới biết được trang này từ hôm 6/8/2010 mình thấy trang này rất bổ ích cho những người mới học.thật tuyệt vời hơn nếu như bạn cho chép doạn code về và cả video nhìn rõ hơn, mình nhìn bạn viết chẳng thấy chữ gì chỉ thấy dòng thôi,hơn nữa mình doload cái công cụ viết và sửa trực tiếp trên trình duyệt bạn bảo nhưng dowload ko cài được.tải video về nghiền ngẫm nhưng chỉ có tiếng không có hình
Video vẫn bình thường mà bạn. Bạn thử download lại xem sao. Còn cái công cụ chỉnh sửa code trên firefox bạn download có chính xác là cái addon Web developer.
Đợtt này a DW đang bận nhờ a CK chỉnh lại hộ cái Tabindex của phần Comment cái nhé e nhấn Tab cái nó nhảy lên đầu trang mất.