menu blog dengan CSS

Kali ini D-G BLOG akan posting cara membuat menu, namun menunya bukan menu biasa melainkan menggunakan css dan hover. Jadi dijamin keren dan dengan tampilannya lingkaran dan rapi jadi cocok kalian gunakan. Sebelum kalian melihat caranya kalian bisa melihat dulu demonya, seperti dibawah ini

• HOME
• HOME2
• HOME3
• HOME4
• HOME5

Memang di blog lain ada yang mengeshare seperti ini namun yang saya share disini sudah saya edit sedikit sedikit sesuai keinginan saya.
Kalau begitu ini cara membuatnya.
1. Masuk ke www.blogger.com
2. Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut diatasnya



.DGBLOG:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
. DGBLOG  { display: inline-block; }
* html .hapus { height: 1%; }
. DGBLOG  { 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)
    }





5. Taruh Kode berikut dibagian yang anda inginkan untuk meletakan menu tersebut



<ul class='system-menu DGBLOG'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>HOME1</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>HOME2</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>HOME3</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>HOME4</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>HOME5</a></li>
</ul> 



NB:Kebetulan kode ini bertabrakan dengan kode di template D-G BLOG sehingga menyebabkan menu tersebut tercampur dengan bullet dan teksnya tidak mau hilang. Jadi kalau hal ini terjadi di blog kalian berarti template kalian bertabrakan dengan kode ini;

sumber  :  http://davidgunawan123.blogspot.com/2013/02/menu-blog-dengan-css.html

Artikel Terkait: