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 (7004) Học thiết kế web giá rẻ
