NEWS
Loading...
  • Posted by : Johanes Djogan 17 Mei 2012

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

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

    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

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

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -