Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Cách thêm nút navbar toggle với hiệu ứng đơn giản

                    Navbar toggle button được hiểu theo cách đơn giản nhất đó là nút đóng mở menu được chèn cố định vào một vị trí trong theme bao gồm 2 hiệu ứng đóng và mở khi click vào button. Dưới đây là hướng dẫn thêm button vào mẫu template và demo xem trước.

                    Demo:


                    Cách thực hiện:

                    Bước 1: Thêm button vào vị trí muốn hiển thị trong template

                    Copy
                    <button class='navbar-toggle' arial-label='Menu' role='Menu' onclick='openMenu()' type='button'>
                      <span class='toggle-icon'></span>
                    </button>

                    Bước 2: Chèn css trong <b:skin ></b:skin>

                    Copy
                    
                    .navbar-toggle {
                        width: 28px;
                        height: 28px;
                        border: none;
                        padding: 0;
                        margin: 0;
                        background: transparent;
                        cursor: pointer;
                        outline: 0;
                    }
                    .navbar-toggle .toggle-icon {
                        position: relative;
                        width: 18px;
                        height: 2px;
                        display: inline-block;
                        background: #999;
                    }
                    .navbar-toggle .toggle-icon:before, .navbar-toggle .toggle-icon:after {
                        position: absolute;
                        left: 0;
                        width: 18px;
                        height: 2px;
                        background: #999;
                        content: " ";
                    }
                    .navbar-toggle .toggle-icon:before {
                        bottom: 12px;
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        transform: rotate(0);
                        transition-duration: 400ms;
                        transition-property: all;
                        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
                    }
                    .navbar-toggle .toggle-icon:after {
                        top: -6px;
                        -webkit-transform: rotate(0);
                        -moz-transform: rotate(0);
                        transform: rotate(0);
                        transition-duration: 400ms;
                        transition-property: all;
                        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
                    }
                    .navbar-toggle .toggle-icon.is-clicked {
                        background: rgba(153,153,153,0);
                    }
                    .navbar-toggle .toggle-icon.is-clicked:before {
                        bottom: 5px;
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        transform: rotate(45deg);
                        transition-duration: 400ms;
                        transition-property: all;
                        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
                    }
                    .navbar-toggle .toggle-icon.is-clicked:after {
                        top: -5px;
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        transition-duration: 400ms;
                        transition-property: all;
                        transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
                    }

                    Bước 3: Chèn javascript trước thẻ đóng </head> hay trước </body> đều được:

                    Copy
                    <script>//<![CDATA[
                    function openMenu() {
                      var element = document.getElementsByClassName('toggle-icon')[0];
                      element.classList.toggle('is-clicked');
                    }
                    //]]></script>

                    Với nút navbar toggle, có rất nhiều bài trên mạng chia sẻ, các bạn có thể tham khảo thêm.
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn