Cara membuat menu navigasi fixed dengan efek 3D

Cara membuat menu navigasi fixed dengan efek 3D - Setelah sekian lama mencari tutorial untuk membuat menu navigasi, saya menemukan salah satu menu navigasi yang menurut saya sangatlah KEREN. Mengapa saya nilai sangat keren? Karna efek yang ditimbulkan dari menu navigasi yang satu ini adalah efek 3D.

Berikut langkah langkah untuk Cara membuat menu navigasi fixed dengan efek 3D.

1. Masuk akun blogger anda.
2. Masuk ke Tab Rancangan >> Template >> Edit HTML.
3. Masukkan Tag kode dibawah ini tepat sebelum kode <body> atau juga dapat anda letakkan tepat sebelum kode </body>

<style type='text/css'>
#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#008080; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px Arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#20B2AA; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#20B2AA; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhyphenhyphen8tiv-kkZ1TDC3_vRlTGRsNEfqaxZwFUHlwQz2ZoodpFMEWs4vjP6UQbs9arqW6vmU8pEPoudiT_ewX6cu18VtfswyjM2CI0lwkOKBEsP8zu1q83P-yr8MSTw09uuVJ_se9-Nm4EBc/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color: #20B2AA; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhyphenhyphen8tiv-kkZ1TDC3_vRlTGRsNEfqaxZwFUHlwQz2ZoodpFMEWs4vjP6UQbs9arqW6vmU8pEPoudiT_ewX6cu18VtfswyjM2CI0lwkOKBEsP8zu1q83P-yr8MSTw09uuVJ_se9-Nm4EBc/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }
</style>
<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='http://i7-rhapsody.blogspot.com/'><b>HOME</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#'>Blog</a></li>
<li><a href='#' target='blank'>Facebook</a></li>
<li><a href='#' target='blank'>Twitter</a></li>
<li><a href='#' target='blank'>Google+</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>ABOUT ME</b></a></li>
<li><a class='top-a' href='#'><b>CONTACT FORM</b></a></li>
<li><a class='top-a' href='#'><b>KATEGORI</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='#'>18+</a></li>
<li><a href='#'>Chord</a></li>
<li><a href='#'>Latihan Otot</a></li>
<li><a href='#'>Musik</a></li>
<li><a href='#'>Otomotif</a></li>
</ul>
<ul class='col'>
<li><a href='#'>Naruto Sshippuden</a></li>
<li><a href='#'>Ost Naruto</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Seputar Islam</a></li>
<li><a href='#'>Seputar Tokoh</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>Tutorial Komputer</a></li>
<li><a href='#'>Tutorial Photoshop</a></li>
<li><a href='#'>Wawasan</a></li>
<li><a href='#'>Other</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>REKAN</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#' target='blank'>wyzywigisme?</a></li>
<li><a href='#' target='blank'>Aku Dulu Anak Tk</a></li>
<li><a href='#' target='blank'>Color Hexa</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>KODE WARNA</b></a></li>
<li><a class='top-a' href='#'><b>SEARCH PAGE</b></a></li>
<li><a class='top-a' href='#'><b>SITE MAP</b></a></li>
<li><a class='top-a' href='#'><b>CONTACT</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#' target='blank'>Facebook</a></li>
<li><a href='#' target='blank'>Twitter</a></li>
<li><a href='#' target='blank'>Google+</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

4. Langkah terakhir Simpan tenolate anda.

Catatan: Anda juga dapat mengubah warna pada menu navigasi ini pada tag yang
sudah saya beri warna hijau.
Buka Tool Kode warna HTML.
Sekian dulu posting saya Cara membuat menu navigasi fixed dengan efek 3D semoga bisa sedikit membantu.

2 komentar

Arez Maher

January 19, 2014 at 11:44 AM ✖

Ilmu Baru nih nice share vroh

Balas

rido ady

January 19, 2014 at 11:56 AM ✖

oke gan makasih

✔ Berkomentarlah Dengan Baik dan Sopan.
✔ Mohon Tinggalkan Komentar Sesuai Artikel di Atas.
✘ Dilarang Memasukkan Link Hidup Pada Saat Berkomentar.
✘ Komentar yang bersifat spam, sara dan ancaman akan langsung di hapus.

Cara membuat menu navigasi fixed dengan efek 3D

2 komentar

Popular Posts

Labels