How to add navbar toggle button for blogger

    Navbar toggle button is the simplest way to open a menu that is permanently inserted into a location in the theme including two closed and open effects when clicked on the button. Here is a tutorial on adding a button to the template and a preview demo.
    navbar toggle


    Demo:


    Detailed instructions:

    Step 1: Add the button to the position you want to display in the template

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

    Step 2: Insert css in <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);
    }

    Step 3: Insert javascript before the closing tag </head> or before </body> okay:

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

    With navbar toggle button, there are many articles on network sharing, you can refer more.

    No comments