Cara membuat menu dropdown sederhana dengan html dan css

Hay sobat kak dolop, ketemu lagi nih kita hehe, pada artikel sebelumnya kita sudah membahas bagaimana cara membuat menu dengan html dan css , silahkan dilihat-lihat lagi jika belum mempelajarinya, karena pada artikel ini kita akan menyambungkannya dengan materi pada artikel tersebut, yaitu cara membuat menu dropdown dengan html dan css . Oke tanpa perlu basa-basi langsung saja

Cara membuat menu dropdown sederhana dengan html dan css . Yang pertama silahkan buat folder terlebih dahulu lalu terserah mau diberi nama apa, kemudian teman-teman membuat sebuah file yang bernama index.html kemudian simpan kedalam folder yang sudah dibuat tadi. Lalu copy kan script dibawah ini ke dalam file index.html tersebut.

<!DOCTYPE html>
<html>
<head>
<title> Menu bar dengan html dan css </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- wrapper untuk pembungkus layout -->
<div id="wrapper">
<!-- menu untuk membuat menu -->
<div id="menu">
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Programming </a> <!-- tag penutup li dihilangkan -->
<!-- mulai membuat tag ul baru untuk membuat sebuah dropdown pada menu programming -->
<ul>
<li> <a href="#"> Html dan Css </a> </li>
<li> <a href="#"> Php </a> </li>
<li> <a href="#"> Mysql </a> </li>
</ul>
</li>
<!-- Akhir penutup dropdown -->
<li> <a href="#"> Tentang </a> </li>
</ul>
</div>
</div>
</body>
</html>

Lalu save , dan buat satu file lagi beri nama style.css lalu copy kan script dibawah ini
*{
margin: 0;
padding: 0;
}
/* untuk pembungkus webnya */
#wrapper{
margin:50px auto;
width: 960px;
}
/* untuk mempercantik menu web */
/* memberi warna background dan tinggi background */
#menu{
background-color: #5B91BE;
height: 60px;
}
/* menghilangkan style pada list */
#menu ul{
list-style: none;
}
/* mengatur posisi menu dan menghiasnya */
#menu ul li{
float: left;
position: relative;
}
#menu ul li a{
text-decoration: none;
padding: 20px 20px;
color: white;
display: block;
}
/* memberikan efek warna ketika kursor diarahkan pada menu tersebut */
#menu ul li a:hover{
background-color: #358A9F;
color: black;
cursor: pointer;
}
/* Mulai proses membuat dropdown menunya */
#menu ul li ul{
display:none; /* hilangkan text nya terlebih dahulu */
}
#menu ul li:hover ul{
/* tampilkan text kebawah dan posisinya tetap */
display: block;
position: absolute;
}
#menu ul li:hover ul li a{
/* memberi warna background , lebar backgorund , dan tulisan putih*/
background-color: #5B91BE;
width: 150px;
color:white;
}
#menu ul li:hover ul li a:hover{
/* efek warna ketika kursor diarahkan ke dropdown menu */
background-color: #3cf;
color: black;
}

kemudian save , dan buka file index.html tadi cukup double klik saja nanti akan tampil ke browser anda, dan jika berhasil maka akan tampil seperti ini.
cara membuat menu dropdown

Nah untuk penjelasannya sendiri sudah saya tulis di dalam source code tersebut.
Silahkan download source code lengkapnya disini [klik disini]

Related Posts:

0 Response to "Cara membuat menu dropdown sederhana dengan html dan css"

Post a Comment

1. Dilarang menggunakan kata-kata kasar atau pornografi.
2. Dilarang menggunakan live link ataupun link biasa.
3. Berkomentarlah dengan komentar yang relevan