Jumat, 21 Januari 2011

Fixed Fade Out Menu jQuery

Mari kita bahas lagi mengenai tutorial membuat Fixed Fade Out Menu karya salah satu The Great jQuery Webs pilihan Beben si bloglang anu ganteng kalem tea. Dari kata fixed sudah tentu artinya diam, konstan, atau menZedog alias menzentuL. Jadi keberadaan menu ini akan diam ditempat, biasanya diatas atau dibawah persisnya itu sob. Ketika kita melakukan scroll kebawah, menu ini akan disappear (menghilang) padahal ada. Dengan trik opacity dan jQuery script maka dihasilkan satu menu dengan nama Fixed Fade Out Menu With jQuery Plugins <--- judul lengkapnya mah :D Mirip macam ini kalau diliat-liat dari fungsi dan hasilnya Floating Menu Gelap. No panjang² cing-cong baceo wae cek gidot bro
So bagaimana tertarik memasukan menu macam itu kedalam blog sobat tercinta! Biasalah untuk menambah nilai seni dan gaya, terutama full stylish \m/

Kode CSS

Seperti biasa letakan diatas/sebelum tag ]]></b:skin>
#menyu{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(.../images/nav.png) repeat-x center left;
z-index:999999;
}
#menyu ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#menyu ul li{
display:inline;
float:left;
margin:0px 2px;
}
#menyu a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(.../images/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#menyu a:hover{
background:#D9D9DA none;
color: #fff;
}
#menyu a.top span, #menyu a.bottom span{
float:left;
width:16px;
height:16px;
}
#menyu a.top span{
background:transparent url(.../images/top.png) no-repeat center center;
}
#menyu a.bottom span{
background:transparent url(.../images/bottom.png) no-repeat center center;
}

#menyu ul li.search{
float:right;
}
#menyu input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(.../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
Replace bin ganti link gambar (tulisan warna merah) tersebut dengan link gambar yg sudah dihosting.

jQuery script plugin

Letakin diatas tag </body>
<script type="text/javascript">
//<![CDATA[
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#menyu').stop().animate({'opacity':'0.2'},400);
else
$('#menyu').stop().animate({'opacity':'1'},400);
});
$('#menyu').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#menyu').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#menyu').stop().animate({'opacity':'0.2'},400);
}
}
);
});
//]]>
</script>
Setelah itu, cari tag <body> didalam template sobat lalu masukin kode HTML berikut.

Kode HTML

<div id="menyu">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
<li><a>Link4</a></li>
<li><a>Link5</a></li>
<li><a>Link6</a></li>
<li><a>Link7</a></li>
<li><a>Link8</a></li>
<li><a>Link9</a></li>
<li><a>Link0</a></li>
<li class="search">
<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
Perhatikan kode ID yg diberi warna biru itu? Gantilah dengan ID pada template sobat masing² yg menunjukan letak paling atas dan paling bawah pada template. Itu kode untuk menunjukan scroll to top and scroll to bottom ;) :)

Save

Selamat menikmati menu baru sobat. Script dan kode diatas sudah Beben rubah ID-nya guna tidak terjadi bentrok dengan ID template sobat-sobat!!! Karena biasanya kode menu ini awamnya menggunakan ID "NAV" Maka jika sobat setelah mendownload trik ini, harap perhatikan ID bawaan dari sang kreator http://tympanus.net/ Sekian dan hatur tengkiyu Beben ucapkeun...adios, amigos, permiosss sok ah prung b-)
Salam bloglang happy blogging \m/
Diposting oleh di
Label: , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)