0 Membuat Menu Horizontal Dengan Jquery

Do you want to share?

Do you like this story?

Blog Trends malam ini akan memberikan suatu pelajaran atau tutorial blog mengenai cara membuat menu horizontal dengan jquery.

Langsung saja :
Langkah awal yang anda harus lakukan adalah

1. Pertama Silahkan Login Ke bLogger
2. Pada Dasbor Klik Tata Letak/Rancangan
3. Klik Edit Html ->> Expand Template Widget
4. Kemudian Letakan Code Script Di bawah ini Tepat sebelum Code

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>

5. Simpanlah Template anda yang baru saja ditambahkan kode script

6. Langkah Selanjutnya Klik Add gadget  ->> HTML/JavaScript

7. Kemudian Copy code berikut ini dan letakan di kolom Widget HTML/JavaScript

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

7. Jika sudah melakukanya. Sekarang anda lihat hasil akhir dari menu tersebut.
8. Terima kasih semoga sukses tutorial kali ini

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blog Trends di inbox anda: