Single Submenu dengan CSS3

Single Submenu dengan CSS3

apa kabar sobat,udah lama nih saya ga share trik css lagi,kali ini saya tadinya cuma iseng" otak-atik box css3,tapi akhirnya jadi begini deh,lalu saya buat saja jadi menu.menu ini menggunaan hover effect transform.jadi ketika kita hover/arahkan kursor kemenu,maka akan menampilkan beberapa menu lagi.
karena itu saya sebut saja nama'a sub menu.menu'a saya buat 2 style.yaitu dengan 4 menu dan 8 menu.tadi'a sih pengen nambahin lagi,tapi karena sudah agak lelah,jadi saya posting saja sekarang,mungin nanti saya modif lagi trik sub menu ini.

untuk contoh'a,kalian bisa lihat sendiri dibawah ini.direkomendasikan untuk menggunakan browser versi terbaru agar hasil'a maksimal.trik ini tidakberat kq,karena ini bukan css3 animation keyframe==v

bila kalian mau mencoba,silakan copy paste saja CSS dan HTML dibawah ini.

Css'a ditaruh di atas kode ]]></b:skin> .sedangkan untuk HTMl'a diantara <body> isi HTML </body>.
atau bisa juga ke layout=>add a gadget=> HTML/javascript.

-4 menu-


-HTML
<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
</ul></div>


-CSS

.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}




-8 menu-




-HTML

<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
<li class="topright"><a href="#">topright</a></li>
<li class="topleft"><a href="#">topleft</a></li>
<li class="bottomright"><a href="#">bottomright</a></li>
<li class="bottomleft"><a href="#">bottomleft</a></li>
</ul></div>



-CSS


.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}

.ringMenu ul li.topright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
right: -102px;
}

.ringMenu ul li.topleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
left: -102px;
}

.ringMenu ul li.bottomright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
right: -102px;
}

.ringMenu ul li.bottomleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
left: -102px;
}




-Style 1 4menu-





HTML

<div class='ringMenusatelit'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>




CSS

.ringMenusatelit {
width: 100px;
margin:auto;
}

.ringMenusatelit:hover {}

.ringMenusatelit ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenusatelit ul a {
color: white;
}
.ringMenusatelit ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenusatelit ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenusatelit ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenusatelit ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenusatelit:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenusatelit ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenusatelit ul li.top a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;}

.ringMenusatelit ul li.left a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;}

.ringMenusatelit ul li.bottom a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}

.ringMenusatelit ul li.right a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
.ringMenusatelit ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenusatelit ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenusatelit ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenusatelit ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}





-Style 2 4menu-






-HTML-
<div class='ringMenubulat'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>





-CSS-


.ringMenubulat {
width: 100px;
margin:auto;
}

.ringMenubulat:hover {}

.ringMenubulat ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat ul a {
color: #000;
}
.ringMenubulat ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenubulat ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenubulat ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenubulat ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}






-Style 3 4menu-


HTML
<div class='ringMenubulat1'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


CSS




.ringMenubulat1 {
width: 100px;
margin:auto;
}

.ringMenubulat1:hover {}

.ringMenubulat1 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul a {
color: #000;
}
.ringMenubulat1 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat1 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat1 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat1:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat1 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 350px;
left: 120px;
}
.ringMenubulat1 ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat1 ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat1 ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 270px;
left: 90px;
}
.ringMenubulat1 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 90px;
right: -30px;
}
.ringMenubulat1 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 180px;
left: 60px;
}





-Style 4 4menu-





-HTML-
<div class='ringMenubulat2'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


-CSS-




.ringMenubulat2 {
width: 100px;
margin:auto;
}

.ringMenubulat2 ul li a:hover {}

.ringMenubulat2 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul a {
color: #000;
}
.ringMenubulat2 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul li a {
display: block;
width: 100px;
height: 30px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 30px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenubulat2 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat2 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat2:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat2 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 120px;
left: 2px;
}
.ringMenubulat2 ul li.top a {-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
color:#fff;}

.ringMenubulat2 ul li.left a {
color:#fff;}

.ringMenubulat2 ul li.bottom a {
color:#fff;
}

.ringMenubulat2 ul li.right a {color:#fff;-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;}

.ringMenubulat2 ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;color:#fff;
border-radius: 50px;}

.ringMenubulat2 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 90px;
left: 2px;
}
.ringMenubulat2 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 30px;
left: 2px;
}
.ringMenubulat2 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 60px;
left: 2px;
}













Untuk HTML'a sendiri,ganti tanda pagar '#' Dengan URL web yang kamu inginkan,dan ganti juga namalinknya



Bila sobat mau mengganti warna background'a,perhatikan css dibawah ini


background: #161616; = diganti kode hexa decimal'a.

.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}


Untuk mengganti warna hover effect'a,

.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}






mengenai kode warna hexa,bisa dilihat disini

mengenai kode warna rgba colour ,bisa dilihat disini










Menarik bukan?arigatou gozaimasu selamat mencoba,semoga bermanfaat :)

Komentar

  1. Wah sayang Opera Modif ku gak isa ngeliat hasilnya XD
    nanti pas online aku cek deh :*
    MikhailRyu Blog | Anime and Blogger

    BalasHapus
  2. wiw, kreatif bgt masbroo.. salut dahh :)

    BalasHapus
  3. MAAAAAANTTTAAAAAAAAPPPPPPP!!!
    layak di beri award nih blog! XD

    BalasHapus
  4. wahh menu terbaru nihh.. dan kayaknya jgn ada nih beginiann...
    baru kali ini sy menemukannya...

    [kunjungan perdana, salam Simple Sample]

    BalasHapus
  5. sayangnya transform origin belum support bnyak browser, tapi aku akui udah banyak karya keren tercipta menggunakan transfom origin ini

    BalasHapus
  6. Gan biar li nya ke kiri semua gmn gan?

    BalasHapus
  7. @Animetekno tinggal di atur posisi'a ,edit css top sama left'a

    atau juga bisa posisi bottom dan right. (atas bawah kiri kanan)

    BalasHapus
  8. Tambah keren aja bang style barunya.
    yang plagiat hajar aja. XP
    dtengin breng breng yuk yg plagiat !

    BalasHapus
  9. @Zero_one plagiatmah cuma nyampah,buktikan kalau memang ngerti css,kalo ga bisa,ga usah sok" ngerti.betul bro?? wkwkwk

    BalasHapus
  10. wah, makin banyak makin keren..
    trus berkarya broo..

    BalasHapus
  11. ngopi bukannya plagiat...tpi belom mampu..

    :3

    BalasHapus
  12. @NewBie-X yaaa tapi seenggak'a kalau ngopi sertakan sumbernya .

    BalasHapus
  13. @Johanes djogan

    bener mas. keren deh pokoknya. jdi buat template yg ijo ijo gak bang?

    BalasHapus
  14. @NewBie-X

    kan klo ada sumbernya gak akan ada yg keusik bang.
    keep bloging bang

    BalasHapus
  15. gan kalo ganti posisi nya buat di footer gimana? kasih tau donk

    JAWAB PLISS

    BalasHapus
  16. mas cara nambah html nya dimana?bukan di box css kan yah?di dasbornya kan?

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template