Menu Nongol a Hover
Judul yang aneh.. hehe..
Bicara jQuery memang tidak bakalan ada habisnya..
Maklum ane lagi seneng-seneng nya ngutak-atik jQuery neg..
Setelah bereksperimen, jadi juga neg Menu Nongol a Hover.. (apa jeh..).
Menu Nongol a Hover ini adalah seperti Accordion All In Widget yg sudah ane bahas dahulu..
Bedanya Menu Nongol a Hover ini tanpa Click loh..
Cukup kita lewati dg Cursor Mouse, maka akan muncul keseluruhan menunya.
Penasaran???
Mari kita lihat demonya..
Demo Menu Nongol a HoverKlik disini untuk melihat demo Menu Nongol a Hover
Atau sobat bisa lihat langsung di sidebar blog ane ini, di widget Statistic..
Lewati dg cusror sobat ke arah salah satu yg terdapat di widget Statistic tersebut,
Lihat apa yg terjadi ???
Akan muncul seperti gambar diatas..
Mengerti kan maksud dari Menu Nongol a Hover ini??
Ok kalo sudah mengerti, ini die cara membuatnya :
Langkah 1
Sediakan kompor, kewali, panci dll.. (Mari kita masak..!! Hahaha..).
Serius-serius..
Seperti biasa cari kode ]]></b:skin> pada halaman Tata Letak - Edit HTML
Lalu letakan kode dibawah ini diatas nya.
ol {
height:30px;
width:255px;
overflow:hidden;
color: #fff;
text-decoration: none;
font-size:12px;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
padding: 8px 10px 6px;
margin-top:5px;
background-color:#a447cf;
}
ol p {
margin-top:5px;
padding-top:15px;
font-size:12px;
color:#6CF;
}
Langkah 2
Cari kode </head>
Lalu letakan kode di bawah ini diatas nya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Catatan :
Bagi sobat yang pernah menambahkan atau ditemplate sobat
sudah terdapat kode JQuery seperti di atas,
maka langkah kedua abaikan saja.
Langkah 3
Kemudian tambahkan pula kode dibawah ini,
dibawah kode JQuery tadi (pd Langkah 2)
<script src='http://daftarisi-girant.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//When Mouse rolls over ol
$("ol").mouseover(function(){
$(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When Mouse cursor removed from ol
$("ol").mouseout(function(){
$(this).stop().animate({height:'30px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>
Langkah 4
Simpan template kedalam Lemari sobat.. hehe..
Langkah 5
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script
<div id="vnav">
<ul>
<ol><h1>Home</h1><p>Rumah</p></ol>
<ol><h1>About Me</h1><p>Tentang Saya</p></ol>
<ol><h1>Black</h1><p>Artinya Hitam</p></ol>
<ol><h1>Red</h1><p>Artinya Merah</p></ol>
</ul>
</div>
Kode yg berwarna Merah adalah Judul yg akan ditampilkan otomatis.
Ganti dg judul sesuai kehendak sobat.
Kode yg berwarna Biru adalah Keterangan yg disembunyikan,
dan akan tampil hanya bila dilewati oleh cursor sobat.
Ganti juga sesuai keinginan sobat.
Source Code Menu Nongol a HoverKlik disini untuk mengambil semua source code Menu Nongol a Hover
Langkah 6
Save dan lihat hasilnya.
Gimana?? Ok kan???
Nb.
Jika hasilnya tidak sesuai, mungkin ukuran font yg terlalu lebar, Warna, atau yg lain nya..
Trick nya, Sobat utak atik az lagi pada Padding, Background-color, Font-size
dan yang lain nya pada kode Langkah 1.
Sekian cuap-cuap ane kali ini..
Semoga berhasil dan Semoga bermanfaat.
Posted by Girant_31
on 07.00. Filed under
jQuery,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
mo numpang coment:
NO COMENT
kawan..Anda memang pinter sekali.
malam juga ya
Met malam mas...thnxs info na mas.
Wuuuu...keren banget bro.
Udah gue cek.
Naksir deh lihatnya.
Takjub :)
Mantap kawan.
Keren abis.
Suer deh, beneran gak pake boong :)
@3137880279221950171.0
wah mas bisa aja... ane jadi malu...
makasih mas...
@6843961524399571777.0
wah... ane ikut seneng deh klo mas suka....
semoga bermanfaat ya....
template pesenan aq mn jelek... ko blm dganti2 c???????????????/
hmm tutorial bgus..tapi saya masih bingung..@.@
OK mas...aku coba ya...kayaknya sukses nih...kenetulan blog lain ku udah "rame" dg tips2 mu...
lama tak mampir
met berakhir pekan
salam hangat dari blue
emang keren neh blog, blog gue dibuat keren dong cuyyyyyyy
Dapat ilmu bru kg ni..thnxs mas
Dapat ilmu bru kg ni..thnxs mas
mantap nih blog lama2 :)
berkunjung malam
@1944865354076735411.0
Ane jg bingung mas.. hehe..
@1407928400769927871.0
Makasih..
Met berblogwalking ya..
@8228215470290107315.0
Sama2..
@3529438506454518957.0
Salam hangat jg mas..
Makasih sudah nyempetin mampir kmari lg..
@6170553853656825264.0
Semoga ya mas..
jangan kaya nya.. hehe..
@7767646689805032641.0
Sayang ya mas mantap nya lama.. hehe..
@3865653418220899783.0
Sama2 mas..
Semoga ilmunya bermanfaat ya mas..
@236143029310078937.0
Terimakasih atas kunjungan nya..
@1144624096696395316.0
Sama-sama mas..
tutor yg mantap.Akan aq coba.Mksh ya
Met malam mas mampir lg ni sambil mendalami artikel na...keren y mas gadget na..thnxs dah share mas
Met malam mas mampir lg ni sambil mendalami artikel na...keren y mas gadget na..thnxs dah share mas
mantap kali niy hang over nya eh a hover...
lom mudeng ....
kapan-kapan ntah kapan dicoba biar mudeng ....
pengen nyoba sih, ringan kan ni buat blog..hehe
@1643804577755251491.0
Iya tuh mas..
Gmn rasanya ya?? hehe..
@5366300665642053281.0
Bang hover mas..
@2177875694004625534.0
Jangan dalam2 ya mas.. hehe..
@7309937642105218043.0
Ringan dunk.. klow berat mah ane pikul mlu kali mas.. wkwkwwk..
Wahhh cantiknya di template....Suksess Kawannn!!!!!!!!!!!
@1088067185593592733.0
Terimakasih mas..
keren sob tp blog q dah kelewat berat
Kayanya Jquery emank lagi banyak dipake nie.....ntar ane coba di Blog private hhe....tararengkyu Sob....