Membuat Menu Navigasi Jquery

Terus terang pada saya mendapatkan template ini, template ini sangat sederhana. Karna sangat sederhana template ini awalnya tidak menampilkan Menu Navigasi yang bagus, tetapi setelah itu saya modif modif hingga sampai saat ini terdapat menu navigasinya yang lumayanlah. Tetapi rata rata semua template menyediakan tempat navigasi.

Menu navigasi adalah kumpulan link link yang dijadikan menu utama dan diletakan di bar navigasi. Navigasi tidak selalu diatas dan dibawah, karna menu utama maka diletakan di tempat yang paling terlihat. Seperti blog Farixsan ini, tampilan blog ini dilengkapi dengan bar navigasi menu dan diletakan disebelah search box (kotak pencarian). Contohnya gambar bisa dilihat dibawah ini.

contohnya lagi bisa dilihat di google.com.


Nah, yang kita bahas ini adalah Menu navigasi dengan menggunakan Jquery. Menu navigasi yang dipasangkan dengan jquery akan terlihat lebih bagus dibanding tidak, terlihat menggulung. Tetapi terserah apa kata sobat. Dibawah adalah tutorial tidak dan menggunakan jquery. Tinggal pilih yang menurut sobat bagus.

NON JQUERY
• Buka blogger.com dengan password dan id

• Saat didashboard, klik design → edit html → centrang expand widget

• Cari kode (ctrl + f) dan letakan kode berikut tepat diatas kode ]]></b:skin>

#nav{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYi5otONiTj4TG-UajRv1XOARP85Fzp-36aT7k2OQsVcpFsRVqv2cEWlStY03l4f-DONwVbb-8KBCpJfX8gNpGYd0KNhZnp5Yseh5MUq5WAeZCpirtTfyzG3GIz3PRVN-ur3Ughyphenhyphena_uXQ/s1600/asd.png);
height: 24px;
}

#nav, #nav ul{
width: 1000px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height: 1.4em;
text-align:left;
font-size: 15px;
margin-bottom: 10px;
}

#nav a{
display:block;
padding:2px 15px;
color:#000;
text-decoration:none;
background: none;
text-shadow: 1px 1px 6px #000;
-moz-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
}

#nav a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hdU9iYGzc5Ai8y1Z0MqXQiI_zc0N6Eay_aQO0bW6m8Netc4vPOHzj5vkbjXpToKfX2lP0bClTCOhFzCylZX0H12xUAHSf-09-SO0zc0MIT0YPgpeFcTVrLKiN05ucgaVakpnEVgc-HE/s1600/Line.png) no-repeat bottom;
color: #fff;
}

#nav li{
float:left;
position:relative;
padding:0px 5px;
}

#nav ul {
position:absolute;
display:none;
top:100%;
width:160px;
left:0;
background: #ccc;
-moz-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
}

#nav li ul a{
width: 120px;
padding-top: 4px;
padding-bottom: 4px;
float:left;
}

#nav ul ul{
top:auto;
background: none;
}

#nav li ul ul {
left:10.5em;
background: #ccc;
margin:-5px 0 0 0px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

Kode kuning adalah background navigasi yang diganti sobat dengan background lain, sedangkan kode merah adalah background hover yang bisa diganti sobat.
Kode Biru adalah jarak antara Sublink dengan Sub Sublink .
Jika ada yang kurang pas dengan lebar, maka ubahlah sendiri kode Width (lebar) atau Height (Tinggi) di sana dengan mengubah angka angkanya

• Selanjutnya letakan dan replace kode berikut ditempat kode navigasi sebelumnya, kalau ragu ragu bisa backup template

<ul id='nav'>

<li><a href='/' title='Home'>Home</a></li>

<li><a href='#' title='Link1'>Link1 &#187;</a>
<ul>
<li><a href='#' title='Sub-Link1'>Sub-Link1</a></li>
<li><a href='#' title='Sub-Link2'>Sub-Link2</a></li>
<li><a href='#' title='Sub-Link3'>Sub-Link3</a></li>
<li><a href='#' title='Sub-Link4'>Sub-Link3</a></li>
</ul>
</li>

<li><a href='#' title='Link2'>Link2 &#187;</a>
<ul>
<li><a href='#' title='Sub-Link1'>Sub-Link1 &#187;</a>
<ul>
<li><a href='#' title='SubSub-Link1'>SubSub-Link1</a></li>
<li><a href='#' title='SubSub-Link2'>SubSub-Link2</a></li>
<li><a href='#' title='SubSub-Link3'>SubSub-Link3</a></li>
</ul>
</li>
<li><a href='#' title='Sub-Link2'>Sub-Link2 &#187;</a>
<ul>
<li><a href='#' title='SubSub-Link1'>SubSub-Link1</a></li>
<li><a href='#' title='SubSub-Link2'>SubSub-Link2</a></li>
<li><a href='#' title='SubSub-Link3'>SubSub-Link3</a></li>
</ul>
</li>
</ul>
</li>

</ul>

Kode merah adalah Sub Link → Keluar dari Link. Kode kuning adalah Sub Sub link → keluar dari Sub Link

• Save Template

JQUERY MODE!

• Letakan kode dibawah sesudah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Letakan kode brikut setelah kode diatas

<script type='text/javascript'>
function mainmenu(){
$(&quot; #nav ul &quot;).css({display: &quot;none&quot;}); // Opera Fix
$(&quot; #nav li&quot;).hover(function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(400);
},function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;hidden&quot;});
});
}
$(document).ready(function(){
mainmenu();
});
</script>
<!-- end dropdown menu-->

• Save Templates

Mungkin bagi sobat blogger yang kurang PAS dengan templatenya, kami mohon maaf yaaa.
Terimakasih untuk para pengunjung yang sudah datang :)