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

<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>

.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:

<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.