Membuat Menu Sederhana dengan CSS

Update Terakhir pada

Oke teman-teman , pada kesempatan kali ini saya akan memberikan tutorial pembuatan menu dropdown sederhana dengan css . Sebenarnya menu dengan css sudah banyak di internet . Agan sekalian tinggal download saja , namun agan juga harus tau basicdari css , jadi saat agan mau melakukan perubahana pada tampilan menu yang agan download , agan tidak kesulita . Oke kita mulai saja tutorial nya , Pertama agan buat file dengan nama menu.html kemudian masukkan script di bawah ini ke dalam file menu.html

<!DOCTYPE html>

<html>

<head>

<title>Menu Dropdown</title>

</head>

<body>

<div class=”menu”>

<li><a href=””>Menu 1</a></li>

<li><a href=””>Menu 2</a></li>

<li><a href=””>Menu 3</a></li>

<li><a href=””>Menu 4</a></li>

</div>

</body>

</html>

 

 

Tampilan dari script di atas seperti di bawah ini

 

Tampilan nya masih sangat standar bukan ?? agar tampilan lebih menarik….maka akan kita design dengan css . Buat file css dengan nama design.css , kemudian masukkan script css di bawah ini ke dalam file design.css

.menu{

width: 98%;

height: 50px;

background-color: lavender;

text-align: center;

font-family: arial;

}

 

Keterangan :

Width = untuk mengatur lebar tampilan

Height = untuk mengatur tinggi tampilan

Background-color = memberikan warna pada tampilan

Text-align = mengatur perataan teks pada tampilan

Font-family = mengatur jenis font pada tampilan

 

Kemudian , agar script css di atas terbaca pada file html nya , maka buat script penghubung antar file seperti di bawah ini

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

Tambahkan script diatas ke dalam file menu.html seperti di bawah ini

Maka tampilan dari menu.html seperti di bawah ini

 

Kemudian tambahkan script di bawah ini ke dalam file design.css

.menu li{

float: left;

width: 25%;

list-style: none;

}

 

Tampilan akan berubah jadi seperti ini

 

Agar posisi menu ke tengah secara vertical , tambahkan script di bawah ini ke dalam file css pada class menu

line-height: 50px;

 

Tampilan akan berubah seperti ini

Lalu untuk menghilangkan garis bawah (underline) pada menu , tambahkan script di bawah ini ke dalam file design.css

.menu li a{

text-decoration: none;

}

Tampilan akan seperti ini

Demikian tutorial kali ini , semoga tutorial ini dapat bermanfaat bagi agan-agan sekalin….terima kasih

 

Created By : Muhammad Bashir