Cara Membuat Menu Dropdown Responsive Dengan CSS

Cara Membuat Menu Dropdown Responsive Dengan CSS

Tutorial Membuat Menu Dropdown Pure CSS Responsive On Hover / On Click

Struktur Dasar Menu Drop Down Responsive Dengan CSS. Kali ini mas tamvan akan membagikan tutorial dasar memmbuat krangka menu navigation bar dengan dropdown / sub menu...

Pada tutorial membuat menu bar dropdown ini saya akan memberikan 2 (dua) cara untuk memunculkan dropdown / sub menunya. Bisa dengan On Click / muncul ketika pointer ada di atasnya (On Hover).

Sebelumnya saya juga sudah share tutorial cara membuat menu bar dropdown responsive, bagi kalian yang ingin melihatnya bisa kunjungi post lewat link berikut ini..

Tutorial Blogger Lainnya :


Berikut ini langkah-langkah membuat menu navigation bar dropdown pure css / hanya menggunakan CSS dan HTML
Untuk membuat menu navigation bar dropdown, kita harus menyiapak terlebih dahulu struktur / kerangka dari menunya..
Kerangka menu navigation 

<nav class='navmenu'>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
  </ul>
</nav>

Kalo kerangkanya sudah siap, kita tambahkan sedikit css dasar agar tampilannya lebih teratur.. 

.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}

Krangka menu navigation sudah jadi, kode di atas belum ada sub menunya / dropdownnya. Kalo kita pasang ke blogger maka hasilnya akan seperti berikut.



Sekarang kita tinggal menambahkan dropdown pada kerangka menu tersebut...
Cara pertama kita akan menambahkan struktur dropdown yang muncul ketika pointer berada di atasnya / dengan css hover.

Membuat Menu Bar Dropdown On Hover


<li class='submenu'><a href="#">Dropdown</a>
    <ul class='dropdown'>
        <li><a href="#">Dropdown 1</a></li>
        <li><a href="#">Dropdown 2</a></li>
        <li><a href="#">Dropdown 3</a></li>
    </ul>
</li>



nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
}

nav.navmenu li.submenu:hover ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
  width: 200px;
  background: #1C90F3
}
Sekarang menu navigation bar dropdown on hovernya sudah jadi, tinggal kita gabungkan antara Kerangka Menu bar dengan HTML dropdown + CSSnya..
Kira-kira hasilnya sebagai berikut.. 

<style type='text/css'>
/*CSS Nav*/
.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}
  
/*CSS DROPDOWN*/
nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
}

nav.navmenu li.submenu:hover ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
  width: 200px;
  background: #1C90F3
}

</style>


<nav class='navmenu'>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu1</a></li>
  <li class='submenu'><a href="#NOLINK">Dropdown</a>
  <ul class='dropdown'>
  <li><a href="#">Dropdown 1</a></li>
  <li><a href="#">Dropdown 2</a></li>
  <li><a href="#">Dropdown 3</a></li>
  </ul>
  </li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  </ul>
</nav>

Kalo kita pasang ke template blogger, hasilnya sebagai berikut



Menu Bar On Hover Sudah jadi, Sekarang kita lanjut ke tahap selanjutnya. Membuat dropdown on click, jadi nanti kita akan memunculkan dropdownnya ketika menu di klik.

Kita masih menggunakan Kerangka Menu Bar di atas ↑, karena di sini kita hanya merubah HTML dropdown nya saja..

Membuat Menu Bar Dropdown On Click Pure CSS


Untuk membuatnya, kalian tinggal rubah HTML menu dropdown On Hover + CSS Dropdown di atas ↑ dengan HTML dropdown + CSS Dropdown On Click dibawah ini... 

<li class='submenu'><label class="openmenu" for="openmenu">Dropdown</label>
    <input id="openmenu" role="button" type="checkbox">
    <ul class='dropdown'>
        <li><a href='#'>Dropdown1</a></li>
        <li><a href='#'>Dropdown2</a></li>
        <li><a href='#'>Dropdown3</a></li>
    </ul>
</li>



nav.navmenu li.submenu .openmenu {
  cursor: pointer;
  color: #FFF;
  padding: 10px 15px;
}

nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
  top: 1.6em;
  width: 200px;
}

nav.navmenu input[type="checkbox"] {
  display: none
}

nav.navmenu li.submenu #openmenu:checked ~ ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
}

Sehingga nanti hasilnya seperti berikut ini 

<style type='text/css'>
/*CSS Nav*/
.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}
  
/*CSS DROPDOWN*/
nav.navmenu li.submenu .openmenu {
  cursor: pointer;
  color: #FFF;
  padding: 10px 15px;
}

nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
  top: 1.6em;
  width: 200px;
}

nav.navmenu input[type="checkbox"] {
  display: none
}

nav.navmenu li.submenu #openmenu:checked ~ ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
}
</style>


<nav class='navmenu'>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu1</a></li>
        <li class='submenu'><label class="openmenu" for="openmenu">Dropdown</label>
            <input id="openmenu" role="button" type="checkbox">
            <ul class='dropdown'>
                <li><a href='#'>Dropdown1</a></li>
                <li><a href='#'>Dropdown2</a></li>
                <li><a href='#'>Dropdown3</a></li>
            </ul>
        </li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  </ul>
</nav>

Menu Navigation Bar Drop Down On Click Sudah jadi, Kalo dipasang ke template hasilnya sebagai berikut..



Kode di atas blm responsive, buat kalian yang ingin menjadikannya responsive, bisa lihat di link berikut, karena kalo di jelaskan di postingan ini akan sangat panjang tapi caranya sukup simple..

Demo Menu Navigation Bar Responsive On Click + On Hover Pure CSS


Gimana, apa kalian bingung? Jika iya silahkan bertanya di kolom komentar / kalian bisa juga lagsung pasang menu navigation di atas ke template sobat..
Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Menu Navigation Bar Drop Down Dengan CSS ini bermanfaat..
menu dropdown blogger, menu dropdown pada blog, menu dropdown html css, menu dropdown bootstrap, menu dropdown css keren, menu dropdown animation, a drop down menu in html, make a menu dropdown, create drop down menu html, make a dropdown menu css, css menu drop down style, drop down menu internet explorer 9
2 komentar