Simple menu ui efek flip css3

Simple menu ui efek flip css3
Simple menu ui efek flip css3
Simple menu ui efek flip css3
download Simple menu ui efek flip css3

of 3

  • date post

    13-Jun-2015
  • Category

    Internet

  • view

    67
  • download

    0

Embed Size (px)

Transcript of Simple menu ui efek flip css3

  • 1. 6/6/14 Simple Menu UI EfekFlip 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

2. 6/6/14 Simple Menu UI EfekFlip 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

  • HOME
  • MENU 1
  • MENU 2
  • MENU 3
  • MENU 4
Ganti tanda # untuk menyesuaikan url menu yang akan di tampilkan..!!! Older Post 3. 6/6/14 Simple Menu UI EfekFlip 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