Cara Membuat Menu Navigasi Responsive di Blog dengan Javascript dan CSS

Cara Membuat Menu Navigasi Responsive - Navigasi menu berperan penting didalam sebuah blog atau website. Tombol yang satu ini menjadikan isi blog lebih mudah ditelusuri oleh pengguna. Membuat menu responsive (mobile friendly) tentunya sangat diperlukan supaya blog terlihat rapi dan mudah diakses oleh pengguna, baik ketika menggunakan layar dekstop maupun mobile.

Coba kamu bayangkan jika navigasi menu blog kamu rapi ketika tampil di layar dekstop, tapi berantakan ketika tampil di layar mobile. Tentu sangat tidak nyaman dipandang oleh pengunjung bukan? Ya meskipun kamu masih bisa menggunakan template standar dari blogspot untuk tampilan mobile, namun saya rasa masih kurang bagus dipandang.

(Baca juga : Cara Mengatasi Error Image Missing Titles dan Descriptions Agar SEO Meningkat)

Cara Membuat Navigasi Menu Responsive

Disini kita akan menggunakan pure javascript untuk membuat navigasi menu. Sedangkan responsive menu akan dibuat menggunakan CSS. Oke, langsung saja ikuti langkah-langkah berikut ini :

1. Taruh kode javascript ini sebelum </head>  :

<script type='text/javascript'>
function MenuFunction() {
    var x = document.getElementById(&quot;NavigasiMenu&quot;);
    if (x.className == &quot;main-menu&quot;) {
        x.className += &quot; responsive&quot;;
    } else {
        x.className = &quot;main-menu&quot;;
    }
}
</script>

2. Jika template kalian masih standar, taruh kode berikut tepat dibawah </header> . Tapi kalau template kalian sudah custom maka tinggal ganti bagian navigasi menu yang lama dengan kode dibawah ini :

<nav class='main-menu' id='NavigasiMenu'><a classn' href='javascript:void(0);' onclick='MenuFunction()'><i aria-hidden='true' class='fa fa-bars'/> Menu</a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-home'/>
</span></a></li>
<li><a href=#>Menu 1</a></li>
<li><a href=#>Menu 2</a></li>
<li><a href=#>Menu 3</a></li>
</ul>
</nav>

Catatan : Tanda '#' dapat kalian ubah dengan link kategori atau internal link blog kalian. Dan pada bagian yang diberi warna merah dapat kalian ganti sesuai keinginan kalian.

3. Taruh kode CSS berikut sebelum </b:skin> :

/* Main Menu */
nav.main-menu ul{overflow: hidden;padding:0; margin:0 ; background: #0288D1;padding: 8px 0px;}
nav.main-menu li{list-style-type:none;display:inline; } 
nav.main-menu li a{color:#fff; text-decoration: none; transition: 0.3s;padding: 10px 12px; } 
nav.main-menu a.icon {display: none;}
nav.main-menu li a:hover{background-color: #0172af;}

4. Buat CSS responsive seperti berikut sebelum </head> :

<stlye type='text/css'> 
@media screen and (max-width:768px){
.main-nav{display:none; }
nav.main-menu{padding: 0px;}
nav.main-menu li {display:none;}  
nav.main-menu ul{overflow: hidden;padding:0; margin:0;}
nav.main-menu a.icon {background: transparent;color:#0288D1; font-size:20px;display:block; text-align:left; padding:10px;}
nav.main-menu a.icon:hover{color:#0172af; }
nav.main-menu.responsive {position:relative;}
nav.main-menu.responsive li { display:block; }
nav.main-menu.responsive li a{;display:block; text-align:left; background: #6C7A89; }
nav.main-menu.responsive li a:hover{background: #555e68}
nav.main-menu.responsive a.icon{ text-align:left; background:transparent; color:#555e68 } }
</style>

Navigasi menu yang responsive telah dibuat, coba buka blog kamu menggunakan mode desktop dan juga menggunakan mode mobile. Atau kamu bisa buka sampleblogcahti.blogspot.com untuk melihat hasilnya pada template standar blogspot.

Sekian tutorial tentang cara membuat menu navigasi responsive di blog dengan Javascript dan CSS. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Artikel Terkait

Cara Membuat Menu Navigasi Responsive di Blog dengan Javascript dan CSS

4/ 5

Oleh Blogcahti