Navigasi Menu Horizontal Hitam (Cara Membuatnya) Part II

Seperti janji saya pada postingan yang berjudul Navigasi Menu Horizontal Hitam Part I untuk memposting kembali cara pembuatannya maka dari itu pada postingan kali ini saya akan coba contohkan cara pembuatan Navigasi menu tersebut.

Navigasi menu ini hanya dibuat dengan bahasa html sederhana dan css nya saja dan masih jauh dari pengembangan yang sebenarnya. Untuk penerapannya ke blog atau website sobat – sobat sekalian saya mohon maaf karena tidak saya bahas pada artikel ini.

Di bawah ini adalah cara – cara Membuat Navigasi Menu Hitam yang telah saya contohkan pada postingan sebelumnya, untuk melihat bentuk dari navigasi menu ini anda dapat mengklik disini.

Untuk membuat navigasi menu ini kita membutuhkan empat file pendukung sebagai berikut menu.html , style.css, kiri_menu.gif dan kanan_menu.gif Software yang akan kita gunakan hanyalah notepad, atau anda bisa menggunakan dreamweaver jika diperlukan

Nah langkah pertama simpanlah kedua gambar di bawah ini dengan cara klik kanan dan save image. Simpanlah dalam satu folder di hardisk anda (folder ini juga akan digunakan untuk menyimpan file menu.html dan style.css )

Selanjutnya bukalah sofware notepad dikomputer anda , ketikkan css di bawah ini :

#menu { float:left; font: bold 10px/1.3em Verdana; width:100%; background:#ffffff; font-size:90%; line-height:normal; }
#menu ul {margin:0; padding:10px 10px 0 50px; list-style:none; }
#menu li { display:inline; margin:0; padding:0; }
#menu a { float:left; background:url("kiri_menu.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#menu a span { float:left; display:block; background:url("kanan_menu.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#menu a span {float:none;}
#menu a:hover span { color:#FF0000; }
#menu a:hover { background-position:0% -42px; }
#menu a:hover span { background-position:100% -42px; }

Simpanlah dengan ektension *.css, untuk cara meyimpan pada notepad klik file > save dan pada box save as ketikkan File name dengan nama style.css dan Save as Type ubah menjadi All Files

Langkah selanjutnya adalah membuat tag html nya, Ketikkan tag html dibawah ini pada notepad :

<html>
<head>
<title>Navigasi Menu</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
 <div id="menu">
<ul>
 <li><a href="http://dede-spirit89.blogspot.com">Spirit 89 Blog</a></li>
 <li><a href="http://dede-spirit89.blogspot.com">Spirit 89 Blog</a></li>
 <li><a href="http://dede-spirit89.blogspot.com">Spirit 89 Blog</a></li>
 <li><a href="http://dede-spirit89.blogspot.com">Spirit 89 Blog</a></li>
 <li><a href="http://dede-spirit89.blogspot.com">Spirit 89 Blog</a></li>
 </ul>
</div>
</body>
</html>

Gantilah http://dede-spirit89.blogspot dengan link- link yang ingin anda tuju dan Spirit 89 Blog dengan nama dari linknya. Simpanlah dengan ekstension *.html , cara pemyimpanannya sama dengan cara meyimpan style.css, namun gantikan File Name dengan nama menu.hmtl

** catatan : Semua file disimpan dalam satu folder

Nah setelah semua sudah siap, bukalah file menu.html dengan browser web anda.
Selamat mencoba dan semoga bermanfaat..!!