April 18, 2013

Cute Spinny Leaf Untuk Tampilan Menu Yang Lebih Aduhai

Kali ini saya ingin share sebuah menu yang tampilannya berbeda dan sangat "cute".

Pemilihan warna yang menarik dan terkesan girly sangat cocok digunakan bagi blogger-blogger wanita dan untuk blog-blog yang bertemakan personal blog.





Coba perhatikan warna dan juga efek yang dihasilkan oleh menu tersebut...

Sangat menarik bukan???




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: #FE80B9; }
#price { background: #FFFF00; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }


<nav>
 <ul class="top-menu">
 <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
 <li><a href=#>Sitemap</a><div class="menu-item" id="cataloge"></div></li>
 <li><a href=#>Tools</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 Us</a><div class="menu-item" id="contact"></div></li>
  </ul>
</nav>

Terima kasih...
Semoga bermanfaat...


Referensi : http://css-tricks.com

17 comments

  1. tutorialnya sellau keren gan.. mantab pokoknya

    ReplyDelete
  2. link sudah saya pasang di http://handikabp.blogspot.com
    trima kasih atas kerjasamanya :D

    ReplyDelete
  3. Kreasi warna yang menarik, terimakasih udah berbagi...
    Saya juga sudah follow back, makasih atas kunjungannya, salam :)

    ReplyDelete
  4. cantik menunya ^^ warna warni.

    ReplyDelete
    Replies
    1. :) cocok buat blogger-blogger cewek biasa kan suka warna pink atau ungu...:)

      Delete
  5. cantik.. saya tertarik untuk mencobanya, soalnya tab menu saya di blog sangat keanak anakan :)

    saya coba yaa...
    makasi

    ReplyDelete
  6. waaahhh warnanya cantik sis ..
    aku suka banged ,
    hehe mau ah di coba ,,
    maksih ya sis :D

    btw aku udh follback ya ;)

    ReplyDelete
  7. Benar benar bagus sob, kreatif banget.

    ReplyDelete
  8. numpang nanya boss , , , kode html ma css di letak nya di mana boss huhhh

    ReplyDelete