Membuat Drop Down Menu (Style Satu)

(gambar: milik sendiri)

drop down mnenu style satu

Juni 14 2014 | membuat drop down menu memang sangat dibutuhkan dalam suatu halaman web. Selain itu, drop down menu ini sangatlah memudahkan bagi para pengunjung untuk melihat apa saja yang ada di dalam halaman web tersebut.

Drop Down menu juga sangat baik untuk navigasi, karena drop down menu inilah sangat memudahkan atau mengklasifikasikan Menu-Menu.

Untuk Drop Down Menu kali ini, saya memberikan judulnya dengan sebutan Drop Down Menu (Style Satu), hal ini berhubungan dengan drop down menu yang saya posting kali ini adalah drop down menu yang pertama kali di ajarkan oleh guru pemrograman web saya, pak Dian Pramukti Wijaya, Sehingga drop down menu nya masih sangat sederhana, hanya menjalankan fungsi utamanya yaitu membuat drop menu  dengan gaya yang sederhana.

Oke, sekarang masuk ke proses membuat drop down menu:

1. Pemasangan Cashading Style Sheet (CSS):

#fandi {
margin:0 ;
width:auto ;
}
#fandi ul {
margin:0 ;
padding:0 ;
line height:30px
}
#fandi li {
margin:0 ;
padding:0 ;
list-style:none;
float:left;
position:relative;
background:orange;
}
#fandi ul li a {
text-align:center;
height:40px;
width:300px;
display:block;
color:black;
text-decoration:none;
font-family:"comic sans ms",cursive;
border:1px solid #fff;
text-shadow:1px 1px 1px #000;
}
#fandi ul ul {
position:absolute;
visibility:hidden;
top:32px;

}
#fandi ul li:hover ul {
visibility:visible;
z-index:9999;
}

*** Penjelasan

• #fandi : adalah suatu penanda div mana yang akan dipanggil (nanti pada HTML).
• background : adalah pemberian warna latar belakang pada list.
• text-align adalah : adalah letak dimana teks berada, contoh: text-align:left; , maka teks akan berada di rata kiri, dan sebagainya.
• height : adalah pemberian berapa tinggi menu yang diinginkan.
• width :; adalah pemberian berapa lebar menu yang diingkan.
• color : adalah pemberian warna teks, di atas diberi contoh: color:black, maka teks akan berwarna hitam.
• font-family : adalah pemberian jenis font di atas diberi contoh: comic sans ms, kalian dapat menggantinya dengan jenis font yang kalian inginkan.
• border : adalah pemberian warna batas menu, di situ diberi contoh: border:1px solid #fff(putih)
  text-shadow : adalah pemberian efek bayangan teks.

2. Selanjutnya Pemasangan HTML:

<div id="fandi">
<ul>
<li><a href ="#">Sistem Operasi</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Linux</a></li>
<li><a href="#">Machintos</a></li>
<li><a href="#">Debian</a></li>
<li><a href="#">Unix</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">BlackBerry</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href ="#">Browser</a>
<ul>
<li><a href="#">Internet Exproler</a></li>
<li><a href="#">Mozilla firefox</a></li>
<li><a href="#">Google Chrome</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Ask.com</a></li>

</ul>
</li>
</ul>

</div>

***Penjelasan

• <div id="fandi"> : fandi adalah suatu tanda pemanggilan CSS.
• Untuk penjelasan element ul dan li dan yang lainnya saya kira kalian sudah bisa sendiri tanpa saya harus jelaskan.

Nah, di atas tadi adalah script dasar yang pernah guru saya berikan kepada kami, drop down di atas masih sangat sederhana, namun untuk postingan tentang drop down menu lainnya akan saya buat, mulai dari style satu, style dua, style tiga, dan seterusnya.

Dan saya cukupkan untuk postingan kali ini, dengan gaya bahasa saya sendiri, saya mencoba untuk menjelaskan kepada kalian dan meskipun masih jauh dari lengkap, namun saya akan selalu mencoba semoga postingan yang saya tulis bisa bermanfaat untuk kalian, sekian. Semoga bermanfaat.