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.
lihat demoUntuk 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: Pemanggilan JQuery dan Paket Easing
Ambil
scriptnya
di sini. Jika sudah, sekarang Anda bisa melanjutkan ke langkah berikutnya, yaitu memilih model:
- Menu Navigasi ZIPUP Horizontal
- Menu Navigasi ZIPUP Vertikal
Navigasi ZIPUP Horizontal
Untuk membuat versi horizontal, pertama-tama temukan kode ini:
</head>Salin kode di bawah ini kemudian letakkan tepat di atasnya:
<script type='text/javascript'>
$(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>
Selanjutnya salin paket CSS ini, kemudian letakkan tepat di atas kode
]]></b:skin> :
.tovikh {
width:670px;
height:50px;
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;
}
Terakhir Anda tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana Anda menginginkan menu navigasi ini ditampilkan:
<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>
Klik
Simpan Template.
Navigasi ZIPUP Vertikal
Untuk membuat versi vertikal, pertama-tama temukan kode ini:
</head>Salin kode di bawah ini kemudian letakkan tepat di atasnya:
<script type='text/javascript'>
$(document).ready(function() {
$('div.tovikv li em').hide();
$('div.tovikv 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>
Selanjutnya salin paket CSS ini, kemudian letakkan tepat di atas kode
]]></b:skin> atau
</style>:
.tovikv {
height:640px;
width:220px;
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;
}
.tovikv ul {
height:auto;
background-color:#622;
margin:0 0;
padding:0 0;
}
.tovikv li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
color:#fff;
text-align:left;
display:block;
}
.tovikv 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;
}
.tovikv li.akhir a {
background-color:#622;
min-height:250px;
border-color:#633;
}
.tovikv li a:focus {background-color:#888;border-color:#777;}
.tovikv li.akhir a:focus {background-color:#822;border-color:#633;}
.tovikv 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;
}
Terakhir Anda tinggal meletakkan kerangka objeknya. Menu navigasi vertikal umumnya diletakkan di atas kode ini:
<b:section class='sidebar' id='sidebar'>Salin kode di bawah ini, kemudian letakkan tepat di atas kode
<b:section class='sidebar' id='sidebar'><div class='tovikv'>
<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>
Klik
Simpan Template.Spesifikasi Menu
ZIPUP Horizontal:
- Setiap unit menu horizontal memiliki lebar 30 piksel, dengan panjang menu ideal untuk sepuluh buah menu sebesar 670 piksel.
- Tinggi menu horizontal idealnya 50 piksel.
ZIPUP Vertikal:
- Setiap unit menu vertikal memiliki tinggi 30 piksel, dengan tinggi menu ideal untuk sepuluh buah menu vetikal sebesar 640 piksel.
- Lebar menu vertikal idealnya 220 piksel.
Tipografi Menu:
- Setiap unit menu didefinisikan sebagai:
<li><a href='#'>Nama Menu<em>Deskripsi Menu</em></a></li>
Ganti Nama Menu dengan nama menu yang Anda inginkan, dan Deskripsi Menu dengan kata-kata yang disesuaikan dengan nama menunya. Setelah itu ganti simbol # dengan sebuah alamat URL. - Meskipun di sini Saya membatasi ukuran-ukuran menu navigasi ZIPUP, namun bukan berarti bahwa memodifikasi menu ini akan membuat tampilannya menjadi berantakan. Menambah ataupun mengurangi jumlah menu sama sekali tidak akan merusak tampilan, jadi Anda tidak perlu khawatir. Saya hanya memberikan saran-saran penentuan ukuran yang tepat.
