Css3 Circle System Menu

Assalamualaikum Wr. Wb.

Pa kabar smuanya,? Semoga baik semua yah? jangan kayak mimin, mimin lagi sakit ni (curhat) . Oke mimin sekarang akan menshare Ilmu yang saya dapatkan dari bang Sin1aja oke langsung aja :

menggunakan css3 :not jadi kalau browser anda support css3 maka menu ini akan terlihat sempurna, untuk belajar Css selector :not Silahkan ke W3school. Jadi Gini Saat tidak anda hover / sentuh bagian menunya, Tepatnya area ul maka menunya akan mengecil dan saat anda hover / sentuh menunya akan membesar dan tulisannya akan muncul ke bawah, dari pada penasaran langsung cek tkp.

1. Mukan kode css di atas ]]></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. Masukan kode HTML nya ke Gadget 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>

Jadi didalam menu itu bukan gambar itu icon cuman aku buat pake' css cuman iseng pengen belajar juga sih jadi ya gitu jadinya ckckkc kalau mau lebih keren bikin sendiri aja icon - iconnya :D soalnya aku gak terlalu pintar untuk membuat icon - icon :D tapi aku pengen bisa :) semoga aku bisa ya :), sekian posting kali ini moga bermanfaat.

Related Post