Membuat Menu Navigasi Dengan JQuery

Membuat Menu Navigasi Dengan JQuery. terkadang HAPIA Mesir sering ditanya tentang cara membuat menu navigasi, banyak sekali tutorial yang menyajikan cara membuat menu ini. mulai dari yang paling sederhana sampai yang menggunakan perpaduan antara code CSS dengan JQuery.

Berikut adalah cara membuat menu navigasi menggunakan CSS dan JQuery yang HAPIA Mesir sajikan bersumber dari Net Tuts dengan beberapa penyesuaian. Untuk Melihat DEMO silahkan klik link dibawah ini :

Contoh Menu Navigasi

Cara Membuat Menu Navigasi Dengan JQuery adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Cari code ]]></b:skin> untuk meletakkan code CSS berikut diatasnya :

#container {
width: 1000px;
margin-top:-10px;
}


ul, li {
margin: 0;
padding: 0;
}


#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}


#nav {
padding:5px;
position: relative;
background: #292929;
float: left;
}


#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}


#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: center;
font-size: 20px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 52px;
width: 100%;
}

- Simpan Template.

- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Rata-rata template dari blogger telah terpasang "tambah Gadget" dibawah Header. jika belum anda silahkan cari tutorial untuk membuat gadget dibawah Header.
- Copy paste code berikut kedalamnya :

<div id="container">


<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Blogging Tips</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Contact</a></li>
</ul>






</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script>


<script type="text/javascript">
$('#nav').spasticNav();
</script>

- Simpan.

# width: 1000px; adalah lebar menu navigasi.
# font-size: 20px; adalah ukuran font pada menu navigasi.
# padding: 30px 52px; adalah jarak antara tulisan dengan garis atas dan bawah dengan nilai 30 pixel dan garis samping kanan dan kiri dengan nilai 52 pixel.

Selamat Mencoba dan Happy Blogging.
Baca Juga Artikel Terpopuler :

• Sejarah CorelDraw dan Perkembangannya
• Astrid Ellena, Miss Indonesia 2011
• Operasi Keperawanan Dewi Persik
• Menikmati Sex Yang Aman Saat Hamil
• Letusan Gunung Terdasyat Di Dunia
• Ingin Tahu AI-Qur'an Itu Apa ?
• Menerapkan SEO Pada Gambar Postingan
• Dari Dapur, Wanita Menuju Surga
• Cinta Kasihku Kepada Rasulullah SAW
• GRATIS !!! Submit untuk meningkatkan pengunjung blog/website Anda.