Cara Menciptakan Tampilan Navigasi Sajian Website Responsive
Kata "Responsive" dalam sebuah desain website biasanya dipahami atau diartikan sebagai sebuah desain website yang mendukung tampilan layar kecil, maksudnya ketika layar browser/layar pengguna yang mengakses website kita mempunyai ukuran yang kecil, tampilan website jadi tidak acak - acakan atau tampilan website akan mengikuti layar pengguna.
Disini Saya ingin mempersembahkan referensi sederhana ihwal bagaimana membuat sebuah sajian navigasi yang responsive. Berikut yaitu Teknik Membuat Navigasi Menu Website Responsive
1. Buatlah sebuah file CSS terlebih lampau untuk style menunya.
body {margin:0;} / * Menghapus margin dan padding dari daftar , dan menambahkan warna latar belakang hijau * / ul.menuatas { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #137409; } /*Maksudnya membuat sajian berada diatas berdampingan*/ ul.menuatas li {float: left;} /*Membuat Style link untuk bab sajian */ ul.menuatas li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /*Membuat Style link untuk bab background ketika hover */ ul.menuatas li a:hover {background-color: #ff0000;} /*menyembunyikan link dalam daftar pada ketika laya kecil*/ ul.menuatas li.icon {display: none;} 2. Selanjutnya kita buat Style CSS pada ketika browser/layar mengecil.
/ * Bila Ukuran layar kurang dari 680 pixel , maka sembunyikan sajian , kecuali untuk yang Home . kemudian menampilkan sajian untuk membuka dan menutup class menuatas( li.icon ) * / @media screen and (max-width:680px) { ul.menuatas li:not(:first-child) {display: none;} ul.menuatas li.icon { float: right; display: inline-block; } } / * class responsive dimenambahkan ke "menuatas" dengan JavaScript sehingga ketika pengguna klik icon . class ini akan membuat sajian atas terlihat baik pada layar kecil * / @media screen and (max-width:680px) { ul.menuatas.responsive {position: relative;} ul.menuatas.responsive li.icon { position: absolute; right: 0; top: 0; } ul.menuatas.responsive li { float: none; display: inline; } ul.menuatas.responsive li a { display: block; text-align: left; } } 3. Tahap selanjutnya kita buat fungsi Javascript untuk menghapus class responsive untuk sajian atas pada ketika pengguna mengklik icon
<script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "menuatas") { x.className += " responsive"; } else { x.className = "menuatas"; } } </script>4. Terakhir kita buat menunya kemudian panggil fungsi javascript yang kita buat sebelumnya
ul class="menuatas" id="myTopnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">Informasi</a></li> <li><a href="#contact">Kontak</a></li> <li><a href="#about">Tentang Saya</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction ()">☰</a> </li> </ul> <div style="padding-left:16px"> <h2>misal Menu Responsive</h2> <p>Perkecil jendela browser untuk melihat hasilnya</p> </div>Secara keseluruhan jikalau keempat script diatas digabung maka scriptnya nanti akan terlihat menyerupai dibawah ini
<!DOCTYPE html> <html> <head> <style> body {margin:0;} ul.menuatas { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #137409; } ul.menuatas li {float: left;} ul.menuatas li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.menuatas li a:hover {background-color: #ff0000;} ul.menuatas li.icon {display: none;} @media screen and (max-width:680px) { ul.menuatas li:not(:first-child) {display: none;} ul.menuatas li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.menuatas.responsive {position: relative;} ul.menuatas.responsive li.icon { position: absolute; right: 0; top: 0; } ul.menuatas.responsive li { float: none; display: inline; } ul.menuatas.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="menuatas" id="myTopnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">Informasi</a></li> <li><a href="#contact">Kontak</a></li> <li><a href="#about">Tentang Saya</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction ()">☰</a> </li> </ul> <div style="padding-left:16px"> <h2>misal Menu Responsive</h2> <p>Perkecil jendela browser untuk melihat hasilnya</p> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "menuatas") { x.className += " responsive"; } else { x.className = "menuatas"; } } </script> </body> </html> Bila script diatas di eksekusi di browser maka kurang lebih tampilannya akan terlihat menyerupai gambar dibawah ini.
| Tampilan layar penuh | Tampilan layar Responsive |
 |  |
Untuk lebih jelasnya Anda dapat mengcopy script yang sudah digabungkan diatas, kemudian menyimpan filenya dalam bentuk/format HTML
Post a Comment for "Cara Menciptakan Tampilan Navigasi Sajian Website Responsive"