Membuat Responsive Dropdown Menu Menggunakan HTML + CSS Murni - BBT: Cara membuat responsive dropdown menu di blog menggunakan html + css murni alias tanpa script. Ada juga kode html menu + kolom pencarian untuk blog

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 bisa juga disebut tanpa script.

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

Untuk demo responsive dropdown menu ini sobat bisa lihat menu di blog ini, kode yang saya gunakan sama, cuma berbeda pada warna saja.
html css responsive dropdown menu
Ada 2 cara yang bisa kita lakukan untuk membuat responsive dropdown menu menggunakan html + css murni ini, yaitu :
  1. Memasang menu melalui tata letak blogger
  2. 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 kode html + css responsive dropdown menu ini bisa kita gunakan untuk blog selain blogger maupun untuk website.

Cara Membuat Responsive Dropdown Menu Melalui Tata Letak Blogger

Jika sobat memilih cara ini, maka langkah-langkah yang harus dilakukan adalah sebagai berikut :
  1. Masuk ke Dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget pada posisi yang pas untuk menu (biasanya di bawah header atau di atasnya)
  4. Pilih gadget HTML/JavaScript
  5. Masukkan kode responsive dropdown menu yang ada di bawah nanti pada bagian Konten / Content
  6. Edit bagian kode menu yang harus di edit
  7. Klik Simpan / Save
  8. Selesai 
cara membuat responsive dropdown menu
Nah itulah cara pertama yang bisa kita lakukan, dan cara ini lebih aman, karena tidak akan merusak template blogger yang kita gunakan.

Cara Memasang Responsive Dropdown Menu Melalui Edit HTML Template Blogger

Apa bila sobat memilih cara ini, maka sebaiknya hati-hati dan teliti, karena cara ini mengandung risiko, namun jika sobat sudah terbiasa mengedit template blogger maka mungkin hal ini tidak masalah.

Berikut langkah - langkah yang harus dilakukan :
  1. Masuk ke dasbor blogger
  2. Buka Halaman Template
  3. Back up dahulu template yang sobat gunakan dengan cara mengklik tombol Backup / Restore (Cadangkan / Pulihkan), klik Download template penuh / Download full template.
  4. Klik Edit HTML
  5. Pasang kode responsive dropdown menu pada posisi yang pas / sobat inginkan (bisanya di atas header atau di bawahnya)
  6. Edit bagian menu yang perlu di edit
  7. Simpan pengaturan template
  8. Selesai.
Khusus untuk cara ini sobat boleh memisahkan kode html dan kode css responsive dropdown menu ini, misalnya ingin memasang kode css di antara kode <head> dan </head> baik itu diletakkan sebelum kode ]]></b:skin> atau sebelum kode </head>.

Oke, berikut kode html + css dropdown menu yang bisa sobat gunakan

Kode HTML + CSS Untuk Membuat Dropdown menu Saja

resposnsive dropdown menu

<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

membuat resposnsive dropdown menu

<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 kode <li> dan diakhiri dengan kode </li>
  • Ganti #(tanda pagar yang saya beri tanda pada kode di atas) dengan link / url halaman yang sobat inginkan, yang mana jika menu tersebut di klik akan menuju ke halaman yang sobat masukkan link / url halaman tersebut.
  • Ganti nama - nama menu (Seperti : Home About Service Service 1 Service 2 Service 3, dst) yang saya tandai pada kode di atas (tidak jauh dari kode pagar yang harus sobat ganti) dengan nama menu yang sobat inginkan.
  • Untuk tingkat lanjut silakan sobat kembangkan sendiri
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Membuat Responsive Dropdown Menu Menggunakan HTML + CSS Murni yang ada di blog ini bermanfaat buat sobat