Breaking News
random

Menu Full Color Vertical Dengan Efect Bounce

di
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 = "">
<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>
 source : HtmlDrive

Artikel Menarik Lainnya :