APA YANG DAPAT KITA LAKUKAN TANPA JAVASCRIPT?

November 13, 2019 2 Komentar

Ilustrasi menu dropdown blogger

Javascript identik dengan "action" kadang untuk membuat suatu elemen di dalam template menjadi responsif, kita harus menanamkan script, yakni JavaScript. Template tampak hidup dan indah, tapi...berat! Kebanyakan Template-template HTML modern memiliki ciri ciri:

Kompatibel dengan HTML5.
Kompatibel dengan CSS3
Lebih banyak CSS
Hanya menggunakan sedikit JavaScript

Tentu saja penggunaan JavaScript tidak bisa dihindarkan, ia masih berkembang dan tidak menutup kemungkinan akan menjadi sebuah bahasa yang dinamis dan ringan di masa depan, tentu saja jika ia masih hidup sampai nanti. Namun jika kita hanya ingin menggunakan CSS? Inilah yang dapat kita lakukan.

2. Membuat menu dropdown murni CSS.

Perhatikan tombol berikut dan coba sentuh:

SENTUH TOMBOL DROPDOWN WARNA MERAH DIBAWAH INI.

Kemudian perhatikan kode CSS pembuatannya berikut, dibawah ini:

<style>
.dropbtn {
background-color: #ff0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<p>SENTUH TOMBOL DROPDOWN DIBAWAH INI.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

2. BAGAIMANA JIKA DENGAN JAVASCRIPT?
Namun jika kalian ingin menampilkan menu dropdown dengan cara di "klik" terlebih dahulu, maka mau tidak mau kalian harus menanamkan kode JavaScript ke dalamnya. Contoh tombol berikut harus di klik terlebih dahulu:

SENTUH TOMBOL DROPDOWN WARNA MERAH DI BAWAH INI.

Perhatikan perbedaan kode terakhirnya yang saya sorot kuning:

<style>
.dropbtn {
background-color: #FF0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<p>SENTUH TOMBOL DROPDOWN WARNA MERAH DI BAWAH INI.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>function myFunction() {document.getElementById("myDropdown").classList.toggle("show");}window.onclick = function(event) {if (!event.target.matches('.dropbtn')) {var dropdowns = document.getElementsByClassName("dropdown-content");var i;for (i = 0; i < dropdowns.length; i++) {var openDropdown = dropdowns[i];if (openDropdown.classList.contains('show')) {openDropdown.classList.remove('show');}}}}</script>

Jadi sekarang kalian mengerti perbedaannya: Pada bagian elemen yang murni dibuat dengan CSS untuk menampilkan menu cukup dengan disentuh saja. Sedangkan pada bagian yang di tambahkan dengan JavaScript, kita menambahkan "action" yakni harus di klik terlebih dahulu untuk menampilkan menu dropdown.

2 Komentar untuk "APA YANG DAPAT KITA LAKUKAN TANPA JAVASCRIPT?"

Einid ShandyNovember 13, 2019
Kak, boleh kasih contoh hasilnya nggak sih Kak, aku penasaran menu dropdown itu kayak gimana?

Btw, aku suka sama templatenya, cute. Wkwkwk... Aku nggak bisa mengalihkan pandanganku dari templatenya.
BalasHapus
Balasan