Langsung ke konten utama

Menu Full Color Vertical Dengan Efect Bounce

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

Komentar

  1. AnonimSenin, Oktober 07, 2013

    wah template nya baru yah sob?? kereeenn. ^^

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Oktober 07, 2013

      Padahal dah lama lo hehe ketauan nih jarang maennya

      Hapus
  2. no dataSenin, Oktober 07, 2013

    wew mantab sob! keren
    - salam damai -

    BalasHapus
  3. UnknownSenin, Oktober 07, 2013

    Wah manteb dan keren mas,, dengan efect bounce seperti ini blog akan jadi lebih unik dan cantik pastinya

    BalasHapus
  4. Mas AndesSelasa, Oktober 08, 2013

    cihuyy kang.. maknyuss menunya. hehe.. bisa ngepir kayak shockbeker motor :)

    BalasHapus
  5. Eka IkhsanudinSelasa, Oktober 08, 2013

    template nya baru lagi ya kang xixiii... keren uy .... sekeren postingannya dan yg punya blognya hehehe...
    ngopi kang :)

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Oktober 08, 2013

      Template lama kang .. cuma agak di modif saalit .. kamana wae yeuhh

      Hapus
    2. Staff AdministratorSelasa, Oktober 08, 2013

      No sepatunya...ukuran berapa kang Eka...hehe :)

      Hapus
    3. Sopala MultapaSelasa, Oktober 08, 2013

      Tak terhingga no'y mas bud hihi

      Hapus
  6. Staff AdministratorSelasa, Oktober 08, 2013

    Keliat ndak pasaran ya kang...hehe
    Keren pisan.. :)

    BalasHapus
  7. Kang IsmetSelasa, Oktober 08, 2013

    enyod2an euy.. mangstab mas brow :)

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Oktober 08, 2013

      Jiga dina kasur anyar atuh meren nya kang ... haha

      Hapus
  8. Rohis FacebookRabu, Oktober 09, 2013

    CSSnya lumayan panjang tp hsilx keren! maksih *smile

    BalasHapus
  9. Aditya NugrohoRabu, Oktober 09, 2013

    Keren kang, :)

    BalasHapus
  10. UnknownKamis, Oktober 10, 2013

    Mas,
    Boleh tau HTML tombol Lintas.Me nya :D
    *Gabisa diintip ^_^

    BalasHapus
  11. UnknownKamis, Oktober 10, 2013

    Keren Mas ..

    BalasHapus
  12. AdminJumat, Oktober 11, 2013

    waow.. very beautiful deh, hanya kata2 ini dapat saya tulis mas :)

    BalasHapus
  13. AnonimKamis, Oktober 31, 2013

    tips dan trik css nya arunik kang, mesti di BM dl

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya