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.

simple navbar toggle

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.

Hãy để lại một câu trả lời bạn muốn

avatar
250
  Subscribe  
Thông báo
Scroll to top
0353.456.495