Loading...
Beranda » » Menu Vertikal Animasi Zero Image Konten Lain di Sini

Menu Vertikal Animasi Zero Image

Setelah Menu Horizontal Animasi Zero Image, berikut ini adalah yang Vertikalnya; yaitu Menu Vertikal Animasi Zero Image. Contoh Previewnya : 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!!!

Penulis: Unknown Lokasi: Condongcatur, Yogyakarta

Artikel Menu Vertikal Animasi Zero Image , diterbitkan oleh Unknown pada hari . Semoga artikel ini dapat menambah wawasan Anda. Unknown adalah seorang yang sedang belajar Blogging, melalui eksperimen dan uji coba dari berbagai sumber. Adanya kritik dan saran sangat diharapkan..oya, jangan lupa klik like FB dan Berkomentarlah!

3 komentar: