Cara Membuat Sub Menu Pull Down Bertingkat Pada Bilah Navigasi Pengganti Navbar

Artikel ini merupakan kelanjutan dari artikel sebelumnya yang berjudul “Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog”. Apabila dalam artikel tersebut diuraikan mengenai cara menyembunyikan bilah navbar sekaligus membuat bilah navigasi baru yang berisikan 2 (dua) buah kolom menu, maka perlu diketahui bahwa menu yang terbentuk atas penggunaan rangkaian kode yang terdapat dalam artikel tersebut hanyalah berupa 1 (satu) baris tab menu saja. Dengan demikian dapat diartikan bahwa ketika Anda ingin menambahkan sub menu pada masing-masing menu utama yang ada, tentu saja belum dapat dilakukan karena belum ada dukungan kode CSS yang digunakan untuk membuat bagian tersebut.

Lantas bagaimana jika Anda bermaksud atau berkeinginan untuk menambahkan sub menu pada menu utama yang ada pada bilah navigasi, sehingga akhirnya terbentuk menu bertingkat seperti yang tampak pada gambar di atas? Untuk mengerjakannya maka yang perlu dilakukan adalah dengan cara menambahkan rangkaian kode CSS berikut ini ke dalam template, dimana rangkaian kode CSS yang dimaksud nantinya akan berguna untuk menata desain tampilan sub menu yang akan dimunculkan. Dan kiranya tak perlu uraian panjang lebar, untuk menambahkan sub menu bertingkat seperti yang saya uraikan di atas, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, sisipkan kode CSS berikut ini di bawah rangkaian kode CSS sebelumnya (lihat rangkaian kode CSS yang terdapat pada langkah ketiga artikel sebelumnya), atau dapat pula Anda sisipkan di atas kode ]]></b:skin>.

.kolom-menu ul li ul, 
.kolom-menu ul li:hover li ul, 
.kolom-menu ul li:active li ul, 
.kolom-menu ul li:focus li ul {
  z-index: 100; 
  position: absolute; 
  left: -1800px;
  height: auto; 
  margin: 0; 
  padding: 0;
  background-color: #336699; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
}

.kolom-menu ul li ul li a, 
.kolom-menu ul li ul li ul li a {
  border-right: none; 
  box-shadow: none; 
  width: 100%;
}

.kolom-menu ul li ul li a:hover, 
.kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover, 
.kolom-menu ul li ul li ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125); 
  width: 100%;
}

/* List Item Kolom Sub Menu Pertama
------------------------------------*/
.kolom-menu ul li ul li, 
.kolom-menu ul li ul li:first-child {
  border-left: none; 
  width: 100px;
}

.kolom-menu ul li:hover ul, 
.kolom-menu ul li:active ul, 
.kolom-menu ul li:focus ul {
  left: auto; 
  top: 26px; 
  width: 120px;
}

/* List Item Kolom Sub Menu Kedua
------------------------------------*/
.kolom-menu ul li ul li ul li, 
.kolom-menu ul li ul li ul li:first-child {
  border-left: none; 
  width: 300px;
}

.kolom-menu ul li ul li:hover ul, 
.kolom-menu ul li ul li:active ul, 
.kolom-menu ul li ul li:focus ul {
  top: -1px; 
  white-space: normal; 
  text-align: justify;
  left: 120px; 
  width: 320px;
}

Keterangan:

Kode width: 120px; digunakan untuk mengatur ukuran lebar kolom sub menu level 1.  Apabila Anda melakukan perubahan untuk lebar kolom sub menu level 1 dengan mengganti angka yang digunakan pada kode tersebut, maka angka yang terdapat pada width: 100px; juga harus diubah dengan ketentuan angka yang digunakan untuk lebar kolom sub menu level 1 dikurangi 20. Sehingga jika Anda mengubah width: 120px; menjadi width: 200px;, maka secara otomatis width: 120px; harus diubah menjadi width: 180px;.

Demikian pula jika Anda melakukan perubahan untuk angka yang terdapat pada width: 320px;, maka secara otomatis pula angka yang digunakan pada width: 300px; adalah 320 – 20 = 300.

Sedangkan untuk angka yang digunakan pada left: 120px; adalah sama dengan angka yang digunakan pada width: 120px;. Sehingga apabila Anda melakukan perubahan ukuran pada width: 120px;, maka angka yang digunakan pada kode left: 120px; haruslah diisi dengan angka yang sama.

Ketiga, cari rangkaian kode berikutnya (lihat contoh format rangkaian kode yang terdapat pada langkah keempat artikel sebelumnya), kemudian sisipkan rangkaian kode baru di dalamnya dengan menggunakan format seperti contoh di bawah ini.

<ul>
  <li><a href='URL'>Sub Menu 1</a>
    <ul>
      <li><a href='URL'>Sub Menu 1.1</a></li>
      <li><a href='URL'>Sub Menu 1.2</a></li>
      <li><a href='URL'>Sub Menu 1.3</a></li>
    </ul>
  </li>
  <li><a href='URL'>Sub Menu 2</a></li>
</ul>

Sehingga apabila rangkaian kode tersebut telah disisipkan pada kode sebelumnya, maka akan menjadi seperti berikut ini.

<div class='bilah-menu-atas' id='bilahmenuatas' style='top: 0px;'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKswxWWoTa5oGLo8k05LOvxwp4RjVqZbABcylbMs8c8p2-Ca5TEA8Xyt1wqXZsYl7JJd-LORsOVierpwHqzv7vF0tny6m88U2jnCGh3-uwYlQBJwhggaGg2bLukgmzPzc-_zK6zWDlbc/s800/Beranda.png' width='20px'/></a></li>
        
        
        <li><a href='URL'>Menu Kiri 1</a>
        
          <ul>
            <li><a href='URL'>Sub Menu 1</a>
              <ul>
                <li><a href='URL'>Sub Menu 1.1</a></li>
                <li><a href='URL'>Sub Menu 1.2</a></li>
                <li><a href='URL'>Sub Menu 1.3</a></li>
              </ul>
            </li>
            <li><a href='URL'>Sub Menu 2</a></li>
          </ul>
          
        </li>  
        
        <li><a href='URL'>Menu Kiri 2</a></li>
        
        
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Dan selanjutnya lakukan perubahan URL sesuai dengan link yang akan ditautkan serta sesuaikan pula nama sub menu yang akan ditampilkan.

Keempat, simpan template.

Semoga berguna dan bermanfaat. Dan apabila mengalami kesulitan dalam mengimplementasikan teknik tersebut pada blog  yang Anda kelola, maka silakan mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Salam.