Cara buat menu Spinny leaf Keren

Cara buat menu Spinny leaf Keren

Mau coba menu Spinny leaf Keren untuk blog sobat?, Menu ini mirip Menu Rolling Ala Goyang Ayu ting ting Tanpa panjang kata silahkan sobat ikuti langkah-langkah berikut ini :

Pertama

Klik +
Jangan Lupa DOWNLOAD Template Lengkap untuk menjaga kesalahan

Kedua
Cari kode </head> dan setelah ketemu silahkan letakkan kode berikut di atas kode </head>

<style type="text/css">
nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>

Kedua
Silahkan Simpan dulu

Ketiga
Klik + Pilih
Cara Buat Menu Flip Animasi keren Ala Restoran

Silahkan Copy dan Paste Kode Berikut ini
<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>

Ganti JUDUL MENU dengan judul menu yang di kehendaki, dan kode #dengan sebuah alamat URL. Sesuaikan Nama Menu dengan nama menu yang di inginkan.
Cara buat menu Spinny leaf Keren 10 out of 10 ratings.

17 comments:

  1. wah,,boleh juga nih dicoba,,hhe,,makasih untuk infonya,,semoga dapat brmanfaat

    ReplyDelete
  2. menarik sekali artikelnya,,,terima kasih untuk infonya

    ReplyDelete
  3. menarik gan, asik nih mau langsung nyoba

    ReplyDelete
  4. kerne sekali modelnya.....kalau di pasang di blog cewek jadinya manis buanget.....

    ReplyDelete
  5. mantap Info Nya
    Janagn Lupa Kunjungi Blog saya
    http://apartemencasablanca.blogspot.com

    ReplyDelete
  6. Sangat bermanfaat banget buat saya yang lebih suka buat website pake script php dan jarang pake CMS.

    ReplyDelete
  7. mantaap gan
    bagus banget tuuh
    ijin cobain dulu yaa

    ReplyDelete
  8. keren n berwarna bgt.... tp sayang blog ane dah terlanjur putih.

    ReplyDelete
  9. menunya bagus gan...boleh copy ya?

    ReplyDelete
  10. wah mantap, tapi lumayan menguras pikiran gan...

    ReplyDelete
  11. Keren gan. langsung praktek ah. hehe

    ReplyDelete
  12. keren,,
    join dsni ya pemburumistery.blogspot.com

    ReplyDelete
  13. Wah, keren nih gan tutorialnya. Thanks ya...:)
    http://www.hijablicious.blogspot.com

    ReplyDelete

Terimakasih Kunjungan Anda - Silahkan Komentar- Salam Blogger Mohon Jangan Spam

Powered by Blogger.