jallanpintas - JavaScript merupakan salah satu bahasa pemrograman yang sangat banyak digunakan dalam kurun waktu 2 puluh tahun lebih. Apalagi JavaScript juga diketahui sebagai salah satu dari 3 bahasa pemrograman utama untuk website pengembang:
- HTML: Membolehkan Kalian buat meningkatkan konten ke halaman website.
- CSS: Menentukan layout, gaya, dan keselarasan halaman web. Menyempurnakan tampilan dan sistem halaman website.
- JavaScript bisa dipelajari dengan cepat dan gampang dan digunakan
buat bermacam tujuan, mulai dari tingkatkan fungsionalitas web sampai mengaktifkan game( permainan) serta aplikasi berbasis website. Tidak hanya itu, ada ribuan template serta aplikasi JavaScript yang dapat Kamu pakai secara free serta seluruhnya ini berkat sebagian web, semacam Github.
Pemakaian javascript memanglah kerap ditemukan dalam pembuatan menu navigasi blog/ website supaya bisa berjalan sebagaimana mestinya. Tetapi bila di web kamu telah sangat banyak memakai javascript, akumulasi javascript buat menu navigasi pastinya bakal membuat loading web jadi terus menjadi berat sehingga perihal ini mesti dipikirkan lagi secara efisien.
Alternatifnya, nyatanya membuat menu navigasi tidak wajib selalu memakai javascript untuk membuatnya berjalan sesuai peranannya. Semacam yang bakal aku bagikan pada artikel kali ini, cuma memakai campuran kode html serta CSS murni, kamu juga bisa membuat menu navigasi keren serta fungsional buat mempermudah pengunjung disaat menjelajahi isi konten dalam web kamu.
Menu navigasi ini pula responsive alias tetap oke disaat diakses via mobile ataupun tablet. Serta kerennya lagi, menu navigasi ini pula menunjang fitur dropdown sehingga kamu bisa meningkatkan ub- sub menu baru cocok jenis di web kamu. Sebab tanpa menyertakan javascript, menu navigasi ini juga ringan sehingga tidak memberatkan loading. Amati tampilan screenshotnya berikut ini:
Gimana metode buatnya?. Lumayan gampang, silahkan simak langkah- langkah berikut ini
Bila tadinya telah terpasang menu navigasi di web kamu, silahkan terlebih dahulu hapus kode yang terdapat, baik kode html, javascript, ataupun CSSnya buat mengubahnya dengan menu navigasi ini. Bila sudah, silahkan ikuti metode pemasangannya di bawah ini.
1. Buka account blogger kamu.
2. Pilih thema dan klik edit html.
3. Buat pemasangan CSSnya, cari kode
]]
</ b: skin
ataupun</ 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 ialah tinggal memasang html menu navigasinya. Silahkan cari kode</ header
serta 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><ul>
Penjelasan:
Ubah nama- nama menu serta link- link Url di atas dengan nama menu serta link Url di web kamu.
Jumlah menu silahkan kamu sesuaikan, dapat kamu tambahkan ataupun mengurangi cocok kebutuhan.
5. Silahkan simpan kembali template serta kamu dapat amati hasilnya.
Demikianlah Metode Membuat Menu Navigasi Dropdown Keren Responsive Ringan Tanpa Javascript. Mudah- mudahan berguna.