Dropdown menu là một trong những cách trình các menu trên trang web khá được ưa chuộng. Dropdown menu giúp tiết kiệm diện tích để trình bày các menu, đặc biệt là những menu có tính phân cấp như danh mục sản phẩm, chuyên mục tin tức, … mà trong đó chỉ có danh mục gốc của nó được hiện thị.
Trong Video này, chúng ta sẽ sử dụng CSS và jQuery để thiết kế một Dropdown menu như hình bên dưới .
Để tạo Dropdown menu, bạn cần biết cách sử dụng thuộc tính position trong CSS, nếu bạn chưa nắm rõ về thuộc tính này, bạn có thể xem thêm trong bài: CSS absolute position. Ngoài ra bài học cũng cung cấp cho bạn những kiến thức khá thú vị về về cách sử dụng jQuery và ôn lại những thuộc tính CSS:
Dropdown menu với jQuery và CSS
Download Demo Dropdown menu (8.8 KiB, 2,372 Lượt tải)
Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter 
Đinh Văn Phường (4)
Nguyen Van Than (2)
Ban xe dap the thao (1)
Bùi Văn Thiêm (1)
{ 26 comments… read them below or add one }
Cái extension của Chrome tên là gì thế anh ơi ?
Live Stylesheets, em có thể tìm và download
Theo HHV, vấn đề không phải là drop down menu mà là ở cấu trúc nội dung. Drop down menu multi level được các bạn rất ưa chuộng mặc dù theo HHV chỉ cần 2 tầng là đủ, 3 tầng cũng chỉ dành cho những trang có nội dung cực rộng rồi…
Dùng js và jquery nhìn mượt mà thật
HHV nói rất đúng, Thông thường 3 tầng là khá rộng rồi, cái demo làm nhiều nhiều cho anh em dễ hình dung
bạn có thể chỉ cho mình cách chèn image vào drop menu được không?mong bạn chỉ bảo
Bạn có thể chèn hình và sử dụng CSS để căn chỉnh bình thường mà, cái này đơn giản mà bạn, cái quan trọng là ý tưởng bạn trình bày nó như thế nào thôi?
Thanks bác nhiều! Rất là bổ ích, mặc dù ko biết tí mù gì về jquery nhưng xem bác hướng dẫn thấy cũng biết cách dùng ^^
có thể dùng zen coding cho notepad++ để viết code nhanh hơn.
Thanks bạn, vì trong TUT muốn cho mọi người dễ hiểu hơn nên không muốn làm nhanh.
Nếu rảnh bạn hướng dẫn mọi người 1 Tut sử dụng Zen coding cho notepad++ nhé, nếu được thì cám ơn bạn
Minh vua dang tap tanh hoc Dreamweaver, nhung Thay chi day lam bang CSS Rule trong Dreamweaver ,k co chi viet code,nen Peter Tran viet code minh k hieu gi ca. Ban co the huong dan lam bang CSS rule trong Dreamweaver k?
Neu muon hoc viet code giong ban thi phai bat dau hoc nhu the nao moi viet duoc ? O trung tam minh hoc chi day bang lenh trong DW thoi,k co day viet code.
Thanks ban!
A cho e hỏi ở đoạn 20p15′ để chỉnh cho menu cấp 2 (#nav ul) từ ngang thành dọc thay vì viết thêm top: 25px; left: 0 vào thì e thêm dòng #nav ul li { float: none;} thì menu cấp 2 nó cũng dọc xuống. A có thể giải thích cho e liệu cách e làm thế cấu trúc của nó có bền vững o? Thank a nhìu nhé!!!!
Hi em,
top: 25px và left: 0 px là cách căn chỉnh vị trí của sub menu theo vị trí tuyệt đối khi sử dụng absolute position. Giá trị này không liên quan gì đến float. Em có thể xem thêm về absolute position tại đây: http://www.ewebvn.com/css-absolute-position.html
cái addon lấy màu trên website tên là gì các bác nhỉ .Thank all
Đó là extension của Chrome có tên là Color Generator
anh ơi tình hình là không xong rồi bản đề mô này chỉ chạy được trên chrome thôi em chạy trên ie mà fifox không được nó bị lổi .
OKie em,
Để tối anh check lại xem sao.
hi anh, vậy phải làm sao để nó chạy trên trình duyet FF va EI đây anh?
anh PT cho tôi hỏi,
làm sao cái notepadd++ có thể hiện popup nhớ câu lệnh được.
thanks anh.
Chào bạn
Bạn vào Bạn vào Settings -> Preferences… và cấu hình như hình sau nhé>
Anh PT ơi, cho em hỏi, làm thế nào để khi di chuột vào các menu thì sổ ra các thành phần nằm theo chiều nganh chứ không theo chiều dọc như trong clip của anh vậy, ví dụ như khi di chuột vào About thì các thành phần Item1, Item2, Item3 nằm theo chiều ngang. Mong anh giải đáp và cám ơn những bài viết rất bổ ích cho những người mới nhập môn như em.
Chào em,
Cái này mình chỉ cần chỉnh lại CSS là được, Các phần tử li của tầng thứ 2 em gán thêm thuộc tính float: left, tinh chỉnh thêm các thành phần khác để đạt yêu cầu.
Nếu không được anh sẽ demo cho em
cái này hay quá tình yêu ơi….thanhks bạn nhìu nhé…làm được rùi
Không hiểu sao nhưng khi thử test với FF và IE thì không thấy hoạt động và giao diện của CSS bị vỡ
Cái này khi dùng chuột hover liên tục wa lại các menu trong thời gian nhanh thì sẽ bị vỡ giao diện tùm lum
anh ơi cho em hỏi cái câu trong CSS này:
#nav li:hover ul ul, => có dấu phẩy ở cuối dòng có nghĩa là gì thế anh,em mới gặp trường hợp này lần đầu.Thanks anh nhiều
{ 1 trackback }