Share Tạo sidebar chuyên nghiệp với thư viện Slidebars

[filiallion]

Language

Tiếng Việt

Thư viện Slidebars được dùng để tạo các sidebar trình bày nội dung, trình đơn trên website và hơn thế nữa đó là thư viện còn tạo ra các hiệu ứng ẩn, hiện sidebar đẹp mắt làm tăng thêm sự chuyên nghiệp cho website.

Việc sử dụng thư viện Slidebars rất đơn giản, các bạn tích hợp thư viện jQuery vào website và sau đó tải thư viện Slidebars tại địa chỉ https://github.com/adchsm/Slidebars để tích hợp vào website như nội dung mã lệnh sau:

<link href="path/to/slidebars.min.css" rel="stylesheet">
<script src="path/to/slidebars.min.js"></script>

Các bạn cài đặt thư viện Slidebars với nội dung mã lệnh như sau:

$(function() {
    var slidebars = new slidebars();
    
    slidebars.init();
    
    $('#toggle-id-1').on('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
        
        slidebars.toggle('id-1');
    });
});

Tiếp theo, các bạn trình bày nội dung mã lệnh HTML như sau:

<div canvas="container"></div>
<div off-canvas="id-1 left reveal">Content</div>
<a href="#" id="toggle-id-1">Toggle</a>

Các bạn có thể tìm hiểu thêm về thư viện Slidebars tại địa chỉ https://www.adchsm.com/slidebars.