Skip to main content

Cara Membuat Menu Dropdown Sederhana -HTML


Menu Dropdown
Menu dropdown adalah salah satu menu yang sangat populer dan juga tampilan yang dinamis dan efisien , menu ini sudah banyak yang menggunakan hampir semua tiap-tiap template web dan blog memiliki menu ini .

Nah pada postingan ini saya akan mencoba membahas bagaimana cara membuat menu Dropdown sederhana .dari pada basa basi mending langsung saja kita simak tutorialnya saja .

Cara Membuat Menu DropDown
Pertama yang perlu kita lakukan adalah membuat sebuah file dengan nama dropdown.html

<html>

<head>

<title>Menu Dropdown Sederhana</title>

<style>

</style>

</head>

<body>

<ul>

 <li><a href="#">Home</a></li>

 <li><a href="#">Google</a></li>

 <li><a href="#">Twitter</a></li>

 <li class="dropdown"><a href="#">DROPDOWN</a>

  <ul class="eagle-dropdown">

   <li><a href="#">SubMenu 3</a></li>

   <li><a href="#">SubMenu 4</a></li>

   <li><a href="#">SubMenu 5</a></li>

   <li><a href="#">SubMenu 6</a></li>

  </ul>

 </li>

 <li><a href="#">YOUTUBE</a></li>

</ul>

</body>

</html>

Coba jalankan di browser. Maka tampilan akan seperti ini





Tampilannya masih belum tersusun rapih dan masih kurang dinamis,

Selanjutnya kita tinggal membuat style CSS nya agar tampilannya lebih dinamis .



 .menu-drop{

  background-color: #a11f1f;

 }

 .menu-drop ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

 }

 .menu-drop > ul > li {

  float: left;

 }

 .menu-drop li a {

  display: inline-block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

 }

 .menu-drop li a:hover{

  background-color: #2b2b2b;

 }

  li.droddown {

  display: inline-block;

 }

 .dropdown:hover .eagle-dropdown {

  display: block;

 }

 .eagle-dropdown a:hover {

  color: #fff !important;

 }

 .eagle-dropdown {

  position: absolute;

  display: none;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

  background-color: #a11f1f;

 }

 .eagle-dropdown a {

  color: #fff !important;

 }

 .eagle-dropdown a:hover {

  color: #fff !important;

  background: #2b2b2b !important;

 }



Letakkan kode diatas diantara element <style> dan </style>

Contoh :

<style>

Kodenya

</style>



Kemudian kita berikan element ini diatas <ul>.




<header class="header">

<div class="menu-drop">



Karena element inilah yang membuat menu dropdown semakin menarik atau enak dipandang.

Dan letakkan element penutup yang diatas tadi.


</div>

</header>



Letakkan element ini diatas element </body>.

Jika sudah selesai sekarang tinggal save filenya dan jalankan di browser kalian masing-masing, Maka tampilannya akan seperti gambar dibawah.





Untuk kode lengkapnya:


<html>

<head>

<title>Menu Dropdown sederhana</title>

<style>

 .menu-drop{

  background-color: #a11f1f;

 }

 .menu-drop ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

 }

 .menu-drop > ul > li {

  float: left;

 }

 .menu-drop li a {

  display: inline-block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

 }

 .menu-drop li a:hover{

  background-color: #2b2b2b;

 }

  li.droddown {

  display: inline-block;

 }

 .dropdown:hover .eagle-dropdown {

  display: block;

 }

 .eagle-dropdown a:hover {

  color: #fff !important;

 }

 .eagle-dropdown {

  position: absolute;

  display: none;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

  background-color: #a11f1f;

 }

 .eagle-dropdown a {

  color: #fff !important;

 }

 .eagle-dropdown a:hover {

  color: #fff !important;

  background: #2b2b2b !important;

 }

</style>

</head>

<body>

<header class="header">

<div class="menu-drop">

<ul>

 <li><a href="#">Home</a></li>

 <li><a href="#">Google</a></li>

 <li><a href="#">Twitter</a></li>

 <li class="dropdown"><a href="#">DROPDOWN</a>

 <ul class="eagle-dropdown">

 <li><a href="#">SubMenu 3</a></li>

 <li><a href="#">SubMenu 4</a></li>

 <li><a href="#">SubMenu 5</a></li>

 <li><a href="#">SubMenu 6</a></li>

 </ul>

 </li>

 <li><a href="#">YOUTUBE</a></li>

</ul>

</div>

</header>

</body>

</html>

Sekian dari postingan Cara membuat menu dropdown sederhana kali ini .

Bila ada kesalahan pengetikan saya mohon maaf ,sampai jumpa di postingan selanjutnya.












Labels:





























Comments











Post a Comment






























Popular posts from this blog





















Cara Membuat Text Mengetik Sendiri Dengan JavaScript




























  Hai sobat codes, kali ini mimin bakal share sebuah tutorial bagaimana Cara Membuat Text Seakan Mengetik sendiri dengan Menggunakan JavaScript.  Buatlah Sebuah File Baru dengan extensi HTML.  Contoh : mengetik.html  Kemudian Untuk Langkah-Langkah nya Sihlakan Ikuti Sesuai langkah-langkah Berikut ini, Perhatikan dengan baik-baik!  Langkah Pertama  Copy Script HTML dibawah Ini, pastekan Ke file baru yang telah sobat Buat.  <!DOCTYPE html> <html> <head> <title>Text Sedang Mengetik...</title> </head> <body>   </body> </html>   Baca Juga:  Cara Membuat Text Berkedip Dengan JavaScript  Langkah Kedua  Kemudian, copykan kode JavaScript berikut ini.  <script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) {   if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {     this.running = true;     return;   }   this....




















Post a Comment









Baca Lebih Lanjut »






























Cara Membuat Text Berkedip Dengan JavaScript




























  Hai sobat codes , kali ini mimin Bakal Share Sebuah Tutorial Bagaimana Sih Caranya Membuat Sebuah Text Berkedap Kedip Hanya Dengan Menggunakan JavaScript, Untuk Memulai Membuat Text Berkedap Kedip, Buat Lah Sebuah File Baru Dengan Nama Sesuai Keinginan kalian. Berikan extensi file tersebut dengan extensi HTML.  Contoh : berkedip.html   Langkah Pertama  Copykan Code HTML berikut ke file yang telah Kalian Buat.  <!DOCTYPE html> <html> <head> <title>Contoh Text Berkedip</title> </head> <body>   </body> </html>  Langkah Kedua  Kemudian, Tambahkan Kode JavaScript Berikut ini.  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script> setInterval(function(){      $(".kedip").toggle(); },400); </script>  Letakkan dibawah tag <body> .   Baca Juga:  Cara Redirect Halaman Web Menggunakan JavaScript  Langkah Ketiga  Untuk Membuat Text nya menjad...




















Post a Comment









Baca Lebih Lanjut »






























Deface Metode Responsive Filemanager




























      Deface Metode Responsive Filemanager   Sesuai dengan judulnya kali ini Mimin Bakal Share Tutorialnya kali ini.    

























Baca Lebih Lanjut »