Top Banner
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. DEM O VIEW CODE Komponen yang digunakan : CSS HOME BUTTON CSS3 MENU UI Simple Menu UI Efek Flip CSS3
3

Simple menu ui efek flip css3

Jun 13, 2015

Download

Internet

Samsury Sites
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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 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

Page 2: 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

Page 3: 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 3/3

Sign out

Notify me

Enter your comment...

Comment as: Virlyz Nyzam (Google)

Publish

Preview

BY SAMSURY SITES