Buat Menu Paling Keren Css3 Circle System Menu

Rasulullah SAW bersabda, "Sabar sebenarnya ialah sabar pada saat bermula (pertama kali) tertimpa musibah)

Hai kawan! Kali ini aku mau share nih Css3 Circle System Menu, bentuknya persis seperti gambar diatas. Dan menu ini menggunakan css3:not jadi jika browsermu mendukung css3 maka menu akan terlihat sempurna. Sehingga saat kamu menyentuh linknya, maka menunya akan mengecil dan sebaliknya akan membesar jika tidak kamu sentuh atau hover menu/linknya. Kalau masih penasaran langsung lihat aja demonya kawan... 

DEMO

Segala bentuk model dapat diikuti dengan css dan sudah banyak sekali blogger yang menguasai yang menciptakan karya-karya keren mereka, sudah lihat demonya? Mari simak cara menggunakannya atau lebih tepatnya cara memasangnya...

1. Masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

/* Name : Css3 Circle System Menu

   Author : SYSTEM OF BLOG

   URL : http://sin1aja.blogspot.com/

*/

.hapus:after {

visibility: hidden;

display: block;

font-size: 0;

line-height: 0;

content: " ";

clear: both;

height: 0;

width: 0;

}

.hapus { display: inline-block; }

* html .hapus { height: 1%; }

.hapus { display: block; }

ul.system-menu {

    margin: 0 auto 10px;

    padding: 0;

    position: relative;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;

    width: 390px

    }

ul.system-menu li {

    list-style-type: none;

    margin: 0 5px 0 0;

    padding: 0;

    float: left;

    position: relative;

    width: 70px;

    height: 80px;

    -moz-transition: all 500ms linear;

    -o-transition: all 500ms linear;

    -webkit-transition: all 500ms linear;

    transition: all 500ms linear

    }

ul.system-menu li a {

    position: absolute;

    margin: -30px 0 0 -43%;

    text-decoration: none;

    font: bold 13px/40px Arial, sans-serif;

    padding: 0;

    background: #21D319;

    color: transparent;

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

    border-radius: 100px;

    display: block;

    width: 50px;

    height: 50px;

    text-align: center;

    top: 45%;

    left: 50%;

    outline: none;

    border: 5px inset #F8FBFC;

    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);

    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);

    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);

    -moz-transition: all 100ms linear;

    -o-transition: all 100ms linear;

    -webkit-transition: all 100ms linear;

    transition: all 100ms linear

    }

ul.system-menu li a:hover {

    line-height: 130px;

    color: #000;

    border-color: #C5B386;

    background: #FAC800;

    -moz-transition-delay: 0.5s;

    -o-transition-delay: 0.5s;

    -webkit-transition-delay: 0.5s;

    transition-delay: 0.5s

    }

ul.system-menu li span.pembuka {

    position: absolute;

    left: 50%;

    margin: 0 0 0 -29%;

    top: 11px;

    width: 25px;

    height: 30px;

    background: #949596;

    -moz-box-shadow: 3px -3px 0 0 #ECECEC;

    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;

    box-shadow: 3px -3px 0 0 #ECECEC

    }

ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {

    position: absolute;

    background: #F0F0F0;

    padding: 2px;

    width: 15px;

    left: 3px

    }

ul.system-menu li span.satu {

    top: 5px

    }

ul.system-menu li span.dua {

    top: 13px

    }

ul.system-menu li span.tiga {

    top: 22px

    }

.empat, .lima, .enam {

    position: absolute

    }

.empat {

    border: 15px solid;

    border-color: transparent transparent #EEE transparent;

    top: -7px;

    left: 10px

    }

.lima {

    padding: 4px;

    background: #EEE;

    height: 5px;

    top: 22px;

    left: 14px

    }

.enam {

    padding: 4px;

    background: #EEE;

    height: 5px;

    top: 22px;

    left: 28px

    }

.abot, .abit {

    position: absolute;

    left: 15px

    }

.abot {

    width: 20px;

    height: 20px;

    background: #EEE;

    top: 20%;

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

    border-radius: 100px

    }

.abit {

    border: 10px solid;

    border-color: transparent transparent #EEE transparent;

    top: 33%

    }

.a, .b, .c, .d {

    position: absolute;

    padding: 5px;

    background: #FFF7F7;

    top: 26%

    }

.a {

    left: 25px;

    background: #39FF13

    }

.b {

    top: 27px;

    left: 13px;

    background: #0070FF

    }

.c {

    left: 25px;

    top: 27px;

    background: #FFE000

    }

.d {

    left: 13px

    }

.e, .f {

    position: absolute

    }

.e {

    width: 15px;

    height: 17px;

    background: rgb(171, 185, 163);

    top: 35%;

    left: 32%;

    border: 2px solid rgb(255, 255, 255)

    }

.f {

    border: 10px solid;

    border-color: transparent transparent rgb(255, 255, 255) transparent;

    top: -2px;

    left: 30%

    }

ul.system-menu:hover li:not(:hover) {

    -moz-transform: rotate(360deg) scale(0.7);

    -ms-transform: rotate(360deg) scale(0.7);

    -o-transform: rotate(360deg) scale(0.7);

    -webkit-transform: rotate(360deg) scale(0.7);

    transform: rotate(360deg) scale(0.7)

    }

2. Masukkan kode HTML diawah ini ke Gadget HTML/Javascript. Caranya masuk ke Tata Letak, kemudian tambah gadget, pilih HTML/Javascript.

<ul class='system-menu hapus'>

<li><a href="#">

<span class='empat'></span>

<span class='lima'></span>

<span class='enam'></span>Depan</a></li>

<li><a href="#"><span class='pembuka'>

<span class='satu'></span>

<span class='dua'></span>

<span class='tiga'></span></span>Artikel</a></li>

<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>

<li><a href="#">

<span class='a'></span>

<span class='b'></span>

<span class='c'></span>

<span class='d'></span>Kategori</a></li>

<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>

</ul>

Untuk ikon-ikonnya bisa kamu buat sendiri, oke? Kemudian upload dan masukkan url gambarnya ke kode diatas. Nah sekian postingan kali ini semoga bermanfaat kawan!