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

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

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
 
 
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