How to chnage menu button into close button on click and again into menu button after another click

I am new to custom coding for WordPress. I am actually creating a custom theme on my own and want a dropdown menu on my blog like www.moz.com has.

I coded everything well and it was working as expected but the menu button was not changing into close button after click because I do not know how to do that with only JavaScript(I do not want to use JQuery on my blog).

Please help.

Here is the code:

label onclick=”myFunction()” class=”toggle”

Here is the css:

.toggle {display: none;
cursor: pointer;
width: 18px;
height: 18px;
border-top: solid #ea5c5c 2px;
position: relative;
margin: 12px 0 8px 0;}

.toggle:before {content: ”;
display: block;
width: 100%;
height: 2px;
background: #ea5c5c;
position: absolute;
left: 0;
top: 6px;}

.toggle-close:after {content: ”;
display: block;
width: 100%;
height: 2px;
background: #ea5c5c;
position: absolute;
left: 0;
bottom: 0;}

.toggle-close:before {content: ”;
display: block;
width: 100%;
height: 2px;
background: #ea5c5c;
position: absolute;
left: 0;
top: 6px;
transform: rotate(45deg);}

.toggle-close:after {content: ”;
display: block;
width: 100%;
height: 2px;
background: #ea5c5c;
position: absolute;
left: 0;
bottom: 0;
transform: rotate(-45deg);}

Tell me how can I use .toggle-close to change menu button into close button on click.

Thanks in advance!
Hope I will find my answer.

Read more here:: How to chnage menu button into close button on click and again into menu button after another click

Leave a Reply

Your email address will not be published. Required fields are marked *