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
