Monday, June 21, 2010

cara membuat menu navigasi Jquery dengan Tooltip

Pada Tutorial Blog Kali Ini Saya Akan Membahas Tentang Bagaimana Cara Pembuatan Menu Navigasi Jquery Dengan Tooltip yaitu sebuah menu dengan gaya Mantap Karna Menu Ini Senantiasa Didampingin Dengan Keterangan Cantik Ini lah Ciri Khas Menu ini.
cara membuat menu navigasi Jquery dengan Tooltip
Ingin Lihat Demonya Langsung Klik Pada Blog Mantap Ini Masih Banyak Menu Menu Yang Membuat Penampilan Blog Kita Seperti Penampilan Blogger Profesional Pada Umumnya Contoh Menu Navigasi Slide Jquery Lalu Menu Info Slide Juga Menu Daftar Isi Yang Profesional Seperti Pada
Blog ini Baiklah Tidak Usah Berlama Lama Lagi Langsung Saja Kita Menuju Tahap Pembuatan Menu Navigasi Jquery Dengan Tooltip Ini :

  • Login keBlogger dengan account anda.
  •  Pergi ke "Tata Letak" kemudian "Edit HTML".
  • Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah Kode <head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
Lalu Copy Paste Script berikut dan letakkan dibawah Kode tadi


<script type='text/javascript'>
$(document).ready(function(){

$(".menu2 a").append("<em></em>");

$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>


Lalu Masukkan Kode Css Di Bawah Ini dan Letakkan Di atas Kode ]]></b:skin>


.menu2 {
margin-top: -17px;
padding: 0;
list-style: none;
}
.menu2 li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu2 a {
padding: 14px 10px;
display: block;
color: #CCF2FF;
width: 136px;
text-decoration: none;
font-weight: bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWQqYj3ANGi_0fx3zHQOOBRe-B3whsg8SnoCEvwy__ZxJHk2Y4aauM06v8jyQsOf4boEsDCFZ8B45IhM_U5xJo8YeF0ZQGBCRmVhIeEQgQ6eSP0H3IQFVpqS6cZlX0sbMMmw8ytWIne8/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4U765Cdu5ZBIM9mbJ4vqyrYAVvlvNBQDDbV4Rtpcj8bMv_u4cihls9hEyyM75PciaVAgpE6eZZ0o4bm0ObdWBtHpmo7SUKuMKOsxrAkhg4SVPhKS0QIdj0kRuhTuDgBnUsxJqKl6Z0w/s320/black_arrow.png) no-repeat;
width: 180px;
height:35px;
position: absolute;
top: 25px;
left: -25px;
text-align: center;
color:#fff;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

  • Lalu Simpan Template
  • Untuk Melanjutkan Menu Navigasi Ini dan menampilkan tooltip Lanjutkan Pada Script Di Bawah Ini
  •  Copy paste code berikut dan letakkan ditempat yang anda inginkan (contoh dibawah Header) :

<ul class="menu2">
<li>
<a title="Go to homepage" href="/">Home</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Tutorial</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">JQuery Widget</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">CSS Editing</a>
</li>
</ul>


  • Lalu Simpan
Keterangan :




# menu2 adalah class menu navigasi ini.
# em adalah class tooltip.
# menu2 a adalah menu navigasi itu sendiri.
# menu2 li em adalah code tampilan tooltip.
# margin-top: -17px; adalah jarak atas dan menu navigasi.

Selamat Mencoba Dan Semoga Berhasil...
  • Baca Juga Artikel Blog Ini Tentang Cara Membuat Menu Vertical Jquery



Labels: