Selamat malam sahabat gudang coding, gimana nih kabarnya? semoga sehat ya sahabat. lama admin tidak posting Pada kesempatan ini admin akan membuat contoh Web Design yaitu Dropdown, Drpdown merupakan hal yang sudah lazim yang ada pada website dari biasa maupun Luar Biasa,
Dalam tutorial ini admin akan membuat hanya dalam satu file saja karena kodenya tidak terlalu banyak. Kita mulai saja, pertama buat folder ( terserah mau dimana saja yang penting bisa diakses )
Untuk membuatnya pastinya harus mempunyai Text Editor ( Notepad, Sublime Text ) dan Web Browser ( Firefox, Google Chrome )
Kedua buat file dengan nama index.html dan masukan kode berikut
<html>
<head>
<title>DropDown Menu dengan CSS</title>
<style type="text/css">
/*style menu dan untuk menghilangkan list style*/
#menu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
/*membuat menu menjadi horizontal dengan display block*/
#menu ul li{
display: block;
position: relative;
float: left;
}
/*Untuk menyembunyikan ul li(sub menu)*/
#menu li ul{display: none;}
/*style awal sebelum cursor mouse diarahkan(menu utama)*/
#menu ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #000;
/*margin left:1px;*/
white-space: nowrap;
}
/*style setelah cursor diarahkan*/
#menu ul li a:hover{background:orange;}
/*untuk memunculkan sub menu jika pada sebuah menu utama pada tag il ul(maksudnya ada tag ul dalam tag li)*/
#menu li:hover ul{
display: block;
position: absolute;
}
/*meratakan sub menu kanan kiri dan menghilangkan fungsi float left(mengembalikan k default)*/
#menu li:hover li{
float: none;
font-size: 11px;
}
/*style awal sebelum cursor mouse diarahkan(sub menu)*/
#menu li:hover a{background: orange;}
/*style setelah cursor diarahkan*/
#menu li:hover li a:hover{background: #666;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Blogspot</a></li>
</ul>
</li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Tentang Kami (kami)</a></li>
</ul>
</li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</body>
</html>
Setelah memasukan kode, untuk melihat hasilnay hanya double click pada file, jika menggunakan Firefox akan langsung terlihat hasilnya