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: 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> atau
</style>:
.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>
Pelajari beberapa alternatif peletakkan menu navigasi horizontal
di sini »
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.
sumber:http://www.dte.web.id/2011/07/desain-menu-navigasi-terbaik-zipup.html#.UUEOx0qu7Dc
