Đàn accordion trong css
|
Bài viết hướng dẫn tạo CSS accordion menu đơn giản nhưng hỗ trợ nhiều cấp độ của các mục bên trong. Cách làm này có thể chạy trên nhiều trình duyệt khác nhau. IE9+, Safari, Chrome, Firefox
Trong bài hướng dẫn này, menu chỉ sử dụng CSS, với việc áp dụng. đã kiểm tra bộ chọn lớp giả của CSS trên các hộp kiểm đầu vào phần tử. Ngạc ra, trong phần demo cũng có một phiên bản sử dụng jQuery, nếu bạn muốn có thêm các hiệu ứng động để tăng phần sinh động. DEMO TẢI XUỐNG NGUỒN Tạo cấu trúc HTML của menuCấu trúc HTML của menu này khá đơn giản. đó là sử dụng 1 danh sách các mục. Nếu một mục trong danh sách, lại có các mục con, thì chúng ta sử dụng một đầu vào[type=checkbox] kèm theo nhãn của nó để làm hàng trên cùng. And time, we will more. lớp có con vào mục đó trên danh sách. Tất cả các mục trong danh sách Lớp ngoài cùng, mà không có mục con, thì chỉ cần một thẻ liên kết là được. Chi tiết mã như dưới đây. ______8 Thêm CSS kiểuChúng ta sử dụng một cách khá đơn giản (ngày nay thường làm thế này), để phát hiện ra mục được nhấp và hiển thị các mục con của nó, chỉ bằng CSS. that as has been said at on, ta used a checkbox input element. With job select class. đã chọn hộp kiểm đầu vào đó, ta sẽ bắt được phần tử đó đã được kiểm tra hay chưa, và tiến trình hiển thị/ẩn các mục con của nó bằng cách thay đổi hiển thị từ "none" thành "block" (và ngược lại nếu để ẩn đi).Cụ thể từng bước từng bước một như sau. 1) Đầu tiên, chúng ta phải kiểm tra lại rằng tất cả các mục bên ngoài có chứa các mục bên trong, thì cần phải có hộp kiểm đầu vào như đã làm HTML mẫu ở trên . Nếu bạn quen thuộc với HTML rồi, thì công việc này khá đơn giản, ở hộp kiểm đầu vào, bạn cần đặt cho nó một giá trị id, và ở nhãn, bạn cần đặt giá trị id của hộp kiểm vào thuộc tính của nó. 2) Chúng ta cũng phải chắc chắn rằng, khi mà chúng ta click vào label của nó, thì checkbox đó cũng tự động được check. Nếu bạn quen thuộc với HTML rồi, thì việc này khá là đơn giản, ở input checkbox bạn cần đặt cho nó một id value, và ở label, bạn cần đặt value id của checkbox vào thuộc tính for của nó. Dưới đây là mã CSS mà chúng ta sẽ sử dụng để hiển thị Menu bằng CSS ở trạng thái ban đầu. Hiện tại, ta nhận thấy rằng cấu trúc HTML cho đầu vào, nhãn, danh sách các mục đã được xếp hạng theo thứ tự. Tiếp theo, chúng ta sử dụng cơ chế chọn. đã kiểm tra CSS để thực hiện hiển thị các phần tử con bên trong nó bằng cách thay đổi giá trị hiển thị từ "none" thành "block"; Khóa học Lập trình Bootstrap, HTML5, CSS3, RWD, JS0 Như vậy . Nếu bạn muốn menu có thêm các hiệu ứng chuyển động hoạt hình khi cụp xoè (hiện/ẩn) mục con, thì chỉ việc thêm javascript vào. DEMO. Bài viết được dịch dựa trên nguồn. https. // codyhouse. co/gem/css-multi-level-accordion-menu/ Yêu cầu báo giá Gửi email bài đăng nàyBlogThis. Chia sẻ lên TwitterChia sẻ lên Facebook Tất cả các bài viết. BootstrapBước 1. Tạo cấu trúc HTML
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion .panel{
border: none;
box-shadow: none;
border-radius: 0;
text-align: right;
}
#accordion .panel-heading{
padding: 0;
border: none;
}
#accordion .panel-title a{
display: block;
padding: 10px 50px 10px 20px;
background: #fff;
font-size: 16px;
font-weight: 600;
color: #c52d37;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{
content: "\f068";
font-family: fontawesome;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
border: 1px solid #c52d37;
font-size: 15px;
font-weight: normal;
color: #c52d37;
position: absolute;
top: 2px;
right: 0;
transition: all 0.5s ease 0s;}#accordion .panel-title a.collapsed:after{
content: "\f067";
}
#accordion .panel-body{
padding: 10px 50px 10px 20px;
border: none;
font-size: 14px;
color: #888;
line-height: 25px;
}Bước 2. Tạo cấu trúc CSS Khóa học Lập trình Bootstrap, HTML5, CSS3, RWD, JS Bước 3. Call library Bootstrap Bước 5. Call library JQUERY
Bootstrap Xem (4190) Học thiết kế web Bước 1. Tạo cấu trúc HTML
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion .panel{
border: none;
box-shadow: none;
border-radius: 0;
text-align: right;
}
#accordion .panel-heading{
padding: 0;
border: none;
}
#accordion .panel-title a{
display: block;
padding: 10px 50px 10px 20px;
background: #fff;
font-size: 16px;
font-weight: 600;
color: #c52d37;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{
content: "\f068";
font-family: fontawesome;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
border: 1px solid #c52d37;
font-size: 15px;
font-weight: normal;
color: #c52d37;
position: absolute;
top: 2px;
right: 0;
transition: all 0.5s ease 0s;}#accordion .panel-title a.collapsed:after{
content: "\f067";
}
#accordion .panel-body{
padding: 10px 50px 10px 20px;
border: none;
font-size: 14px;
color: #888;
line-height: 25px;
}Bước 2. Tạo cấu trúc CSS Khóa học Lập trình Bootstrap, HTML5, CSS3, RWD, JS Bước 3. Call library Bootstrap Bước 5. Call library JQUERY |
