Iso Web Id Tutorial Komputer
Dropdown menu merupakan hal wajib untuk sebuah website, hal ini untuk mempermudah pengelompokan suatu halaman website. Kalian pasti sudah melihat model – model dropdown menu yang bagus yang dapat dibuat dinamis dengan melibatkan javascript sebagai media animasi saat menu dihover mouse, lalu bagaimana bila kita tidak melibatkan javascript dalam penerapan Downdown menu? tentu hal ini akan sedikit berbeda dengan penerapa menggunakan javascript. Dropdown menu yang akan kita buat pada artikel ini sederhana sekali karena tidak memerlukan animasi saat menu di hover oleh mouse akan tetapi cukup memunculkan menu yang telah dihidden.
Kalian tidak perlu mahir html maupun css untuk membuat 1 dropdown menu sederhana seperti ini, yang dibutuhkan hanya penempatan serta keanggunan warna agar terlihat lebih menarik. Untuk memulai membuatnya kalian cukup membuat 2 buah file yaitu file html dan file css berikut lengkapnya :
Buat 1 file index.html isi seperti dibawah ini.
<html>
<head>
<title>Dropdown menu Tanda Javascript</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<ul class=”menu_jualbeli” id=”menu_jualbeli”>
<li><a href=”#”><b>Home</b></a></li>
<li class=”pmenu”><a href=”#” rel=”mn1″><b>Master</b></a>
<ul class=”submenu” id=”mn1″>
<li><a href=”#”>Ekspedisi</a></li>
<li><a href=”#”>Propinsi</a></li>
<li><a href=”#”>Kota</a></li>
<li><a href=”#”>Harga Pengiriman</a></li>
<li><a href=”#”>Kategori Barang</a></li>
<li><a href=”#”>Barang</a></li>
<li><a href=”#”>Alamat member</a></li>
</ul>
</li>
<li class=”pmenu”><a href=”#” rel=”mn2″><b>Transaksi</b></a>
<ul class=”submenu” id=”mn2″>
<li><a href=”#”>Pembelian Barang</a></li>
<li><a href=”#”>Konfirmasi pembayaran</a></li>
</ul>
</li>
</ul>
</body>
</html>
Kemudian buat file style.css isi seperti berikut
body{font:normal 12px Arial, Hevetica, Sans-serif;}
a{text-decoration:none;}
ul.menu_jualbeli{background-color: #FFFFFF;border: 1px solid #f2f2f2;width:98%;
padding: 5px; margin: 5px 0 5px 0; list-style: none; position: relative;display: inline-table;
}
ul.menu_jualbeli li{float:left;}
ul.menu_jualbeli li a{display:block;padding:0 10px;border-right: 1px solid #CCC;}
ul.menu_jualbeli li:hover > ul {display: block;}
ul.menu_jualbeli:after {content: “”; clear: both; display: block;}
ul.menu_jualbeli li:hover {background-color: #F5F5F5;}
ul.menu_jualbeli li:hover a{color:#000;}ul.menu_jualbeli ul.submenu{display:none;position:absolute;margin:0;padding:0;width:150px;}
ul.menu_jualbeli ul.submenu li {float: none; border-bottom: 1px solid #575f6a;
position: relative; list-style:none!important;
}
ul.menu_jualbeli ul.submenu li a{border-right:none;padding:3px 0;margin-left:0;}
ul.menu_jualbeli ul.submenu ul {
position: absolute; left: 100%; top:0;
}
Simple sekali bukan kalian tidak perlu menambahkan javascript untuk membuat Drowndown menu yang sederhana, paling tidak menekan dari sisi scripting dan loading browsing meski tidak signifikan. Kalian bisa menambahkan sedikit css agar dropdown diatas berjalan multi level menu.
