Ini adalah tentang bagaimana cara kita menangani masalah-masalah umum yang akan timbul pada situs-situs yang membutuhkan pengaktifan JavaScript. Katakanlah kita memiliki sebuah menu navigasi bertingkat dengan efek JavaScript. Namun biasanya syarat yang harus kita penuhi agar efek animasi berjalan dengan baik adalah dengan menghilangkan setiap item yang akan ditampilkan/disembunyikan dengan efek JavaScript:
nav ul ul {
display:none;
}Anda bisa mempelajari maksud dari kode di atas pada artikel ini.
Tidak masalah (bahkan sebuah keharusan) jika kita menghilangkan elemen dengan deklarasi display:none karena JavaScript selalu bisa menampilkannya dengan efek yang baik. Tapi bagaimana jika JavaScript dinonaktifkan?
Kita tidak membicarakan tentang mengapa mereka melakukan itu, tapi katakanlah jika itu dilakukan, apa yang akan terjadi?
Yang terjadi adalah sub-sub menu navigasi yang seharusnya muncul saat induk menu disorot akan mati karena tidak ada mesin yang bisa membuat mereka muncul kecuali JavaScript. Dan sekarang JavaScript telah dinonaktifkan.
Hal yang biasanya kita lakukan adalah menuliskan sebuah pesan yang akan muncul hanya jika JavaScript dinonaktifkan. Itu bisa dilakukan dengan <noscript>:
<noscript>
<div id="js-message">Anda harus mengaktifkan JavaScript untuk melihat halaman ini!</div>
</noscript>Dan mungkin sedikit kode CSS untuk membuatnya tampak sebagai tabir yang akan menutupi seluruh layar:
#js-message {
position:fixed !important;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
z-index:999;
background-color:black;
padding-top:120px;
font:bold 100px Arial,Sans-Serif;
color:red;
text-align:center;
}Tapi Saya rasa cara itu tidak sepenuhnya keren jika setiap kali kita menonaktifkan JavaScript, sebuah tabir/overlay besar akan muncul menutupi seluruh layar. Kita harap kita bisa memberikan fallback yang baik tanpa harus menghilangkan apa yang seharusnya bisa kita lihat. Kita mencoba untuk melihat kepada CSS.
Kita harap, jika JavaScript dinonaktifkan, maka CSS bisa menggantikannya untuk menampilkan/menyembunyikan elemen dengan baik, meski dengan efek yang sangat terbatas.
Berikut ini adalah sebuah kerangka menu navigasi bertingkat sederhana. Terdiri dari empat menu utama dan dua level submenu:
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul class="fallback">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a>
<ul class="fallback">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#">Jurnal</a></li>
<li><a href="#">Komentar</a></li>
</ul>
</nav>Seperti yang Anda lihat bahwa Saya menambahkan kelas/class fallback pada masing-masing anak menu (tidak harus bernama fallback. Itu hanya contoh).
Kelas tersebut akan kita gunakan pada kode CSS hanya jika JavaScript dinonaktifkan. Dalam artian: Kita akan menghilangkan kelas tersebut dengan JavaScript saat JavaScript diakifkan. Dan ini bisa dilakukan dengan cara yang sangat sederhana:
$('nav ul.fallback').removeClass('fallback');Pada dasarnya inilah yang akan kita lakukan: Saat JavaScript dinonaktifkan, kita harap kita bisa mengakses elemen yang menghilang untuk ditampilkan dan disembunyikan dengan CSS tanpa harus mengganggu animasi JavaScript saat JavaScript diaktifkan. Itu bisa dilakukan dengan cara bergiliran. Saat JavaScript diaktifkan, kita harap kita bisa memberikan efek animasi yang baik saat sub-sub menu ditampilkan dan disembunyikan:
$('nav li').hover(function() {
$(this).children('ul').sliedDown('fast');
}, function() {
$(this).children('ul').slideUp('fast');
});Namun saat JavaScript dinonaktifkan, kita tetap bisa memastikan bahwa sub-sub menu tersebut bisa tampil dan hilang dengan baik:
nav li ul {
display:none;
}
nav li:hover > ul.fallback {
display:block;
}Gambaran Selengkapnya
Ini adalah gambaran selengkapnya. Saat JavaScript diaktifkan, maka kita akan menghilangkan kelas fallback pada semua elemen <ul>:
$('nav ul.fallback').removeClass('fallback');Dengan begitu kode CSS pada bagian ini tidak akan bisa menampilkan dan menyembunyikan sub-sub menu, karena kelas fallback pada elemen submenu sudah menghilang:
nav li ul {
/* ... */
display:none;
}
nav li:hover > ul.fallback {
display:block; /* Ini sudah tidak berlaku lagi, karena class="fallback" telah dihilangkan */
}Namun itu tidak mengapa, karena saat ini JavaScript sedang diaktifkan, maka efek animasi JavaScript bisa kita dijalankan:
$('nav li').hover(function() {
$(this).children('ul').slideDown('fast');
}, function() {
$(this).children('ul').slideUp('fast');
});Dan saat JavaScript dinonaktifkan, maka fungsi-fungsi animasi dalam JavaScript tidak akan bekerja. Diutamakan pada bagian ini, sebagai perhatian utama kita:
$('nav ul.fallback').removeClass('fallback');Oleh karena itu kelas fallback akan tetap berada pada tempatnya. Sehingga kode CSS pada bagian ini akan bekerja:
nav li:hover > ul.fallback {
display:block;
}Coba Anda buka halaman ini kemudian perhatikan bahwa saat ini efek animasi .slideDown() dan .slideUp() masih bisa bekerja. Setelah itu nonaktifkan JavaScript pada peramban Anda dan segarkan halaman tersebut. Anda akan melihat bahwa sub-sub menu masih bisa ditampilkan dan disembunyikan meski dengan efek yang sangat terbatas:
Kode Selengkapnya
HTML
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Profil</a>
<ul class="fallback">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a>
<ul class="fallback">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#">Jurnal</a></li>
<li><a href="#">Komentar</a></li>
</ul>
</nav>CSS
nav {
font:bold 12px Arial,Sans-Serif;
background-color:black;
margin:0px 0px;
padding:0px 0px;
}
nav ul {
margin:0px 0px;
padding:0px 0px;
display:block;
position:relative;
height:30px;
}
nav li {
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
nav li a {
display:block;
margin:0px 0px;
padding:0px 14px;
color:white;
text-decoration:none;
line-height:30px;
height:30px;
}
nav a:hover {
background-color:#456;
}
nav ul ul {
width:120px;
height:auto;
position:absolute;
top:100%;
left:0px;
z-ndex:10;
background-color:black;
display:none;
}
nav ul ul li {
float:none;
display:block;
}
nav ul ul ul {
top:0px;
left:100%;
}
/* CSS Fallback */
nav li:hover > ul.fallback {
display:block;
}jQuery
$(function() {
// Singkirkan class "fallback" pada anak <ul>
// sehingga kode nav li:hover > ul.fallback {display:block;} tidak akan bekerja.
$('ul.fallback').removeClass('fallback');
// Lakukan seperti biasa mulai dari sini...
$('nav#nav li').hover(function() {
$(this).children('ul').slideDown('fast');
}, function() {
$(this).children('ul').slideUp('fast');
});
});Lainnya
Selain itu, beberapa elemen seperti panel juga lebih banyak mengutamakan .hide() atau .css('display', 'none') untuk menyembunyikannya dibandingkan dengan menuliskan display:none secara langsung dengan CSS. Ini akan membuat panel tertutup saat JavaScript diaktifkan dan bisa terbuka saat sebuah pemicu (misalnya tombol) diklik. Tapi saat JavaScript dinonaktifkan, tombol-tombol tersebut tidak lagi berfungsi untuk membuka/menutup panel, sementara panel yang tadinya tertutup kini akan tetap terbuka. Kelihatannya memang jelek, tapi setidaknya kita masih tetap bisa melihat isinya.
