Cara Membuat Menu Navigasi Responsif di Blog

Sudah lama sepertinya tidak memposting sesuatu yang berhubung dengan blog hehe. Pada postingan kali ini kita akan membahas tentang bagaimana cara membuat menu navigasi di blog, menu navigasi yang akan dibahas di sini adalah menu navigasi yang responsive yang artinya ukuran menu navigasi tersebut dapat menyesuaikan ukurannya dengan lebar browser. Berikut kita bahas.

Cara Membuat Menu Navigasi di Blog

Disini kita akan membuat 2 macam menu navigasi, yang satu ialah menu navigasi yang simple.

Menu navigasi yang simple ini bagus untuk menu navigasi yang berada di atas header blog, yang isinya tentang halaman about, disclaimer, dll.

Dan yang kedua adalah menu navigasi drop down.

Menu navigasi drop down ini bagus untuk diisi tentang kategori-kategori yang dibahas pada blog kita, misalnya tentang komputer, android, dan lain-lain.

Nah pada postingan kali ini kita hanya membuat menu navigasi yang simple saja, yang cocok untuk ditempatkan di atas header.

Untuk membuat menu navigasi drop down, saya akan membahasnya di postingan selanjutnya, karena jika disatukan tutorial ini akan menjadi panjang sekali.

Cara Memasang Menu Navigasi di Blog

Pergi ke blogger > template > edit html.

Cari kode <header id="headerblog" atau <div id="header-wrapper" atau jika tidak ada bisa mencari kode yang sejenis seperti kode tersebut yang menandakan bagian header dari suatu template blog.

Jika sudah ketemu, salin dan tempel kode berikut di atasnya.

<nav>
    <input type="checkbox">
    <label>&equiv;</label>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Lalu cari kode <style> atau <b:skin> atau bagian template yang isinya sebagai css.

Salin lalu tempel kode dibawah ini di dalamnya.

* {
  margin:0;
  padding:0;
}
/*horizontal navigation: define the navigation font and basic background */
nav {
  background-color:white;
  font:normal bold 11px Arial,Sans-Serif;
  color:gray;
  height:30px;
}
/* lists: remove the nested list margin, padding & bullets */
nav ul,
nav li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
/* navigation height */
nav ul {height:30px}
/* inline layout menu */
nav li {
  float:left;
  display:inline;
}
/* the anchor */
nav a {
  display:block;
  line-height:30px;
  padding:0 14px;
  text-decoration:none;
  color:black;
}
/* hover state menu */
nav a:hover {background-color:#39f}
/* checkbox element: for mobile navigation button */
nav input {
  display:none;
  margin:0 0;
  padding:0 0;
  width:30px;
  height:30px;
  opacity:0;
  cursor:pointer;
}
/* for visual purpose */
nav label {
  display:none;
  font-size:200%;
  width:30px;
  height:30px;
  /* center vertically and horizontally */
  line-height:30px;
  text-align:center;
}
/* MOBILE NAVIGATION */
@media (max-width:767px) {
  nav {
    /* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
    position:relative;
  }
  nav ul {
    background-color:white;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    height:auto;
    display:none; /* hide the menu */
  }
  /* set the menu as a block list item */
  nav li {
    display:block;
    float:none;
    width:auto;
  }
  /* now show the checkbox and label element in mobile device */
  nav input,
  nav label {
    position:absolute;
    top:0;
    right:0;
    display:block; /* show the menu icon */
  }
  
  nav input {z-index:4} /* always place the checkbox above the label element */
  /* highlight the label element and show the menu if the checkbox is checked */
  nav input:checked + label {color:black}
  nav input:checked ~ ul {display:block}
}
/*original script from dte.web.id, thx to him*/

Selanjutnya cari bagian </body> atau scroll ke bawah hingga akhir, nanti pasti akan ketemu kode tersebut.

Salin dan tempel kode berikut di atasnya.

<script type="text/javascript">

window.onresize = function() {
    document.getElementsByTagName('h1')[0].style.display = "none";
};

</script>

Dan hasilnya akan menjadi seperti ini jika di layar lebar.

Dan ini jika di layar yang sempit.

Demo

Untuk menu navigasi drop down akan dibahas di postingan selanjutnya.

Mungkin sekian dari postingan kali ini, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.

Silakan untuk berkomentar.