Tất cả bài viết | Lập trình Jquery
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
< input id="list-item6" name="PostVariable" value="6" type="radio" />
Phần Code Jquery
Lập trình Jquery Xem (6167) Học thiết kế web giá rẻ