Membuat Dropdown Navbar menggunakan HTML dan CSS

Navbar merupakan sebuah navigasi yang memiliki peranan sangat penting didalam sebua website, dengan adanya navbar, website yang kita buat akan mudah dan nyaman digunakan oleh penggunanya dalam proses pengelolaan data. Semakin bagusnya navbar sebuah website maka akan semakin bagus pula tampilan dan kenyamanan website tersebut dalam penggunaannya.

Pada kesempatan ini kita akan membuat navbar yang memiliki dropdown agar website yang kita buat terlihat bagus dan relevan. Sebelum kita memasuki tahap pengkodingan, sebaiknya kita menguasai dulu tentang html dan css, dimana kedua ini merupakan yang paling penting dalam pembuatan pembuatan website. Setelah kalian memahani keduanya, maka kita bisa memasuki tahap pengkodingan. baiklih langsung saja kita bahas kodingnya.

Membuat File index.html

Tahap pertama adalah dengan membuat file html. Buatlah sebuah file dengan nama index dengan extensi .html (index.html). Setelah membuat file index.html maka selanjutnya kita membuat koding nya. untuk kodingnya adalah sebagai berikut.


<html>
<head>
 <title>Tutorial Dropdown</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
<body>
 <center><h1 style="color:black;">Membuat Dropdown dengan HTML dan CSS</h1></center>
  <div class="menu-wrap">
 <ul>
  <li><a href="">Beranda</a></li>
  <li><a href="">Ebook</a></li>
  <li><a href="">Pemrograman</a>
   <ul>
    <li><a href="">Website</a></li>
    <li><a href="">Desktop</a></li>
    <li><a href="">Mobile</a></li>
   </ul>
  </li>
  <li><a href="http://portal-coding.blogspot.com">Blogg</a></li>
 </ul>
  </div>
</body>
</html>

Membuat file style.css

Setelah kita memasukkan koding diatas, maka selanjutnya adalah membuat file css, silahkan buat file css dengan nama style (style.css). dan simpan dala satu folder dengan file html tadi. Fungsi dari file ini adalah untuk mempercantik desain halaman yang kita buat dengan html. Setelah membuat file style.css silahkan masukkan coding beriktu ini.


* {margin:0; padding:0;}

body {
 background-color:#fff;
 font-family:Arial, Helvetica, sans-serif;
 color:#FFF;
 padding-top:20px;
}

.menu-wrap {
 background-color:#f64c3b;
 height:50px;
 line-height:50px;
 position:relative;
 width:770px;
 margin:auto;
 margin-top:80px;
}

.menu-wrap ul {
 list-style:none;
}

.menu-wrap ul li a {
 float:left;
 width:150px;
 display:block;
 text-align:center;
 color:#FFF;
 text-decoration:none;
 text-transform:uppercase;
}

.menu-wrap ul li a:hover {
 background-color:#666;
 display:block;
}

.menu-wrap ul li:hover ul {
 display:block;
}

.menu-wrap ul ul {
 display:none;
 list-style:none;
 position:absolute;
 background-color:#f64c3b;
 left:300px;
 top:50px;
 width:190px;
}

.menu-wrap ul ul li a {
 float:none;
 display:block;
 padding-left:30px;
 text-align:left;
 width:160px;
}

.menu-wrap ul ul li a:hover {
 color:#fff;
}

Setelah kalian masukkan koding css diatas, jangan lupa disave lalu jalankan menggunakan browser kalian. Maka hasilnya akan muncul seperti berikut ini.

Demikianlah tutorial singkat mengenai cara membuat dropdown navbar menggunakan html dan css. Silahkan pelejari dengan seksama agar lebih memahaminya. Untuk yang belum paham bisa bertanya melalui kolom komentar, insya allah akan saya balas. Sekian dulu untuk hari ini, terimakasih.

Membuat Dropdown Navbar menggunakan HTML dan CSS