Simple Menu Efek Flip CSS3

Layaknya simple tooltip dropdown menu css3 dan Flat UI menu efek flip css3 saya berikan contoh menu yang cukup simple menggunakan efek flip dari css3. Menggunakan satu button icon dengan horisontal flip dan tombol close ( toggler ). Fitur responsive juga sudah diterapkan pada menu ini sehingga lebih mudah menyesuaikan ke semua perangkat browser.

DEMO
VIEW CODE

Komponen :

CSS

.iconicmenu {
position: relative;
height: 45px;
overflow: hidden;
}

.iconicmenu, .iconicmenu * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

.iconicmenu > label { /* Main label icon to toggle menu state */
z-index: 1000;
display: block;
position: absolute;
width: 40px;
height: 40px;
float: left;
top: 0;
left: 0;
background: transparent;
text-indent: -1000000px;
border: 6px solid black; /* border color */
border-width: 6px 0;
cursor: pointer;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* transition for flipping label */
}

.iconicmenu > label::after { /* inner stripes inside label */
content: "";
display: block;
position: absolute;
width: 100%;
height: 18%;
top: 19%;
left: 0;
border: 6px solid black; /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* transition for flipping label */
}

.iconicmenu ul { /* UL menu inside container */
margin: 0;
padding: 0;
position: absolute;
margin-left: 40px;
background: #eee;
left: -100%; /* hide menu intially */
height: 40px; /* height of menu */
font: bold 14px Verdana;
text-align: center;
list-style: none;
opacity: 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-moz-perspective: 10000px;
perspective: 10000px;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in; /* transition for animating UL in and out */
}

.iconicmenu li {
display: inline;
margin: 0;
padding: 0;
}

.iconicmenu ul label { /* label button inside UL to close menu */
cursor: pointer;
position: relative;
height: 100%;
text-align: center;
}

.iconicmenu ul label::after { /* label button x */
content: "x";
display: inline-block;
line-height: 14px;
color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 20px;
height: 20px;
background: #16a085;
font-size: 15px;
margin: 5px;
margin-top: 10px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg); /* flip labels vertically onMouseover */
}

.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
border-color: darkred; /* highlight color of main menu label onMouseover */
}

.iconicmenu input[type="checkbox"]:checked ~ ul {background:#22313F;
left: 8px; /* Animate menu into view */
opacity: 1;
-moz-box-shadow: 1px 1px 5px gray;
-webkit-box-shadow: 1px 1px 5px gray;
box-shadow: 1px 1px 5px gray;
}

.iconicmenu li a {
display: block;
float: left;
text-align: center;
text-decoration: none;
color: #fff;
margin: 0;
padding: 10px;
padding-right: 15px;
height: 100%;
}

.iconicmenu li a:hover {
background: #1BA39C;
color: white;
}

@media screen and (max-width: 580px) {
.iconicmenu input[type="checkbox"]:checked ~ label {
display: none;
}
.iconicmenu input[type="checkbox"]:checked ~ ul {
margin-left: 0;
}
}

@media screen and (max-width: 560px) {
.iconicmenu {
overflow: visible;
}
.iconicmenu ul {
height: auto;
}
.iconicmenu ul li {
min-width: 200px;;
display: block;
}
.iconicmenu ul li a {
float: none;
text-align: left;
}
}

HTML

<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>

Source Tutorial

 

ngeberatin blog ga nih ?