Cara Menciptakan Sajian 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 sajian navigation kafetaria dengan dropdown / sub menu...

Pada tutorial menciptakan sajian kafetaria dropdown ini aku akan menawarkan 2 (dua) cara untuk memunculkan dropdown / sub menunya. Bisa dengan On Click / muncul saat pointer ada di atasnya (On Hover).

Sebelumnya aku juga sudah share tutorial cara menciptakan sajian kafetaria dropdown responsive, bagi kalian yang ingin melihatnya dapat kunjungi post lewat link berikut ini..

Tutorial Blogger Lainnya :

• Memunculkan Menu Ketika Blog Di Klik Kanan

• 4 Menu Bar Drop Down Responsive Tanpa Edit HTML

• Kumpulan Mega Menu Navigation Bar Responsive

Berikut ini langkah-langkah menciptakan sajian navigation kafetaria dropdown pure css / hanya memakai CSS dan HTML
Untuk membuat sajian navigation kafetaria dropdown, kita harus menyiapak terlebih dahulu struktur / kerangka dari menunya..
Kerangka sajian 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 semoga 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 sajian navigation sudah jadi, arahan di atas belum ada sub menunya / dropdownnya. Kalo kita pasang ke blogger maka kesannya akan menyerupai berikut.

• Home
• Menu1
• Menu2
• Menu3
• Menu4

Sekarang kita tinggal menambahkan dropdown pada kerangka sajian tersebut...
Cara pertama kita akan menambahkan struktur dropdown yang muncul saat 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 kafetaria dropdown on hovernya sudah jadi, tinggal kita gabungkan antara Kerangka Menu kafetaria dengan HTML dropdown + CSSnya..
Kira-kira kesannya 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, kesannya sebagai berikut

• Home
• Menu1
• Dropdown
  • Dropdown 1
  • Dropdown 2
  • Dropdown 3
• Menu2
• Menu3

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

Kita masih memakai Kerangka Menu Bar di atas ↑, alasannya yaitu di sini kita hanya merubah HTML dropdown nya saja..

Membuat Menu Bar Dropdown On Click Pure CSS

Untuk membuatnya, kalian tinggal rubah HTML sajian 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 kesannya menyerupai 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 kesannya sebagai berikut..

Open Menu

• Home
• Menu1
• Dropdown
  • Dropdown1
  • Dropdown2
  • Dropdown3
• Menu2
• Menu3

Kode di atas blm responsive, buat kalian yang ingin menjadikannya responsive, dapat lihat di link berikut, alasannya yaitu 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 dapat juga lagsung pasang sajian navigation di atas ke template sobat..
Cukup sekian dan terima kasih, semoga artikel perihal 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 sajian in html, make a sajian dropdown, create drop down sajian html, make a dropdown sajian css, css sajian drop down style, drop down sajian internet explorer 9