Membuat Menu Horizontal Dengan CSS

Jul 16, 2013 by Gen Xander

Pada artikel kali ini saya akan memberikan sedikit tutorial tentang bagaimana Membuat menu dengan CSS. Dalam study kasus kali ini, saya akan membahas penggunaan CSS dan PHP dalam Membuat menu dengan CSS. Apakah anda tau CSS ?, CSS(Cascading Style Sheet) adalah suatu bahasa pemrograman web yang digunakan untuk mempercantik tampilan halaman web dan juga membuatnya lebih terstruktur.

Oke langsung saja ke pokok permasalahan.

 

1. Membuat Halaman Menu Utama

Langkah pertama silahkan anda buat file baru, kemudian simpan dengan nama menu.php kemudian silahkan anda ketik peritah berikut ini :

—————————————————————————-

<html>

<head>

<title> Menu Dengan CSS </title>

<link rel=”stylesheet” href=”style.css” type=”text/css”>

</head>

<body>

<div id=”menu”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Profile</a></li>

<li><a href=”#”>Contact</a></li>

<li><a href=”#”>Gallery</a></li>

</ul>

</div>

</body>

</html>

———————————————————————————-

2. Membuat Script CSS

Langkah selanjutnya, kita buat file untuk CSS nya. Simpan dengan nama style.css kemudian ketik perintah berikut ini :

———————————————————————————-

#menu{

width: 100%;

height: 60px;

margin: 0 auto;

background-color:#FFCC33;

}

 

#menu ul {

list-style: none;

padding-top: 4px;

padding-left: 0px;

}

 

#menu li {

display: inline;

}

 

#menu a {

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

text-align: center;

text-decoration: none;

color: #ffffff;

font-weight: normal;

font-size: 18px;

float: left;

padding: 12px 15px 7px 15px;

height: 34px;

display: block;

margin-top:2px;

}

 

#menu a:hover{

height: 28px;

color: #6082bb;

background-color:#0099CC;

}

—————————————————————————-

Demikianlah artikel tentang Membuat Menu Dengan CSS, semoga dapat bermanfaat.

Untuk lebih lengkapnya, silahkan download file nya di sini,

File : Menu.rar

Artikel : Membuat Menu Dengan CSS.pdf