6/6/14 Simple Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/simple-menu-ui-efek-flip-css3.html 1/3
SAMSURY SITES Tutorial Blog
SIMPLE MENU UI 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 yang digunakan :
CSS
HOME BUTTON CSS3 MENU UI Simple Menu UI Efek Flip CSS3
6/6/14 Simple Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/simple-menu-ui-efek-flip-css3.html 2/3
.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;
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>
Ganti tanda # untuk menyesuaikan url menu yang akan di tampilkan..!!!
Older Post
6/6/14 Simple Menu UI Efek Flip CSS3 | SAMSURY SITES
samsury-sites.blogspot.com/2014/06/simple-menu-ui-efek-flip-css3.html 3/3
Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish
Preview
BY SAMSURY SITES
