Tạo Menu Dropdown Bằng Jquery - HocwebGiare

Có thể bạn quan tâm

Khóa học
- Chuyên viên website lành nghề Online (Free)
- Lập trình PHP Cơ Bản Online (Free)
- Thiết kế giao diện website Online (Free)
- Lập trình HTML5 CSS3 RWD JS BOOTSTRAP Online (Free)
Đăng ký
- Hướng dẫn đăng ký học
- Hướng dẫn thanh toán
- Đăng ký tham gia khóa học
Đồ án
Dịch vụ
- Tư vấn thiết kế website
- Thiết kế web doanh nghiệp
- Thiết kế web theo yêu cầu
- Thiết kế web di động (bản Mobile)
- Thiết kế giao diện (Skin) cho website
- Quản trị & chăm sóc website
- Khách hàng thân thiết
Hỏi đáp
Youtube
Tiện ích
- Công cụ thiết kế web chuẩn CSS3
- Công cụ tính toán website RWD
- Công cụ tạo nút Bootsrap
- Bảng màu dùng cho thiết kế web
- Kiểm tra website đáp ứng RWD
Blog HOT

Bài thực hành 29 - Hướng dẫn thiết kế giao diện web chuẩn RWD
Viết chương trình PHP đếm, ghép, sắp xếp các phần tử trong mảng (Phần 1)
Xây dựng website bán hàng online cơ bản bằng PHP (Phần 35)
Hướng dẫn tạo trang trình bày Video bằng Bootstrap
Cách tạo kiểu hiển thị dạng danh sách và dạng lưới bằng Bootstrap

Tất cả bài viết | Lập trình Jquery

Arial Georgia Serif Tahoma Verdana

Tạo menu Dropdown bằng Jquery Hướng dẫn tạo menu Dropdown bằng Jquery Phần định nghĩa CSS .drop-down-list { position: relative; display: inline-block; height: 20px; text-align: left; width: 300px; } .drop-down-list input { display: none; } .drop-down-list div { position: absolute; max-height: 150px; overflow-y: auto; width: 100%; } .drop-down-list > input.active:checked ~ div label { display: block; } .drop-down-list > input.active:checked ~ div { top: 100%; } .drop-down-list > input.inactive:checked ~ div { display: none; } .drop-down-list > input.inactive:checked ~ label.active { opacity: 1; } .drop-down-list > input.active:checked ~ label.inactive { display: block; } .drop-down-list > input.active:checked ~ label.active { display: none; } .drop-down-list > label.active, .drop-down-list > label.inactive { display: none; } .drop-down-list > label.active { display: block; opacity: 0; z-index: 10; } .drop-down-list > label { position: absolute; display: block; white-space: nowrap; width: 100%; } .drop-down-list div label { display: none; width: 100%; } .drop-down-list div input:checked + label { display: block; overflow: hidden; white-space: nowrap; z-index: 5; } .drop-down-list { display: inline-block; font-family: Arial; background-color: #CCCCCC; border-radius: 6px; color: #5E5E5E; height: 34px; } .drop-down-list > input:checked ~ div { border: 1px solid #CCCCCC; width: 94%; left: 3%; } .drop-down-list label, .drop-down-list div label { font-size: 14px; line-height: 14px; padding: 10px 3%; width: 94%; } .drop-down-list div label { background-color: #F3F3F3; } .drop-down-list > label:after, .drop-down-list div input:checked + label:after { display: block; background-color: #CCCCCC; content: url(icon.gif); padding: 0 10px; position: absolute; right: 0; top: 7px; } .drop-down-list div label:hover { background-color: #DFDFDF; } .drop-down-list div input:checked + label { background-color: transparent; overflow: hidden; } Phần thẻ HTML Chọn lớp học thiết kế web OnlineHãy chọn một lớp học Chuyên Viên Website Lành Nghề Online Thiết Kế Giao Diện Website Online Lập Trình PHP Cơ Bản Online Lập Trình HTML5,CSS3,RWD,JS Online Lập Trình PHP Nâng Cao Online < input id="list-item6" name="PostVariable" value="6" type="radio" /> Phần Code Jquery Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất

Tạo menu
Tạo menu Dropdown
Dropdown
Jquery menu
Bootstrap menu
JQUERY

Lập trình Jquery Xem (7185) Học thiết kế web giá rẻ

Thành viên

Tên truy cập: Mật khẩu:

Nhớ thông tin

Thống kê

Những học viên tích cực: mrbin, ngoctu, ducpham09070, ngocco, nguyendu Thành viên mới nhất: ducpham09070 Chúc mừng 5 thành viên VIP mới nhất: ducpham09070