November 11, 2019

BAGAIMANA CARA MEMBUAT MENU NAVIGASI DENGAN DROPDOWN YANG RESPONSIF

contoh menu navigasi buatan editblogtema
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:

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 

Born in 29 Jan 2002 in Batam. I am a student of Senior High School (SMA) Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++

5 comments:

  1. saya dulu kebingungan soal membuat navigasi menu hehe. sekarang sudah bisa, dengan cara melihat panduan-panduan semacam ini. Hehe

    ReplyDelete
    Replies
    1. Benar mbak, kita selalu belajar dan saling berbagi informasi, sehingga kita dapat mengatasi beberapa hal dari hal hal sederhana sampai kepada hal yang paling sulit :)

      Delete
  2. Hai Kak...
    Keren banget bisa tahu membuat menu navigasi. Aku belum berani otak-atik blog aku lagi.

    Tapi, Kak boleh request untuk dibikinkan coding tentang cara agar backlink beda warna dari teks biasa dan bisa disesuaikan warnanya sesuai dengan warna kesukaan kita?
    Soalnya template bawaanku, bikin backlink-nya nggak kelihatan. :(

    ReplyDelete
  3. kOK Ada nama ini Anissa Auliasari, Mas..? siapakah..? Staf baru yah, :) Kepo nih.....hahaha.

    ReplyDelete
    Replies
    1. Kang Nata saya hanya salah satu pengelola, bukan pemilik lagi. Sudah pindah tangan ha ha ha..

      Delete