Membuat Responsive Dropdown Menu Menggunakan HTML + CSS Murni

Sebelumnya saya sudah menuliskan Tutorial Cara Membuat Menu Di Blog Dengan Mudah tanpa menggunakan script, dan pada kesempatan kali ini saya akan menuliskan tutorial bagaimana cara membuat responsive dropdown menu menggunakan html + css murni atau mampu juga disebut tanpa script.

Membuat menu di blog tanpa menggunakan script merupakan salah satu cara yang mampu kita gunakan untuk mengurangi beban kecepatan blog, alasannya yaitu menu yang menggunakan html + css murni ini tidak akan memberatkan loading blog kita.

Untuk demo responsive dropdown menu ini sahabat mampu lihat menu di blog ini, instruksi yang saya gunakan sama, cuma berbeda pada warna saja.

Ada 2 cara yang mampu kita lakukan untuk membuat responsive dropdown menu menggunakan html + css murni ini, yaitu :

Memasang menu melalui tata letak blogger
Memasang menu melalui Edit HTML template blogger

Ini untuk pengguna blogger, sedangkan untuk pengguna blog lain mungkin akan berbeda, namun pada intinya sama saja, dan tentu instruksi html + css responsive dropdown menu ini mampu kita gunakan untuk blog selain blogger maupun untuk website.

Cara Membuat Responsive Dropdown Menu Melalui Tata Letak Blogger

Jika sahabat memilih cara ini, maka langkah-langkah yang harus dilakukan yaitu sebagai berikut :

Masuk ke Dasbor blogger
Buka halaman Tata Letak
Klik Tambahkan Gadget / Add a Gadget pada posisi yang pas untuk menu (biasanya di bawah header atau di atasnya)
Pilih gadget HTML/JavaScript
Masukkan instruksi responsive dropdown menu yang ada di bawah nanti pada bab Konten / Content
Edit bab instruksi menu yang harus di edit
Klik Simpan / Save
Selesai

Nah itulah cara pertama yang mampu kita lakukan, dan cara ini lebih aman, alasannya yaitu tidak akan merusak template blogger yang kita gunakan.

Cara Memasang Responsive Dropdown Menu Melalui Edit HTML Template Blogger

Apa bila sahabat memilih cara ini, maka sebaiknya hati-hati dan teliti, alasannya yaitu cara ini mengandung risiko, namun kalau sahabat sudah terbiasa mengedit template blogger maka mungkin hal ini tidak masalah.

Berikut langkah - langkah yang harus dilakukan :

Masuk ke dasbor blogger
Buka Halaman Template
Back up dahulu template yang sahabat gunakan dengan cara mengklik tombol Backup / Restore (Cadangkan / Pulihkan), klik Unduh template penuh / Unduh full template.
Klik Edit HTML
Pasang instruksi responsive dropdown menu pada posisi yang pas / sahabat inginkan (bisanya di atas header atau di bawahnya)
Edit bab menu yang perlu di edit
Simpan pengaturan template
Selesai.

Khusus untuk cara ini sahabat boleh memisahkan instruksi html dan instruksi css responsive dropdown menu ini, misalnya ingin memasang instruksi css di antara instruksi <head> dan </head> baik itu diletakkan sebelum instruksi ]]></b:skin> atau sebelum instruksi </head>.

Oke, berikut instruksi html + css dropdown menu yang mampu sahabat gunakan

Kode HTML + CSS Untuk Membuat Dropdown menu Saja

 <style> .toggle, [id^=drop] {  display: none; } .bbt-menu{background:#00ACED;width:100%;} nav {     width:100%;     padding:0; } nav:after {     content: '';     display: table;     clear: both; } nav ul {     float:left;     padding: 0;     margin: 0;     list-style: none;     position: relative; } nav ul li {     margin: 0px;     display: inline-block;     float: left;     background: #00ACED; /*** Warna latar horizontal menu***/ } nav ul li ul li{     background: #333; /*** Warna latar drop down menu***/ } nav a, nav a:hover, nav a:visited {     display: block;     padding: 0 20px;     color: #FFF;     font-size: 20px;     line-height: 60px;     text-decoration: none; } nav ul li ul li:hover {     background: #333; } nav a:hover {     background-color: #333; } nav ul li ul li a:hover {     background-color: #111; } nav ul ul {     display: none;     position: absolute;     top: 60px; /*** Posisi Down Menu Di Ukur Dari Atas ***/ } nav ul li:hover > ul {     display: inherit; } nav ul ul li {     width: 170px; /*** Lebar Down Menu ***/     float: none;     display: list-item;     position: relative; } nav ul ul ul li {     position: relative;     top: -60px;     left: 170px; } nav label span{     float:right; } .toggle, [id^=drop] {     display: none; } nav input[type=checkbox]{     display: none; }  /* Media Queries *******************************************/  @media all and (max-width : 768px) {      nav {         margin: 0;     }     .toggle + a,     .menu {         display: none;     }     .toggle {         display: block;         background-color:#333;         padding: 0 20px;         color: #FFF;         font-size: 20px;         line-height: 60px;         text-decoration: none;         border: none;     }     .toggle:hover {         background-color: #000000;     }     [id^=drop]:checked + ul {         display: block;width: 100%;     }     nav ul li {         display: block;         width: 100%;     }nav ul ul .toggle,     nav ul ul a {         padding: 0 40px;     }nav ul ul ul a {         padding: 0 80px;     }     nav a:hover,     nav ul ul ul a {         background-color: #000000;     }     nav ul li ul li .toggle,     nav ul ul a {         background-color: #212121;     }     nav ul ul {         float: none;         position: static;         color: #ffffff;     }     nav ul ul li:hover > ul,     nav ul li:hover > ul {         display: none;     }     nav ul ul li {         display: block;         width: 100%;     }     nav ul ul ul li {         position: static;     } } </style> <div class='bbt-menu'> <nav>   <label for='drop' class='toggle'>Menu <span>&#9776;</span></label>   <input type='checkbox' id='drop' />   <ul class='menu'>     <li><a href='/'>Home</a></li>     <li><a href='#'>About</a></li>         <li>        <!-- First Tier Drop Down -->       <label for='drop-1' class='toggle'>Service <span>&#9776;</span></label>       <a href='#'>Service &#9776;</a>       <input type='checkbox' id='drop-1'/>       <ul>         <li><a href='#'>Service 1</a></li>         <li><a href='#'>Service 2</a></li>         <li><a href='#'>Service 3</a></li>       </ul>     </li>     <li><a href='#'>Contact</a></li>          <li>           <!-- First Tier Drop Down -->       <label for='drop-2' class='toggle'>Portfolio <span>&#9776;</span></label>       <a href='#'>Portfolio &#9776;</a>       <input type='checkbox' id='drop-2'/>       <ul>         <li><a href='#'>Portfolio 1</a></li>         <li><a href='#'>Portfolio 2</a></li>         <li>                       <!-- Second Tier Drop Down -->           <label for='drop-3' class='toggle'>Works <span>&#9776;</span></label>           <a href='#'>Works &#9776;</a>           <input type='checkbox' id='drop-3'/>           <ul>             <li><a href='#'>HTML/CSS</a></li>             <li><a href='#'>jQuery</a></li>             <li><a href='#'>Python</a></li>           </ul>         </li>       </ul>     </li>     <li><a href='#'>FAQ</a></li>   </ul> </nav> </div>

Kode HTML + CSS Untuk Membuat Dropdown menu + Kolom Pencarian

 <style> .toggle, [id^=drop] {  display: none; } .bbt-menu{background:#00ACED;width:100%;} .bbt-menu:after {     content: '';     display: table;     clear: both; } nav {     width:100%;     padding:0; } nav:after {     content: '';     display: table; } nav ul {     float:left;     padding: 0;     margin: 0;     list-style: none;     position: relative; } nav ul li {     margin: 0px;     display: inline-block;     float: left;     background: #00ACED; /*** This horizontal menu  background color***/ } nav ul li ul li{     background: #333; /*** This drop down menu  background color***/ } nav a, nav a:hover, nav a:visited {     display: block;     padding: 0 20px;     color: #FFF;     font-size: 18px;     line-height: 60px;     text-decoration: none; } nav ul li ul li:hover {     background: #333; } nav a:hover {     background-color: #333; } nav ul li ul li a:hover {     background-color: #111; } nav ul ul {     display: none;     position: absolute;     top: 60px; /*** Posisi Down Menu Di Ukur Dari Atas ***/ } nav ul li:hover > ul {     display: inherit; } nav ul ul li {     width: 170px; /*** Lebar Down Menu ***/     float: none;     display: list-item;     position: relative; } nav ul ul ul li {     position: relative;     top: -60px;     left: 170px; } nav label span{     float:right; } .toggle, [id^=drop] {     display: none; } nav input[type=checkbox]{     display: none; } .nav-menu{width:auto;display:block} .f-search{float:right;width:215.7px;display:block}  .box-search { background:#EEEEEE; border: 0; margin:0; padding:1.64em 0.5em; float:left; } .btn-search { background:#333; border: 0; color: #FFFFFF; margin:0; padding:1.56em 0.5em; float:left; cursor:pointer; } .btn-search:hover { background:#000; } /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { .f-search{margin:0 auto;float:none;display:block}     nav {         margin: 0;     }     .toggle + a,     .menu {         display: none;     }     .toggle {         display: block;         background-color:#333;         padding: 0 20px;         color: #FFF;         font-size: 20px;         line-height: 60px;         text-decoration: none;         border: none;     }     .toggle:hover {         background-color: #000000;     }     [id^=drop]:checked + ul {         display: block;width: 100%;     }     nav ul li {         display: block;         width: 100%;     }nav ul ul .toggle,     nav ul ul a {         padding: 0 40px;     }nav ul ul ul a {         padding: 0 80px;     }     nav a:hover,     nav ul ul ul a {         background-color: #000000;     }     nav ul li ul li .toggle,     nav ul ul a {         background-color: #212121;     }     nav ul ul {         float: none;         position: static;         color: #ffffff;     }     nav ul ul li:hover > ul,     nav ul li:hover > ul {         display: none;     }     nav ul ul li {         display: block;         width: 100%;     }     nav ul ul ul li {         position: static;     } } </style> <div class='bbt-menu'> <div class='nav-menu'> <nav>   <label for='drop' class='toggle'>Menu <span>&#9776;</span></label>   <input type='checkbox' id='drop' />   <ul class='menu'>     <li><a href='/'>Home</a></li>     <li><a href='#'>About</a></li>         <li>        <!-- First Tier Drop Down -->       <label for='drop-1' class='toggle'>Service <span>&#9776;</span></label>       <a href='#'>Service &#9776;</a>       <input type='checkbox' id='drop-1'/>       <ul>         <li><a href='#'>Service 1</a></li>         <li><a href='#'>Service 2</a></li>         <li><a href='#'>Service 3</a></li>       </ul>     </li>     <li><a href='#'>Contact</a></li>          <li>           <!-- First Tier Drop Down -->       <label for='drop-2' class='toggle'>Portfolio <span>&#9776;</span></label>       <a href='#'>Portfolio &#9776;</a>       <input type='checkbox' id='drop-2'/>       <ul>         <li><a href='#'>Portfolio 1</a></li>         <li><a href='#'>Portfolio 2</a></li>         <li>                       <!-- Second Tier Drop Down -->           <label for='drop-3' class='toggle'>Works <span>&#9776;</span></label>           <a href='#'>Works &#9776;</a>           <input type='checkbox' id='drop-3'/>           <ul>             <li><a href='#'>HTML/CSS</a></li>             <li><a href='#'>jQuery</a></li>             <li><a href='#'>Python</a></li>           </ul>         </li>       </ul>     </li>     <li><a href='#'>FAQ</a></li>   </ul> </nav> </div> <div class='f-search'><form action='/search' class='search'> <input class='box-search' name='q' placeholder='Search...' type='text'> <input class='btn-search' name='sa' type='submit' value='Search'> </form></div> </div>

Keterangan :

Setiap satu menu diawali dengan instruksi <li> dan diakhiri dengan instruksi </li>
Ganti #(tanda pagar yang saya beri tanda pada instruksi di atas) dengan link / url halaman yang sahabat inginkan, yang mana kalau menu tersebut di klik akan menuju ke halaman yang sahabat masukkan link / url halaman tersebut.
Ganti nama - nama menu (Seperti : Home About Service Service 1 Service 2 Service 3, dst) yang saya tandai pada instruksi di atas (tidak jauh dari instruksi pagar yang harus sahabat ganti) dengan nama menu yang sahabat inginkan.
Untuk tingkat lanjut silakan sahabat kembangkan sendiri

Cari Blog Ini

blog cara dan tutorial