Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript

Santos el Salam

13 Agustus 2020

Penggunaan javascript memang sering dijumpai dalam pembuatan menu navigasi blog/website agar dapat berjalan sebagaimana mestinya. Namun jika di blog anda sudah terlalu banyak menggunakan javascript, penambahan javascript untuk menu navigasi tentunya akan membuat loading blog menjadi semakin berat sehingga hal ini mesti dipikirkan lagi secara efektif. 

Alternatifnya, ternyata membuat menu navigasi tidak harus selalu menggunakan javascript untuk membuatnya berjalan sesuai fungsinya. Seperti yang akan saya bagikan pada postingan kali ini, hanya menggunakan kombinasi kode html dan CSS murni, anda juga dapat membuat menu navigasi keren dan fungsional untuk memudahkan pengunjung saat menjelajah isi konten dalam blog anda. 

Menu navigasi ini juga responsive alias tetap oke saat diakses via mobile maupun tablet. Dan kerennya lagi, menu navigasi ini juga mendukung fitur dropdown sehingga anda dapat menambahkan sub-sub menu baru sesuai kategori di blog anda. Karena tanpa menyertakan javascript, menu navigasi ini juga ringan sehingga tidak memberatkan loading. Lihat tampilan screenshotnya berikut ini:

view web

view mobile

Bagaimana cara membuatnya?. Cukup mudah, silahkan ikuti langkah-langkah berikut ini. 

Cara Membuat Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript

Jika sebelumnya sudah terpasang menu navigasi di blog anda, silahkan terlebih dulu hapus kode yang ada, baik kode html, javascript, maupun CSSnya untuk menggantinya dengan menu navigasi ini. Jika sudah, silahkan simak cara pemasangannya di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih thema dan klik edit html. 

3. Untuk pemasangan CSSnya, cari kode  ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

#menu {background:#393939;color:#eee;height: 40px;width:100%;max-width:960px;margin:0 auto;} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:40px;border-bottom:4px solid #080} #menu li{float:left;display:inline;position:relative;font-family:'Oswald',Arial;font-weight:500;font-size:15px;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;text-transform:uppercase} #menu li:first-child{border-left: none} #menu a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#eee;}#menu li:hover > a,#menu li a:hover{background:#0a0} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:40px;opacity:0;cursor:pointer} #menu label{font:bold 30px font-family:'Oswald',Arial;font-weight:500;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:40px} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#393939;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px font-family:'Oswald',Arial;font-weight:500;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.home {background-color:#0a0;} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#E73138;}

@media screen and (max-width: 768px){ #menu{background:#000;position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;text-align:left;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block}}

4. Selanjutnya yaitu tinggal memasang html menu navigasinya. Silahkan cari kode </header> dan letakkan kode berikut ini di bawahnya. 

<nav id='menu'> <input type='checkbox'/> <label><svg style='width:30px;height:30px' viewbox='0 -3 24 24'> <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='currentColor'/></svg><span style='margin-top:1px;font-size:17px'>Navigasi</span></label> <ul> <li><a class='home' href='https://namabloganda.blogspot.com'><span style='margin:3px;'>Home</span></a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu1'>Menu1</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu2'>Menu2</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu3'>Menu3</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Menu4'>Menu4</a></li> <li><a class='prett' href='#'>Dropdown1</a> <ul class='menus'> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu1'>Sub Menu1</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu2'>Sub Menu2</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu3'>Sub Menu3</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu4'>Sub Menu4</a></li> </ul> <li><a class='prett' href='#'>Dropdown2</a> <ul class='menus'> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu5'>Sub Menu5</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu6'>Sub Menu6</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu7'>Sub Menu7</a></li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' title='Sub Menu8'>Sub Menu8</a></li> </ul> </li> <li><a href='https://namabloganda.blogspot.com/search/xxxxxxxxxxx' target='_blank' title='Menu5'>Menu5</a></li> </li></ul> </nav>

Keterangan:

• Ganti nama-nama menu dan link-link Url di atas dengan nama menu dan link Url di blog anda. 
• Jumlah menu silahkan anda sesuaikan, bisa anda tambahkan atau kurangi sesuai kebutuhan. 

7. Silahkan simpan kembali template dan anda bisa lihat hasilnya. 

Demikianlah Cara Membuat Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript. Semoga bermanfaat. 

Labels: Blogging

Thanks for reading Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript. Please share...!

Facebook

Twitter