Cara Membuat Menu Horizontal Navigation Part 3

Cara Membuat Menu Horizontal Navigation

1. Klik Racangan
2. Kemudian klik Edit HTML
3. Setelah itu cari kode ]]></b:skin>
4. Kalau sudah ketemu pastekan kode di bawah ini persis di atas kode tersebut

.container {width: 860px;background:#000; margin: 0 auto;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 860px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 860px;
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;}

5. Setelah itu letakkan kode dibawah ini di bawah ]]></b:skin>

<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(topnav_active.gif) 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>

6. untuk memanggil kode yang kita tambahkan tadi. copy paste kode di bawah ini di atas kode  
<div id='content-wrapper'>

<div class='container'>
<ul id='topnav'>
<li><a href=''>Home</a></li>
<li>
<a href='#'>About</a>
<span>
<a href='#'>The Company</a>
<a href='#'>The Team&lt;/a>
<a href='#'>Careers</a>
</span>
</li>
<li>
<a href='#'>Portfolio</a>
<span>
<a href='#'>Web Design</a>
<a href='#'>Development</a>
<a href='#'>Identity&lt;/a>
<a href='#'>SEO &amp; Internet Marketing</a>
<a href='#'>Print Design</a>
</span>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Untuk kode # letakkan alamat url tujuan, Dan Warna Biru Bisa di ganti dengan nama menu lainnya.

Kami Jual DVD Game dan Film
Sedia Macam2
- Game PC/ PS2/ Ps3/ PSP/ Android Mini/HD
- Film Movie/ Bollywood/ Anime/ Serial.
- WWe Smackdown
Daftar Listnya Silahkan Lihat Di Atas Sebelah Tutotrial

Tags: Cara membuat Menu Horizontal Navigation Part 3