Usahawan-maju | Desain Cara Membuat Menu, Drop Down Menu - Membuat agar menu pada aplikasi web yang kita buat bisa drop down kita membutuhkan script CSS untuk mengatur tampilan menu tersebut. Jadi pada dasarnya kita akan membuat script HTML yang menggunakan tag <ul> dan <li> sehingga akan membentuk seperti pola gambar sebagai berikut :
Namun tampilan tersebut tidak cocok jika kita gunakan untuk membuat menu yang posisinya horizontal, karena akan sangat kacau tampilan yang kita dapatkan. Disini kita memerlukan script CSS agar tampilan menu horizontal yang kita butuhkan bisa sesuai dengan keinginan dan rapih dalam halam web kita. Perhatikan script berikut :
<style>
#menutop nav ul ul {
display: none;
}
#menutop nav ul li:hover > ul {
display: block;
}
#menutop nav ul {
background: #356b87;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#menutop nav ul:after {
content: ""; clear: both; display: block;
}
#menutop nav ul li {
float: left;
}
#menutop nav ul li:hover {
background: #4b545f;
}
#menutop nav ul li:hover a {
color: #fff;
}
#menutop nav ul li a {
display: block; padding: 2px 30px;
color: #FFFFFF; text-decoration: none;
}
#menutop nav ul ul {
background: #356b87; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menutop nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menutop nav ul ul li a {
padding: 2px 30px;
color: #fff;
}
#menutop nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
<div id="menutop">
<nav>
<ul>
<li><a href="?page=home"> Depan</a></li>
<li><a href="?page=about" >Conto Agenda</a>
<ul>
<li><a href="#">Agenda1 </a></li>
<li><a href="#">Agenda 2</a></li>
</ul>
</li>
<li><a href="?page=help"> Pengguna </a></li>
<li><a href="?page=contact"> Organisasi Contoh</a>
<ul>
<li><a href="#">Umum1</a></li>
<li><a href="#">Umum2</a></li>
<li><a href="#">Umum3</a></li>
<li><a href="#">Umum4</a></li>
<li><a href="#">Umum5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Jika sudah selesai dengan script diatas, Anda bisa coba lihat hasilnya kurang lebih sebagai berikut :
Sederhana bukan. Anda bisa mengubah warna, font dsb sesuai dengan bentuk yang anda inginkan, namun pada postingan kali ini sudah tersampaikan Cara Membuat Menu, Drop Down Menu. Semoga bisa bermanfaat
