Beranda
css
dropdown

APA YANG DAPAT KITA LAKUKAN TANPA JAVASCRIPT?

Tanpa JavaScript, apa yang dapat dilakukan oleh CSS?
Ilustrasi menu dropdown blogger
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.
Link 1 Link 2 Link 3

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.
Home About Contact

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.
warna warni jajanan owner, limawarna franchise, anissa page

2 komentar

  1. 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.
    1. Mbak Eunid, templat Ketika dunia melihatku juga cakep. Hanya butuh premium kok. Contoh sederhana diterapkan pada templat "SBBS anissa"

      Templat itu sebenarnya templat contempo bawaan blogger yang telah di rombak sehingga memiliki sidebar dan navigasi fixed plus tombol pencarian.

      Aku sendiri sebenarnya sedang belajar bahasa WEB secara otodidak bersama admin editblogtema...itupun di sela sela waktu sepulang sekolah.. 😊
Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © ‧ EDITBLOGTEMA. Developed by Jago Desain