Menu Full Color Vertical Dengan Efect Bounce - Melanjutkan hobi dalam membuat sebuah menu untuk blog sangatlah menyenangkan . Kenapa menu ?? karena bagi saya keradaan menu pada sebuah blog sangatlah penting . Seberapa pentingkah ?? Sangat penting sekali mengingat menu merupakan alat penjelajah untuk keseluruhan isi blog itu sendiri . Kebiasaan saya dalam share sebuah menu selalu dengan posisi horizontal , tapi kali ini saya mencoba share dengan posisi vertical . Menu kali ini cukup unik karena hadirnya beberapa warna dan tersisipnya efect bounce didalamnya . Untuk jelasnya silahkan cek demonya.
Kustomisasi
Pada Edit HTML temukan kode ]]></b:skin> atau </style>
Tempatkan kode CSS dibawah ini , tepat diatas kode tersebut
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;}
50% {
width: 200px;}
70% {
width: 170px;}
80% {
width: 200px;}
90% {
width: 190px;}
100% {
width: 200px;
padding-left: 20px;}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;}
100% {
width: 5px;
padding-left: 0px;}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;}
50% {
width: 5px;}
70% {
width: 35px;}
80% {
width: 5px;}
90% {
width: 15px;}
100% {
width: 5px;
padding-left: 0px;}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #1F7D8F;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
Kode HTML dibawah ini , silahkan tempatkan sesuka hati brada
<div class = "container" style = "">source : HtmlDrive
<ul class = "nice-menu bounce">
<li class = "orange"><a href = "">Home</a></li>
<li class = "red"><a href = "">About</a></li>
<li class = "green"><a href = "">Portfolio</a></li>
<li class = "blue"><a href = "">Blog</a></li>
<li class = "bright"><a href = "">Contact</a></li>
<li class = "red"><a href = "">Very God</a></li>
</ul>
</div>
wah template nya baru yah sob?? kereeenn. ^^
BalasHapusPadahal dah lama lo hehe ketauan nih jarang maennya
Hapuswew mantab sob! keren
BalasHapus- salam damai -
lumayan hehe ...
Hapuspeace to
Wah manteb dan keren mas,, dengan efect bounce seperti ini blog akan jadi lebih unik dan cantik pastinya
BalasHapustentunya sob ...
Hapuscihuyy kang.. maknyuss menunya. hehe.. bisa ngepir kayak shockbeker motor :)
BalasHapusiya mas jadi nyut-nyutan hahay
Hapustemplate nya baru lagi ya kang xixiii... keren uy .... sekeren postingannya dan yg punya blognya hehehe...
BalasHapusngopi kang :)
Template lama kang .. cuma agak di modif saalit .. kamana wae yeuhh
HapusNo sepatunya...ukuran berapa kang Eka...hehe :)
HapusTak terhingga no'y mas bud hihi
HapusKeliat ndak pasaran ya kang...hehe
BalasHapusKeren pisan.. :)
Gak pasaran apa gak penasaran mas hehe
Hapusenyod2an euy.. mangstab mas brow :)
BalasHapusJiga dina kasur anyar atuh meren nya kang ... haha
HapusCSSnya lumayan panjang tp hsilx keren! maksih *smile
BalasHapusyang penting hasilnya sob hihi
HapusKeren kang, :)
BalasHapusLumayan buat koleksi mas ...
HapusMas,
BalasHapusBoleh tau HTML tombol Lintas.Me nya :D
*Gabisa diintip ^_^
ngumpet dimana ya hehe ...
HapusKeren Mas ..
BalasHapuslumayan mas
Hapuswaow.. very beautiful deh, hanya kata2 ini dapat saya tulis mas :)
BalasHapustips dan trik css nya arunik kang, mesti di BM dl
BalasHapus