BAGAIMANA CARA MEMBUAT MENU NAVIGASI DENGAN DROPDOWN YANG RESPONSIF

contoh menu navigasi buatan editblogtema

Membuat menu navigasi sudah dimuat beberapa kali di dalam blog ini, namun terdapat beberapa kesalah-fahaman dalam menerapkannya. Setelah minta ijin kepada admin blog ini saya mencoba memberikan contoh trik membuat menu navigasi sederhana dengan sub-menu dropdown yang sangat responsive.

Apakah yang dimaksud dengan sub-menu dropdown itu? Yaitu submenu pada bar navigasi header blog yang muncul berurut dari atas ke bawah pada saat sebuah menu "dropdown" di klik atau disentuh. Navigasi dengan dropdown sangat berguna untuk menghemat ruang dan merapikan tampilan pada header menu blog.
Perhatikan contoh di bawah, cobalah sentuh "Dropdown" untuk menampilkan menu dropdownnya:

Anissalog Blog Kontak

Link 1 Link 2 Link 3

Perihal ☰

TRIK DASAR MEMBUAT MENU NAVIGASI DENGAN DROPDOWN YANG RESPONSIF

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bagaimana cara membuatnya? Kalian bisa menerapkan ini dengan memasang CSS, HTML dan kode JavaScript pada tempat yang benar di dalam template:

Langkah Pertama:

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pada pengaturan template terbaru klik titik tiga ⋮
4. Akan muncul menu seperti pada gambar:
   
5. Klik atau pilih "Edit HTML" 
6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode CSS berikut tepat diatasnya:

<style>

.topnav {
overflow: hidden;
background-color: #FF69B4;
}
.topnav a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px; font-family:'Mansalva', cursive;
}
.active {
background-color: #ADD8E6;
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 10px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>

Langkah Kedua:

Masih di dalam opsi "Edit HTML" letakan kode HTML berikut ini tepat di bawah kode </head>:

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Beranda</a>
<a href="#news">Blog</a>
<a href="#contact">Kontak</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<svg style="width:14px;height:14px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z" />
</svg></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">Perihal</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Langkah Ketiga:

Dan masih di dalam opsi "Edit HTML" cari kode </body> lalu letakan kode JavaScript berikut tepat diatasnya:

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

Langkah Ke empat:
SAVE template 

SHARE YA: