Membuat Menu Flat UI dengan Efek Flip

OOrang Selalu tertarik akan sebua blog dengan tampilan menu dropdown atau vertikal dengan sangat menarik di pandang mata, semuanya itu dilakukan hanya karena kreativitas seorang blogger untuk menyajikan kepada para blogger sebuah tampilan inovativ hasil karya sendiri ataupun contekan dari blog tetanggaa, yang terpenting jangan cloning, maka saya tampilkan menu yang agak berbeda dengan blog lain dengan sentuhan CSS untuk itu kita lihat cara membuatnya

• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit html , save dan lihat hasilnya, semoga bermanfaat...

 <style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

nav ul {
  min-width: 600px;
  position: relative;
  display: table;
  margin: 50px auto;
  clear: both;
}

nav ul li {
  list-style: none;
  float: left;
}

nav ul li a {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 10px;
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
          perspective: 600px;
}

nav ul li .front {
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .front {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
     -moz-transform: rotateX(0deg) rotateY(180deg);
      -ms-transform: rotateX(0deg) rotateY(180deg);
       -o-transform: rotateX(0deg) rotateY(180deg);
}

nav ul li .back {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  text-align: center;
  z-index: -1;
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
     -moz-transform: rotateX(0deg) rotateY(-180deg);
      -ms-transform: rotateX(0deg) rotateY(-180deg);
       -o-transform: rotateX(0deg) rotateY(-180deg);
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

nav ul li:hover .back {
  z-index: 1;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg);
       -o-transform: rotateX(0deg) rotateY(0deg);
}

nav ul li i {
  line-height: 100px !important;
  color: white;
  vertical-align: middle !important;
}

nav ul li span {
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 300;
  line-height: 100px;
  color: white;
  text-transform: lowercase;
  vertical-align: middle;
}

nav ul li.color-1 .front,
nav ul li.color-1 .back {
  background-color: #3498db;
}

nav ul li.color-2 .front,
nav ul li.color-2 .back {
  background-color: #2ecc71;
}

nav ul li.color-3 .front,
nav ul li.color-3 .back {
  background-color: #1abc9c;
}

nav ul li.color-4 .front,
nav ul li.color-4 .back {
  background-color: #f39c12;
}

nav ul li.color-5 .front,
nav ul li.color-5 .back {
  background-color: #34495e;
}
</style>
<nav>
    <ul class="panel">
        <li class="color-1"> <a href="#">
                <div class="front">
                    <i class="fa fa-windows fa-4x"></i>
                </div>
                <div class="back">
                    <span>HOME</span>
                </div>
            </a>

        </li>
        <li class="color-2"> <a href="#">
                <div class="front">
                    <i class="fa fa-bars fa-4x"></i>
                </div>
                <div class="back">
                    <span>MENU</span>
                </div>
            </a>

        </li>
        <li class="color-3"> <a href="#">
                <div class="front">
                    <i class="fa fa-cogs fa-4x"></i>
                </div>
                <div class="back">
                    <span>PORTFOLIO</span>
                </div>
            </a>

        </li>
        <li class="color-4"> <a href="#">
                <div class="front">
                    <i class="fa fa-user fa-4x"></i>
                </div>
                <div class="back">
                    <span>ABOUT ME</span>
                </div>
            </a>

        </li>
        <li class="color-5"> <a href="#">
                <div class="front">
                    <i class="fa fa-envelope-o fa-4x"></i>
                </div>
                <div class="back">
                    <span>CONTACT</span>
                </div>
            </a>

        </li>
    </ul>
</nav>
</div>

Simpan dan Lihat Hasilnya

Demo Click here

Tweet

Ditulis Oleh: Fran Fallo at 2:03 PM