Cara Mengatur HTML Dropdown Menu pada Widget Navigation/Main Menu Blog

Pada postingan kali ini saya akan berbagi cara mengatur HTML Dropdown Menu bawaan template menjadi menu pada blog kita. Dalam hal ini saya menggunakan Navigation Menu pada blog ini sebagai contoh. Di bawah ini adalah Navigation Menu bawaan template aslinya, dan akan saya ubah menjadi menu pada blog ini seperti pada gambar di atas: 

Berikut adalah HTML bawaan template: 

<div class='main-menu-wrap'>

 <div id='slick-nav'></div><!-- slick-nav -->

<!-- nav-menu -->

<div class='nav-menu'>

<ul class='blog_menus'>

  <li><a class='current' href='/'>Home</a></li>

  <li><a href='#'>Category</a></li>

  <li><a href='#'>Photography</a></li>

  <li><a href='#'>Lifestyle</a></li>

  <li><a href='#'>Archives</a>

     <ul class='sub-menu'>

        <li><a href='/search/label/travel'>Travel</a></li>

  <li><a href='/search/label/fun'>Fun</a></li>

  <li><a href='/search/label/media'>Media</a></li>

  <li><a href='/search/label/lifestyle'>Lifestyle</a></li>

     </ul>

  </li>

  <li><a href='/p/contact-us.html'>Contact</a></li>

</ul>

</div></div>

 

Nah, bagaimana cara mengatur HTML agar ketika menu dipilih maka akan mengarah pada link yang yang kita inginkan sesuai pada blog kita? 

Pertama, pada bagian ini: 

<li><a href='#'>Category</a></li>

Ganti '#' dengan link URL yang kamu inginkan dan ganti nama menu (dalam contoh di atas adalah 'Cathegory') sesuai dengan keinginanmu. Sebagai contoh, setelah disesuaikan maka HTML akan menjadi seperti ini: 

<li><a href='https://www.rudyarra.com/search/label/Kesehatan'>KESEHATAN</a></li>

SUB MENU

Untuk membuat/menyesuaikan Sub Menu, lihat baris kode HTML yang berada di bawah kode berikut: <ul class='sub-menu'>

Sebagai contoh, saya akan menyesuaikan kode sub menu berikut: 

<li><a href='/search/label/travel'>Travel</a></li>

Setelah kode herf=' tambahkan link URL tujuan, lalu ubah nama menu (tulisan warna orange) dengan nama yang kamu inginkan. Maka setelah saya ubah HTML akan menjadi seperti ini: 

<li><a href='https://www.rudyarra.com/search/label/Dokumen'/search/label/dokumen'>DOKUMEN</a></li>

Setelah disesuaikan, format HTML pada Navigation/Dropdown Menu di blog saya menjadi seperti ini: 

<div class='main-menu-wrap'>

 <div id='slick-nav'></div><!-- slick-nav -->

<!-- nav-menu -->

<div class='nav-menu'>

<ul class='blog_menus'>

  <li><a class='current' href='/'>HOME</a></li>

  <li><a href='https://www.rudyarra.com/search/label/Kesehatan'>KESEHATAN</a></li>

  <li><a href='https://www.rudyarra.com/search/label/Olahraga'>OLAHRAGA</a></li>

  <li><a 

href='https://www.rudyarra.com/search/label/Farming'/search/label/farming>FARMING</a></li>

  <li><a 

href='https://www.rudyarra.com/search/label/Tutorial'>TUTORIAL</a></li>

<li><a href='#'>ARSIP</a>

<ul class='sub-menu'>

        <li><a href='https://www.rudyarra.com/search/label/Dokumen'/search/label/dokumen'>DOKUMEN</a></li>

  <li><a href='https://www.rudyarra.com/search/label/Typography'/search/label/typography'>TYPOGRAPHY</a></li>

  <li><a href='https://www.rudyarra.com/search/label/Urang%20Sunda'/search/label/urang%20sunda'>SUNDA</a></li>

<li><a href='https://www.rudyarra.com/search/label/Sekitar%20Kita'/search/label/sekitar%20kita'>SEKITAR KITA</a></li>

     </ul>

</li></ul></div></div>

Dan hasilnya adalah Navigation Menu seperti yang saya gunakan pada blog ini. 

Terima kasih.