Single Submenu dengan CSS3

Posted by : Johanes Djogan 17 Mei 2012

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 :)

{ 31 comments... read them below or Comment }

MikhailRyuMinggu, April 22, 2012 10:06:00 PM
Wah sayang Opera Modif ku gak isa ngeliat hasilnya XD
nanti pas online aku cek deh :*
MikhailRyu Blog | Anime and Blogger
BalasHapus
Alam PerwiraSenin, April 23, 2012 7:15:00 AM
wiw, kreatif bgt masbroo.. salut dahh :)
BalasHapus
Johanes djoganSenin, April 23, 2012 8:33:00 AM
@Alam Perwira thx sob.
BalasHapus
Ilham HanifSenin, April 23, 2012 9:03:00 AM
MAAAAAANTTTAAAAAAAAPPPPPPP!!!
layak di beri award nih blog! XD
BalasHapus
RenadeL PizeSenin, April 23, 2012 9:42:00 AM
keren2....
BalasHapus
UqiSenin, April 23, 2012 10:20:00 AM
Nice,
BalasHapus
DoodeyzSenin, April 23, 2012 12:32:00 PM
wah tiba-tiba jadi banyak xD
BalasHapus
Simple SemuaSenin, April 23, 2012 12:54:00 PM
wahh menu terbaru nihh.. dan kayaknya jgn ada nih beginiann...
baru kali ini sy menemukannya...

[kunjungan perdana, salam Simple Sample]
BalasHapus
Johanes djoganSenin, April 23, 2012 1:53:00 PM
thx all :)
BalasHapus
Hamzah JowasSenin, April 23, 2012 3:54:00 PM
terlalu rumit
BalasHapus
Johanes djoganSenin, April 23, 2012 5:20:00 PM
yg gampang kq dibuat rumit=__=
BalasHapus
AtNetterSenin, April 23, 2012 9:30:00 PM
keren om :) mantapppp
BalasHapus
Johanes djoganSelasa, April 24, 2012 4:27:00 AM
@AtNetter jangan panggil om" =___=" hadehhh
BalasHapus
system of blogSelasa, April 24, 2012 8:55:00 AM
sayangnya transform origin belum support bnyak browser, tapi aku akui udah banyak karya keren tercipta menggunakan transfom origin ini
BalasHapus
RyanJumat, April 27, 2012 9:43:00 AM
keren mas anes..
BalasHapus
trii waluyoJumat, April 27, 2012 10:51:00 AM
Keren sob,, tak coba ah....
BalasHapus
AnimeteknoSabtu, Mei 05, 2012 8:35:00 AM
Gan biar li nya ke kiri semua gmn gan?
BalasHapus
Johanes djoganSabtu, Mei 05, 2012 3:36:00 PM
@Animetekno tinggal di atur posisi'a ,edit css top sama left'a

atau juga bisa posisi bottom dan right. (atas bawah kiri kanan)
BalasHapus
Zero_oneKamis, Mei 17, 2012 8:56:00 AM
Tambah keren aja bang style barunya.
yang plagiat hajar aja. XP
dtengin breng breng yuk yg plagiat !
BalasHapus
Andi X-GenKamis, Mei 17, 2012 8:57:00 AM
keren2 mas css nya
BalasHapus
Johanes djoganKamis, Mei 17, 2012 9:04:00 AM
@Zero_one plagiatmah cuma nyampah,buktikan kalau memang ngerti css,kalo ga bisa,ga usah sok" ngerti.betul bro?? wkwkwk
BalasHapus
Johanes djoganKamis, Mei 17, 2012 9:13:00 AM
@Andi X-Gen thx :)
BalasHapus
RyanKamis, Mei 17, 2012 10:22:00 AM
wah, makin banyak makin keren..
trus berkarya broo..
BalasHapus
MrUqhiLCST •°Kamis, Mei 17, 2012 10:57:00 AM
Wah,Tq udah update Menu barunya :D
BalasHapus
TKJ 1 bisaJumat, Mei 18, 2012 9:21:00 AM
wowowowowowo MANTAP, thanks john
BalasHapus
NewBie-XSabtu, Mei 19, 2012 12:58:00 AM
ngopi bukannya plagiat...tpi belom mampu..

:3
BalasHapus
Johanes djoganSabtu, Mei 19, 2012 8:53:00 AM
@NewBie-X yaaa tapi seenggak'a kalau ngopi sertakan sumbernya .
BalasHapus
Zero_oneSabtu, Mei 19, 2012 12:41:00 PM
@Johanes djogan

bener mas. keren deh pokoknya. jdi buat template yg ijo ijo gak bang?
BalasHapus
Zero_oneSabtu, Mei 19, 2012 12:43:00 PM
@NewBie-X

kan klo ada sumbernya gak akan ada yg keusik bang.
keep bloging bang
BalasHapus
ZZSharez SenseiKamis, Desember 13, 2012 9:11:00 PM
gan kalo ganti posisi nya buat di footer gimana? kasih tau donk

JAWAB PLISS
BalasHapus
hajar khMinggu, Desember 01, 2013 4:37:00 PM
super sekali brooo.... (y)
BalasHapus

Tambahkan komentar

Muat yang lain...

"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"

DJogzs

Single Submenu dengan CSS3

{ 31 comments... read them below or Comment }

Translate