HOW TO CREATE ICON MENU WITHOUT IMAGE

HOW TO CREATE ICON MENU WITHOUT IMAGE | HTML5 & CSS3

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, but many other website is using image to create icon menu.

How to create icon menu without image?

Look at the demo below, before you create icon menu.

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

ICON MENU

Please, follow this step until the end.

1. You must create 4 div element and 4 class element on your html code.
I have 4 div element with 4 class element, that is:
menu-wrapper, row1, row2, and row3.
Example:

2. Create a css file. Okay we start with menu-wrapper class.
Write some css property, that is: padding, line-height, background-color, border, border-radius, display, cursor, and transition-duration.

Example:

.menu-wrapper
{
padding : 2px 6px;
line-height : 1;
background-color : none;
border : 1px solid rgba(0,0,0,0);
border-radius : 1px;
display : inline-block;
cursor : pointer;
-webkit-transition : .4s;
transition : .4s;
}

3. After that, create a combinators css with a row1, row2, and row3 using child selector ( > ) .

Example:

.menu-wrapper > .row3, .menu-wrapper > .row1, .menu-wrapper > .row2

4. Next, insert some css property to create 3 stripes. That is: width, height, background-color, margin, transition-duration, and box-shadow.

Example:

.menu-wrapper > .row3, .menu-wrapper > .row1, .menu-wrapper > .row2
{
width : 35px;
height : 5px;
background-color : #26b14c;
margin : 6px 0;
-webkit-transition : .4s;
transition : .4s;
-webkit-box-shadow : 0 0 2px
rgba(0,0,0,.9);
box-shadow : 0 0 2px rgba(0,0,0,.9);
}

5. Finally, Call your css file into html. And look your HTML file. :)

What is the full code of this tutorial?
Okay, You can copy the code below for free, try it yourselft. More practice is more experience :D.

<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="initial-scale=1"><br />
<style type=
"text/css">
/*------------- content-------------*/
}
body
{
background-color : #f5f5f5;
}

.content-wrapper
{
padding : 10px 15px;
text-align : center;
}

.content-title
{
font-size : 24px;
margin : auto;
}

.demo
{
margin-top : 10px;
background-color : #eee;
padding : 5px;
}

/*--------- Menu icon -------------*/
.menu-wrapper
{
padding : 2px 2px;
line-height : 1;
background-color : none;
border : 1px solid rgba(0,0,0,0);
border-radius : 1px;
display : inline-block;
cursor : pointer;
-webkit-transition : .4s;
transition : .4s;
}

.menu-wrapper > .row3, .menu-wrapper > .row2, .menu-wrapper > .row1
{
width : 35px;
height : 5px;
background-color : #26b14c;
margin : 6px 0;
-webkit-transition : .4s;
transition : .4s;
-webkit-box-shadow : 0 0 2px rgba(0,0,0,.9);
box-shadow : 0 0 2px rgba(0,0,0,.9);
}

.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);
}

.change .row2
{
opacity : 0;
}

.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);
}

#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;
}
</style><br />
<title><br />
HOW TO CREATE ICON MENU<br />
</title><br />
</head><br />
<body><br />
<div class="content-wrapper"><div class="content-title">ICON MENU<br />
</div><div class="demo"><h4>ICON MENU<br />
</h4><div class="menu-wrapper"><br />
<div class="change row1"><br />
</div><div class="change row2"><br />
</div><div class="change row3"><br />
</div></div></div></div></body><br />
</html>

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

Thank you, for coming and for reading.
HAPPY READING SHOW.

What's next?
HOW TO CREATE TRANSFORMED ICON MENU TO BE "X"| HTML5, CSS3 & JAVASCRIPT

7 KILOMETER

HOW TO CREATE ICON MENU WITHOUT IMAGE | HTML5 & CSS3

ICON MENU

Komentar

Posting Komentar