This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 17 July 2018

Hide or Show Sidebar with jQuery Toggle


Đa phần thiết kế bố cục website thường chia làm 2 cột, một cột chứa nội dung (content-wrapper) và một cột chứa các tiện ích, treo quảng cáo (sidebar-wrapper). Khi người dùng cảm thấy phần không gian để đọc bài viết chưa đủ thỏa mãn họ thì lúc đó bạn cần nghĩ đến cho mình 1 nút có khả năng ẩn sidebar để tăng kích thước cho phần nội dung bài viết, bạn sẽ làm được nó khi đọc xong bài viết này

Demo


Ok thủ thuật này rất đơn giản thôi. Trước hết bạn cần tìm được id hoặc class của 2 thành phần "content" và "sidebar". Lấy ví dụ

<div class="outer-wrapper">
    <div class="content-wrapper">// Content</div>
    <div class="sidebar-wrapper">// Content</div>
</div>

Xác định được css của chúng, lấy ví dụ

.content-wrapper{float-left;width:70%}
.sidebar-wrapper{float-right;width:30%}

Bây giờ ta sẽ sử dụng jQuery Toggle class để làm ẩn đi sidebar, tôi sẽ chỉ tạo button cho trang bài viết

Đặt code HTML trước </body>

<b:if cond='data:view.isPost'>
    <a class='hide-sidebar' href='javascript:void(0)'>
        <span class='hide-sidebar-content'>
            <input checked='true' class='switch-input-sidebar' id='toggle-sidebar' name='set-name' type='checkbox'/>
            <label class='switch-label-sidebar' for='toggle-sidebar' title='Show/Hide Sidebar'/>
        </span>
    </a>
</b:if>

Viết CSS

.hide-sidebar{
    background-color:#7d026d;
    border-radius:3px 0 0 3px;
    box-shadow:rgba(0,0,0,.2) 0 4px 10px;
    position:fixed;
    z-index:444;
    padding:0;
    opacity:1;
    top:70px;
    right:-45px;
    transition:all .4s
}
 .hide-sidebar:hover{
    right:0
}
 .hide-sidebar-content{
    display:block;
    width:45px;
    height:40px;
    background:#fff;
    margin-left:4px;
    border-radius:3px 0 0 3px;
    margin-right:0;
    position:relative
}
 .switch-label-sidebar{
    position:absolute;
    cursor:pointer;
    font-weight:bold;
    text-align:left;
    top:20px;
    left:4px
}
 .switch-label-sidebar:after,.switch-label-sidebar:before{
    content:"";
    position:absolute;
    margin:0;
    outline:0;
    top:50%;
    -ms-transform:translate(0,-50%);
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
    -webkit-transition:all .4s ease;
    transition:all .4s ease
}
 .switch-label-sidebar:before{
    left:1px;
    width:34px;
    height:14px;
    background-color:#9E9E9E;
    border-radius:8px
}
 .switch-label-sidebar:after{
    left:0;
    width:20px;
    height:20px;
    background-color:#FAFAFA;
    border-radius:50%;
    box-shadow:0 0 2px 1px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084)
}
 .switch-input-sidebar:checked+.switch-label-sidebar:before{
    background-color:rgba(161, 111, 199, .8)
}
 .switch-input-sidebar:checked+.switch-label-sidebar:after{
    background-color:#7d026d;
    -ms-transform:translate(80%,-50%);
    -webkit-transform:translate(80%,-50%);
    transform:translate(80%,-50%)
}
 .switch-input-sidebar{
    display:none
}

Chèn code js trước </body>
<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
$("#toggle-sidebar").change(function() {
    0 == $(this).is(":checked") ? ($(".sidebar-wrapper").addClass("hide"), $(".content-wrapper").addClass("resize")) : ($(".sidebar-wrapper").removeClass("hide"), $(".content-wrapper"").removeClass("resize"))
});
//]]></script>
</b:if>

Trong đó bạn cần thay các class .sidebar-wrapper.content-wrapper thành class trong template của bạn.

Tiếp tục viết css khi có sự kiện switch button

.sidebar-wrapper.hide{display:none}
.content-wrapper.resize{width:100%}

Tương tự bạn cũng thay class .sidebar-wrapper.content-wrapper thành class trong template của bạn.

Cuối cùng đó là ẩn nút switch đi, khi đạt tới một "break point" nào đó template của bạn sẽ cần chỉnh lại bố cục để responsive với các thiết bị di động. Bạn check xem trong template của mình break point đó có giá trị bao nhiêu. Ví dụ với temp khi tới độ rộng 768px thì bắt đầu bỏ float:left-right của sidebar và content, khi đó nút switch này vô tác dụng ta sẽ ẩn nó đi bằng code sau

@media screen and (max-width:768px){.hide-sidebar{display:none}}

Đây là nút switch đơn giản, không làm vỡ bố cục cho phép người dùng có thể dễ dàng tăng không gian cho phần nội dung bài viết

Để lại bình luận nếu gặp khó khăn và chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js