Membuat Menu Navigasi Sederhana (HTML, CSS dan Javascript)

Komponen menu navigasi pada sebuah website atau blog merupakan bagian yang sangat penting. Bagian ini bertujuan untuk memudahkan pengunjung saat berselancar pada blog atau web yang Kita miliki. Biasanya, menu navigasi web atau blog berisi beberapa link dengan masing-masing link mengarah ke halaman tertentu pada web atau blog yang dimiliki atau web lainnya.

 

Cara Membuat Menu Navigasi Blog

Seperti yang telah di tuliskan sebelumnya, komponen menu navigasi sangatlah penting. Selain memudahkan bagi pengunjung, hal ini sangat berguna untuk meningkatkan kualitas web atau blog yang Kita miliki di mata mesin pencarian (google, bing dan lain-sebagainya).

Saat ini, banyak sekali tutorial yang membahas tentang cara membuat menu navigasi untuk blog atau web yang dapat ditemukan melalui mesin pencari. Namun, disini Kami akan berbagi sedikit pengetahuan tentang bagaimana cara membuat menu tersebut yang sederhana menggunakan html, css dan javascript untuk diterapkan pada web/blog yang sedang dibangun.

 

Source Code untuk membuat menu navigasi sederhana menggunakan html, css dan javascript

 

Source HTML :

<header>
        <section class="jumbotron">
            <h1>Contoh Membuat Menu Navigasi</h1>
            <p>Contoh Menu Navigasi HTML, CSS dan Javascript</p>
        </section>
        <nav>
            <div class="navigasimenu">
              <a href="#profile">Profile</a>
              <a href="#artikelsaya">Blog</a>
              <a href="#home">Home</a>
              <a href="#artikelsaya">Donasi</a>
              <a class="dropbawah" href="javascript:void(0)" onclick="menuFunction()">Artikel</a>
              <div class="dropkonten show" id="dropbawahku">
                <div class="headermenu">
                  <h2>Artikel Campuran</h2>
                </div>
                <div class="flbaris">
                  <div class="flkolom">
                    <h3>Kategori 1</h3>
                    <a href="#link1">Link1</a>
                    <a href="#link2">Link2</a>
                    <a href="#link3">Link3</a>
                  </div>
                  <div class="flkolom">
                    <h3>Kategori 2</h3>
                    <a href="#link1">Link1</a>
                    <a href="#link2">Link2</a>
                    <a href="#link3">Link3</a>
                  </div>
                  <div class="flkolom">
                    <h3>Kategori 3</h3>
                    <a href="#link1">Link1</a>
                    <a href="#link2">Link2</a>
                    <a href="#link3">Link3</a>
                  </div>
                </div>
              </div>
            </div>
        </nav>
    </header>

Source Code HTML diatas baru kerangkanya saja untuk membuat menu dan belum terlihat menarik, agar terlihat lebih menarik di mata pengunjung tambahkan Source Code CSS nya. Berikut dibawah ini source code css untuk membuat tampilan menu navigasi agar terlihat lebih menarik.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    display: inline;
}

nav {
    position: sticky;
    top: 0;
}

.navigasimenu {
    width: 100%;
    background-color: #0f3057;
    overflow: hidden;
    text-align: center;
    padding: 10px 0px;
    font-family: "Quicksand", sans-serif;
    color: #b8cccb;
    font-size: 20px;
}

.navigasimenu a {
    text-decoration: none;
    color: #b8cccb;
    padding: 10px;
}

.navigasimenu a:hover {
    color: #246abd;
}

.headermenu {
    margin-top: 10px;
    padding: 20px;
    background-color: #00587a;
    font-size: 16px;
}

.show {
  display: none;
}

.dropkonten {
  overflow: auto;
}

.flbaris {
    display: flex;
    background-color: #008891;
    padding-top: 10px;
}

.flkolom {
    flex-grow: 1;
    flex-direction: column;
    display: flex;
}

.flkolom h3 {
    font-size: 22px;
}

.flkolom a {
    font-size: 16px;
}


@media screen and (max-width:480px) {
  .navigasimenu {
      font-size: 15px;
  }

  .headermenu {
      padding: 15px;
      font-size: 12px;
  }

  .flkolom h3 {
      font-size: 12px;
  }

  .flkolom a {
      font-size: 12px;
  }
}

Kini, setelah ditambahkan dengan source code css menu tersebut sedikit terlihat lebih menarik. Namun, tanpa javascript, menu tersebut tidak akan berfungsi dengan baik. Agar menu dropdown dapat berfungsi, buatlah sebuah file javascript dengan isi source code seperti dibawah ini dan simpan dengan nama file yang diinginkan di akhiri dengan ekstensi ".js" tanpa tanda petik dua :

function menuFunction() {
  document.getElementById("dropbawahku").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbawah')) {
    let dropdowns = document.getElementsByClassName("dropkonten");
    let i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('active')) {
        openDropdown.classList.remove('active');
      }
    }
  }
}

Sampai dengan source code Javascript di atas, jangan lupa untuk menyertakan file javascript tersebut pada halaman html. Untuk penampakkan menu navigasi kurang lebih seperti dibawah ini :

penampakkan menu navigasi responsive

Pada gambar A di atas merupakan penampakkan untuk menu yang ditampilkan pada layar desktop, sedangkan untuk gambar B ditampilkan dengan device smartphone. Menu tersebut sudah responsive.

Semoga melalui tulisan ini dapat dijadikan manfaat bagi pembaca, khususnya yang sedang belajar membuat web atau blog.