Menu Vertikal Animasi Zero Image

Setelah Menu Horizontal Animasi Zero Image, berikut ini adalah yang Vertikalnya; yaitu Menu Vertikal Animasi Zero Image. Contoh Previewnya :

• Mitra Deskripsi1
• Profil Deskripsi2
• Jurnal Deskripsi3
• Komentar Deskripsi4
• Sunting Deskripsi5
• Arsip Deskripsi6
• Feed Deskripsi7
• Kontak Deskripsi8
• Pengunjung Deskripsi9
• Beranda Deskripsi10

Sama Seperti Langkah membuat Menu Horizontal Animasi Zero Image untuk mengkopi dulu JQuery dan paket easing (ada di cara Membuat Menu Horizontal Zero Image). Untuk selanjutnya silahkan kopi script dibawah ini di elemen laman html/javascript :

<script type='text/javascript'>
$(document).ready(function() {
    $('div.koko li em').hide();
    $('div.koko ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(700, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({height:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(200, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({height:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

<style type="text/css">
.koko {
  height:auto;
  width:auto;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:0 0 10px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.koko ul {
  height:auto;
  background-color:#622;
  margin:0 0;
  padding:0 0;
}
.koko li {
  text-align:left;
  list-style:none;
  margin:0 0;
  padding:0 0;
  color:#fff;
  text-align:left;
  display:block;
}

.koko li a {
  height:30px;
  width:auto;
  line-height:normal;
  background-color:#333;
  border-top:2px solid #3c3c3c;
  padding:5px 7px;
  margin:0 0;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  text-shadow:1px 1px 2px #000;
  -webkit-box-shadow:0 0 3px #000, 0 0 20px #000;
  -moz-box-shadow:0 0 3px #000, 0 0 20px #000;
  box-shadow:0 0 3px #000, 0 0 20px #000;
  overflow:hidden;
  outline:none;
  display:block;
}

.koko li.akhir a {
  background-color:#622;
  min-height:250px;
  border-color:#633;
}

.koko li a:focus       {background-color:#888;border-color:#777;}
.koko li.akhir a:focus {background-color:#822;border-color:#633;}

.koko li a em {
  position:relative;
  clear:both;
  width:auto;
  height:200px;
  background-color:#222;
  font-style:italic !important;
  line-height:normal;
  font:normal 15px Times,sans-serif;
  color:#999;
  padding:5px 5px;
  margin:15px 0 0 0;
  text-align:center;
  overflow:hidden;
  display:block;
}
</style>

<div class='koko'>
     <ul>
          <li><a href='#'>HTML
                    <em><center>
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=auto&amp;h=auto&amp;title=Post-Code%3A+code+converter&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></center></em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Selamat Mencoba!!!