ZIPUP (Zero Image - Pilled Up), adalah menu navigasi JQuery dengan model bertumpuk sebagai ciri khasnya. Menu ini sama sekali tidak menggunakan background image
sebagai latar belakangnya. Semuanya murni menggunakan CSS3. Salah satu
keistimewaan menu ini adalah kemampuannya di dalam menampilkan deskripsi
menu layaknya tooltip untuk memastikan bahwa para pengunjung
tidak akan tersesat saat hendak menuju ke sebuah halaman melalui menu
tersebut. Dua buah tipe yang Saya buat ini sebenarnya terinspirasi dari
model JQuery Image Menu.
Mengingat keleluasaan modifikasinya yang terbatas, Saya membuat model
menu ini untuk mengatasi beberapa masalah itu. Saya hanya mengambil
fungsi efek dan mengedit CSSnya saja:
Untuk membuatnya Anda tinggal memilih salah satu, apakah memilih tipe
vertikal atau horizontal. Namun sebelum itu Anda harus memanggil JQuery dan paket easing sebagai langkah pertama:
- Langkah Pertama Masuk ke Edit Template HTML, copy kan : Script Jquery dibawah ini diatas </head> atau dibawah <head>:
- Kemudian Masuk ke Elemen Laman add Gadget html/javascript
- Kopas Script dibawah ini
<script type='text/javascript'>Keterangan :
$(document).ready(function() {
$('div.tovikh ul li a').hover(function() {
$('em', this).stop(true, true).slideDown(500, "easeOutQuint");
if ($(this).is(':animated')) {
$(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
} else {
$(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
}
}, function() {
$('em', this).stop(true, true).slideUp(100, "easeOutQuint");
if ($(this).is(':animated')) {
$(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
} else {
$(this).stop(':animated').animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
}
});
});
</script>
<style type="text/css">
.tovikh {
width:100%;
height:30px;
font:italic 16px Times,serif;
border:2px solid #e6e6e6;
padding:0 0;
margin:10px 5px 25px;
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;
}
.tovikh ul {
width:2500px;
background-color:#622;
margin:0 0;
padding:0 0;
overflow:hidden;
}
.tovikh li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
display:inline;
float:left;
}
.tovikh li a {
width:30px;
height:40px;
line-height:normal;
background-color:#333;
border-left: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:-2px 0 3px #000,-5px 0 20px #000;
-moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
box-shadow:-2px 0 3px #000,-5px 0 20px #000;
overflow:hidden;
outline:none;
display:block;
}
.tovikh li.akhir a {
background-color:#622;
min-width:250px;
border-color:#633;
overflow:hidden;
text-align:left;
display:block;
}
.tovikh li a:focus {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}
.tovikh li a em {
position:fixed !important;
position:absolute;
top:0px;
right:0px;
bottom:auto;
left:0px;
background-color:#aa9900;
border-bottom:2px solid #aa8800;
font-style:italic !important;
line-height:normal;
font:normal 30px Arial,sans-serif;
color:#fff;
padding:15px 10px 7px;
margin:0 0;
text-align:left;
overflow:hidden;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}
</style>
<div class='tovikh'>
<ul>
<li><a href='#'>Mitra
<em>Deskripsi1</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>
- Warna Merah # ganti dengan alamat link yang Sobat inginkan
- Warna Biru adalah Nama Menu, diisi sesuai selera
- Deskripsikan Nama menu di kolom deskripsi
- Selamat Mencoba! Semoga Berhasil
Artikel 
Tidak ada komentar:
Posting Komentar