HOW TO CREATE TRANSFORMED ICON MENU TO BE "X" | HTML5, CSS3 & JAVASCRIPT

Diposting oleh pada tanggal
HOW TO CREATE TRANSFORMED ICON MENU TO BE "X" | HTML5, CSS3 & JAVASCRIPT




What is icon menu?
Icon menu is important on the modern website. Like many other websites, icon menu with 3 stripes is most popular than the other icon menu. Usually, this icon menu have some link to go to the next page or other page.
Try the demo below, I have icon menu with 3 stripes and will transformed to be 'x' on click.




<br /> HOW TO CREATE ICON MENU<br />


ICON MENU

ICON MENU TRANSFORMED TO BE "X"








How to create a icon menu?
if you not yet to read my article before, please read HOW TO CREATE ICON MENU WITHOUT IMAGE | HTML5 & CSS3 before you go to the next step. In this article i'm not discusss again about how to create the icon menu.

How to transformed the icon menu to be "X"?
great question, in this discussion we using javascript to transform it to "x".
follow this step:

1. Create 4 div element and 4 class element, (like article before ). I have some class element, that is: menu-wrapper, row1, row2, and row3. After that, add a class element, that is: change. Add the change class element to the row1, row2, and row3.

Example:

<div class="menu-wrapper">
<div class="change row1"> </div>
<div class="change row2"> </div>
<div class="change row3"> </div>
</div>

The change class element, is used to transformed the icon menu to be"x" with javascript.

2. After that, Add the change class element to your css file. Create a combinators css with spacing.
We start with .change(spacing).row1.And Than, insert css property, that is: background-color, transform: rotate(), box-shadow.

Example:




.change .row1
{
background-color : #ff3424;
-webkit-transform : rotate(-45deg) translate(-8px, 8px);
transform : rotate(-45deg) translate(-8px, 8px);
-webkit-box-shadow : 0px 0px 2px rgba(00,00,00,.9);
box-shadow : 0px 0px 2px rgba(00,00,00,.9);
}

3. Next, add the combinators css for row2, and insert the css property, that is: opacity: 0 .

Example:


.change .row2
{
opacity : 0;
}

4. After that, add the combinators css for row3, and insert the css property, that is: background-color, transform: rotate(), box-shadow.

Example:



.change .row3
{
background-color : #ff3424;
-webkit-transform : rotate(45deg) translate(-8px, -8px);
transform : rotate(45deg) translate(-8px, -8px);
-webkit-box-shadow : 0px 0px 2px rgba(00,00,00,.9);
box-shadow : 0px 0px 2px rgba(00,00,00,.9);
}

5. Finally on css, add a new id with name #menu, and insert the css property, that is: display, background-color,color, and etc. This menu is used to check the icon menu, if success this menu will be displayed, but if failed this menu never display.

Example:




#menu{
display:none;
width : 200px;
background-color : #ff3424;
color : #fff;
text-align : center;
border-radius : 6px;
padding : 5px 0;
top: 15%;
left: 20%;
position : absolute;
z-index : 1;
padding-bottom: 20px;
-webkit-box-shadow : 0 3px 9px #000;
box-shadow : 0 3px 9px #000;
}


6. And than, back to your html code. Add a event attribute on the menu-wrapper, that is: onclick="callMenu(this)".

Example:


<div class="menu-wrapper" onclick="callMenu(this)">
<div class="change row1"> </div>
<div class="change row2"> </div>
<div class="change row3"> </div>
</div>

7. Next, create a new div element with id #menu, and stay it on the menu-wrapper and write something.

Example:


<div class="menu-wrapper" onclick="callMenu(this)">


<div id="menu">This is example of how to transformed the menu icon to"x"</div>
<div class="change row1"> </div>
<div class="change row2"> </div>
<div class="change row3"> </div>
</div>


8. After that, create a new javascript file. and create a new function, that is: callMenu(x). On this code, we used the classList.toggle() to make a toggle.

Example:


function callMenu(x) {
var tgle;
tgle = x.classList.toggle("change");
if (tgle) {
var showMenu;
showMenu = document.getElementById('menu');
showMenu.style.display = "block";
} else {
var showMenu;
showMenu = document.getElementById('menu');
showMenu.style.display = "none";
}
}


9. Finally of all that, call your css file and javascript file into your html file. and look that. How about it? :D.

What is the full code of this tutorial?
Okay, good people. I will give you for free. Don't forget to subscribe with this blog :D.

Try it yourselft:


If you have any ask or suggestion, please sent your ask or suggestion using the form comment on this blog.

HAPPY READING SHOW??

What's next?
HOW TO CREATE ICON BACK WITHOUT IMAGE | HTML5 & CSS3

Komentar

Posting Komentar