![]() |
contoh menu navigasi buatan editblogtema |
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:
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:
- Masuk ke pengaturan blogger
- Pilih Tema
- Pada pengaturan template terbaru klik titik tiga ⋮
- Akan muncul menu seperti pada gambar:
- Klik atau pilih "Edit HTML"
- Pada halaman editor HTML yang telah terbuka cari kode penutup </head> dan letakan kode CSS berikut tepat diatasnya:
<style>Langkah Kedua:
.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>
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()">☰</a>
</div>
Langkah Ketiga:
Dan masih di dalam opsi "Edit HTML" cari kode </body> lalu letakan kode JavaScript berikut tepat diatasnya:
<script>Langkah Ke empat:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
SAVE template