Sabtu, 02 Juni 2012

Cara Membuat Menu Cantik Mirip Daun Di Blog


By on 17.09

Blazer Blog, Tips Blog - Kali ini saya akan membahas bagaimana cara membuat menu yang mirip daun, yah saya katakan mirip daun, memang bentuknya kaya daun, menu ini menggunakan CSS tanap Javascript, menu ini dibuat oleh css-tricks.com.


Berikut cara membuat menu daun.

1. Login ke Blog kamu.
2. Pilih Add Gadget, pilih HTML JavaScript. Copy kode dibawah ini


<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>
<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  kata yang berwarana biru dengan kata lainnya, dan ganti tanda # dengan url yang di tuju.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

27 komentar:

  1. makasih,, hehe lucu menunya,, berkunjung balik ya N komentar disini http://rasyashare.blogspot.com/2012/05/rebutan-rumah-gratis-semudah-1-2-3.html

    BalasHapus
  2. ane coba kok gak bisa ya? apa ada yang salah?

    BalasHapus
  3. Berdasarkan yang saya coba menu ini 100% berhasil, lihat saja demo nya, dan juga saya pernah mencobanya, coba cek ulang jangan di edit terlebih dahulu, jika sudah berhasil baru edit.

    BalasHapus
  4. terima kasih banyak ya :D
    SKRG BLOG KU TAMBAH KEREN

    BalasHapus
  5. mantap gan...
    ijin ambil ilmunya ya sob...makasih
    belajar dulu dech...
    ohmsis.blogspot.com

    BalasHapus
  6. kok punya ku ada garis ny gitu ya di sekitar tulisan menu nya

    BalasHapus
  7. Asyikkkkk...... !!!
    Maakasih ilmunye....
    Lagi belajar bikin blog neh ...

    BalasHapus
  8. makasih buat infonya gan sangat bermanfaat

    BalasHapus
  9. mari blogwalking
    http://www.inginmencobasuksess.blogspot.com/

    BalasHapus
  10. gan mo naya nih
    klo menunya sudah terbentuk sesuai yang kita inginkan terus bagaimana cara post di setiap menunya ?
    thx be 4^^

    BalasHapus
  11. Silahkan ganti tanda pagar dengan URL yang dituju atau alamat situs web pada bagian Addres Bar

    BalasHapus
  12. wow.. makasih yah infox yoo... :D

    BalasHapus
  13. blogx cantik dan bermanfaat, mohon ijin untuk dipake di blog saya. http://aksarafirdaus.blogspot.com/
    thanks

    BalasHapus
  14. Bagus nih,,,tapi bisa dipake di wp gk ?

    BalasHapus
  15. ga tau mas, ane ga mengenal bagaimana wp

    BalasHapus
  16. saya sering berkunjung di blog blog, postingan ini sangat menarik serta enak di baca tentang cara membuat menu cantik mirip daun.... saya berharap bisa berkunjung lagi

    BalasHapus
  17. mksh infonya..
    kunjungi jg
    http://otobiazza.blogspot.com

    BalasHapus
  18. aku mau tambahkan 13 menu di blo tapi ku g tau caranya

    BalasHapus
  19. terima kasih atas tutorialnya , sangat membantu, salam sukses , dan salam blogger

    BalasHapus
  20. wah mantap infonya,,,ijin comoot gan,, mampir gan di www.bukuqw.com

    BalasHapus
  21. wah, keren nih gan.. thnx bngt infonya.. d tunggu kunjungan balik nya y

    BalasHapus
  22. Thanks informasinya sangat bermanfaat sekali bagi saya
    salam blogger dari gustilubis.blogspot.com
    kunjungi blog saya jika ada waktu ya
    thanks

    BalasHapus
  23. blogwalking gan,ijin sedot

    BalasHapus
  24. bagus gan . . lucu juga bisa muter2 hehe

    BalasHapus