Membuat Menu bar Part 2

Posted by bagus on Sunday, June 27, 2010 | 0 comments

Eeeee.  ....... ada lanjutannya nie........

Sabar ya , scriptnya rada panjang tapi yang penting tinggal copy paste kalo ga mau repot . Klo maw nanya ya mangga tanya , yang mau ralat yang ralat tulisannya klo bisa ( hehehehehe .... jangan ada dusta di antara kita ....)

Kembali ke topik . Tinggal copy paste code dibawah ( klo tega ) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Menubar</title>

<link rel="stylesheet" type="text/css" href="menubar.css" />

</head>
<body>

<ul>

<li><a href="#">CONTOH</a></li>

<li><a href="#">CONTOH</a></li>

<li><a href="#">CONTOH</a></li>

<li><a href="#">CONTOH</a></li>

<li><a href="#">CONTOH</a></li>

</ul>
</body>

</html>


Lalu save dengan nama : menubar.html , nah ini script CSS nya :

/* CSS Document */

/* Css file ini dibuat oleh

bagus20972@yahoo.com

meng-copy secara ilegal

tidak akan diberi sanksi

tapi dosa tanggung sendiri :D*/

ul{

list-style-type:none;

}

ul li{

display:inline;

float:left;

}

a {

font-family:Arial, Helvetica, sans-serif;

font-weight:bold;

display:block;

width:100px;

height:20px;

padding:10px;

text-align:center;

text-decoration:none;

background-color:#040404;

color:#A4A4A4;

}

a:hover, a:active{

background-color:#919191;

color:#060606;

}

lalu save dengan nama menubar.css pada folder yang sama , kode pun telah jadi !!!

Jalankan menubar.html pada browser anda dan lihat and saksikan .......
Wkwkwkwwk .......

Penjelasannya nanti dlu ya , cape nulis n scripting ......