Membuat Navbar Responsive + Penjelasan
بسم الله الرحمن الرحيم
Pada kesempatan kali ini saya akan membagikan tutorial simple yang mungkin bisa bermanfaat bagi agan-agan semua :3. Yaitu cara membuat Navbar atau Navigation Bar, bukan sembarang Navbar tentunya, kali ini kita akan membuat navbar yang responsive. Responsive berarti suatu elemen atau bagian dari tampilan suatu blog atau website dapat menyesuaikan ukuran sesuai gadget yang digunakan penngguna.
Yak langsung saja check this out :v
Langkah Pertama
Tulis kode seperti contoh dibawah ini, kalo males tinggal copas aja :v, tapi kalo bisa diketik ya biar terbiasa ngoding.
<div class="topnav"
id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);"
class="icon" onclick="myFunction()">☰</a>
</div>
Langkah Kedua
Menambahkan css agar tampilan navbar makin cakep dan tamvan kaya gue :v *plak.
.topnav {
background-color: #333;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;}
.topnav a:hover {
background-color: #ddd;
color: black;}
.topnav .icon {
display: none;}
background-color: #333;
overflow: hidden;}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;}
.topnav a:hover {
background-color: #ddd;
color: black;}
.topnav .icon {
display: none;}
Fungsi Kode Css diatas akan saya jelaskan sesuai pengetahuan saya kalo ada yang keliru ya maafkan kebodohan saya T_T
.topnav { #kode css di kelas topnav
background-color: #333; #warna background navbar
overflow: hidden;} #sebenarnya kode ini untuk menampilkan scroll jika "hidden" diganti "scroll".
background-color: #333; #warna background navbar
overflow: hidden;} #sebenarnya kode ini untuk menampilkan scroll jika "hidden" diganti "scroll".
.topnav a { #kode css di kelas topnav elemen a (link)
float: left; #biar tiap elemen di navbar mengapung/ berada di sisi kiri
display: block; #menampilakan tiap elemen pada navbar sebagai block elemen.
color: #f2f2f2; #warna pada text elemen navbar, bisa diganti sesuai selera
text-align: center; #biar text rata tengah
padding: 14px 16px; #menambahkan space di antara text elemen navabar, biar text-nya nggak terlalu mepet banget
text-decoration: none ;#menghapus text decoration, contoh text decoration yaitu underline dan warna default.
font-size: 17px;} #Ukuran Font
float: left; #biar tiap elemen di navbar mengapung/ berada di sisi kiri
display: block; #menampilakan tiap elemen pada navbar sebagai block elemen.
color: #f2f2f2; #warna pada text elemen navbar, bisa diganti sesuai selera
text-align: center; #biar text rata tengah
padding: 14px 16px; #menambahkan space di antara text elemen navabar, biar text-nya nggak terlalu mepet banget
text-decoration: none ;#menghapus text decoration, contoh text decoration yaitu underline dan warna default.
font-size: 17px;} #Ukuran Font
.topnav a:hover { #kode css kode css di kelas topnav elemen a (link ) saat link di pilih atau di klik
background-color: #ddd; #Warna Background akan berubah menjadi ini saat link di klik
color: black;} #warna text saat link di navbar di klik
background-color: #ddd; #Warna Background akan berubah menjadi ini saat link di klik
color: black;} #warna text saat link di navbar di klik
.topnav .icon {
display: none;} #tidak menampilkan icon, btw icon ini akan muncul saat web di akses melalui gadget.
display: none;} #tidak menampilkan icon, btw icon ini akan muncul saat web di akses melalui gadget.
Langkah Ketiga
Menambahkan Css tambahan Css ini tidak akan bekerja saat web diakses melalui perangkat desktop melainkan akan berkerja melalui smartphone/ handphone.
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Penjelasan dari kode diatas
@media screen and (max-width: 600px) { #saat website diakses melalui gadget dengan lebar 600px, contoh : smartphone, jalankan css berikut
.topnav a:not(:first-child) {display: none;} #menghapus semua elemen / link dalam navbar kecuali "first child" atau elemen pertama.
.topnav a.icon { #css icon
float: right; #icon akan mengapung di sebelah kanan
display: block; #menampilkan icon sebagai elemen blok
}
code css di bawah ini akan muncul jika icon di klik dan menjalankan code javascript di bawah
.topnav.responsive {
position: relative; #mengubah posisi navbar menjadi relative
}
.topnav.responsive a.icon {
position: absolute; #mengubah posisi icon menjadi absolute
right: 0; #mengatur sisi kanan icon
top: 0; #mengatur sisi atas icon
}
.topnav.responsive a {
float: none; #mengubah link agar tidak mengapung di kanan/ kiri.
display: block; #mengubah elemen link menjadi block
text-align: left; #biar text rata tengah
}
}
Langkah terakhir
Menambahkan javascript untuk melengkapi kode diatas, kode javascript ini akan dijalankan bilamana icon di clik.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
Penjelasan dari kode javascript diatas
function myFunction() { #membuat fungsi javascript dengan nama "myFunction"
var x = document.getElementById("myTopnav"); #membuat variable x yang mengambil data elemen dari id myTopnav
if (x.className === "topnav") { #jika id myTopnav, memiliki kelas yang bernama topnav maka
x.className += " responsive"; #nama kelasnya akan di tambahi responsive
} else {
x.className = "topnav"; #jika tidak maka namanya tidak akan diubah /tetap
}
}
Sekian turorial yang panjang dari saya, (tadi katanya diawal simpel XD) rencananya saya buat simple tapi apa boleh buat malah jadi panjang begini. Semoga bermanfaat, jika ada kesulitan silahkan tulis di kolom komentar dan mari diskusikan bersama.
No comments:
Post a Comment