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