Ini yaitu perihal bagaimana cara kita menangani masalah-masalah umum yang akan timbul pada situs-situs yang membutuhkan pengaktifan JavaScript. Katakanlah kita mempunyai sebuah sajian navigasi bertingkat dengan dampak JavaScript. Namun biasanya syarat yang harus kita penuhi supaya dampak animasi berjalan dengan baik yaitu dengan menghilangkan setiap item yang akan ditampilkan/disembunyikan dengan dampak JavaScript:
nav ul ul { display:none; }Anda dapat mempelajari maksud dari arahan di atas pada artikel ini.
Tidak persoalan (bahkan sebuah keharusan) kalau kita menghilangkan elemen dengan deklarasi display:none alasannya JavaScript selalu dapat menampilkannya dengan dampak yang baik. Tapi bagaimana kalau JavaScript dinonaktifkan?
Kita tidak membicarakan perihal mengapa mereka melaksanakan itu, tapi katakanlah kalau itu dilakukan, apa yang akan terjadi?
Yang terjadi yaitu sub-sub sajian navigasi yang seharusnya muncul ketika induk sajian disorot akan mati alasannya tidak ada mesin yang dapat menciptakan mereka muncul kecuali JavaScript. Dan kini JavaScript telah dinonaktifkan.
Hal yang biasanya kita lakukan yaitu menuliskan sebuah pesan yang akan muncul hanya kalau JavaScript dinonaktifkan. Itu dapat dilakukan dengan <noscript>:
<noscript> <div id="js-message">Anda harus mengaktifkan JavaScript untuk melihat halaman ini!</div> </noscript>Dan mungkin sedikit arahan 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 kalau setiap kali kita menonaktifkan JavaScript, sebuah tabir/overlay besar akan muncul menutupi seluruh layar. Kita harap kita dapat memperlihatkan fallback yang baik tanpa harus menghilangkan apa yang seharusnya dapat kita lihat. Kita mencoba untuk melihat kepada CSS.
Kita harap, kalau JavaScript dinonaktifkan, maka CSS dapat menggantikannya untuk menampilkan/menyembunyikan elemen dengan baik, meski dengan dampak yang sangat terbatas.
Berikut ini yaitu sebuah kerangka sajian navigasi bertingkat sederhana. Terdiri dari empat sajian 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 sajian (tidak harus berjulukan fallback. Itu hanya contoh).
Kelas tersebut akan kita gunakan pada arahan CSS hanya kalau JavaScript dinonaktifkan. Dalam artian: Kita akan menghilangkan kelas tersebut dengan JavaScript ketika JavaScript diakifkan. Dan ini dapat dilakukan dengan cara yang sangat sederhana:
$('nav ul.fallback').removeClass('fallback');Pada dasarnya inilah yang akan kita lakukan: Saat JavaScript dinonaktifkan, kita harap kita dapat mengakses elemen yang menghilang untuk ditampilkan dan disembunyikan dengan CSS tanpa harus mengganggu animasi JavaScript ketika JavaScript diaktifkan. Itu dapat dilakukan dengan cara bergiliran. Saat JavaScript diaktifkan, kita harap kita dapat memperlihatkan dampak animasi yang baik ketika sub-sub sajian ditampilkan dan disembunyikan:
$('nav li').hover(function() { $(this).children('ul').sliedDown('fast'); }, function() { $(this).children('ul').slideUp('fast'); });Namun ketika JavaScript dinonaktifkan, kita tetap dapat memastikan bahwa sub-sub sajian tersebut dapat tampil dan hilang dengan baik:
nav li ul { display:none; } nav li:hover > ul.fallback { display:block; }Gambaran Selengkapnya
Ini yaitu citra selengkapnya. Saat JavaScript diaktifkan, maka kita akan menghilangkan kelas fallback pada semua elemen <ul>:
$('nav ul.fallback').removeClass('fallback');Dengan begitu arahan CSS pada bab ini tidak akan dapat menampilkan dan menyembunyikan sub-sub menu, alasannya kelas fallback pada elemen submenu sudah menghilang:
nav li ul { /* ... */ display:none; } nav li:hover > ul.fallback { display:block; /* Ini sudah tidak berlaku lagi, alasannya class="fallback" telah dihilangkan */ }Namun itu tidak mengapa, alasannya ketika ini JavaScript sedang diaktifkan, maka dampak animasi JavaScript dapat kita dijalankan:
$('nav li').hover(function() { $(this).children('ul').slideDown('fast'); }, function() { $(this).children('ul').slideUp('fast'); });Dan ketika JavaScript dinonaktifkan, maka fungsi-fungsi animasi dalam JavaScript tidak akan bekerja. Diutamakan pada bab ini, sebagai perhatian utama kita:
$('nav ul.fallback').removeClass('fallback');Oleh alasannya itu kelas fallback akan tetap berada pada tempatnya. Sehingga arahan CSS pada bab ini akan bekerja:
nav li:hover > ul.fallback { display:block; }Coba Anda buka halaman ini kemudian perhatikan bahwa ketika ini dampak animasi .slideDown() dan .slideUp() masih dapat bekerja. Setelah itu nonaktifkan JavaScript pada peramban Anda dan segarkan halaman tersebut. Anda akan melihat bahwa sub-sub sajian masih dapat ditampilkan dan disembunyikan meski dengan dampak 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 arahan nav li:hover > ul.fallback {display:block;} tidak akan bekerja. $('ul.fallback').removeClass('fallback'); // Lakukan ibarat 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 ibarat panel juga lebih banyak mengutamakan .hide() atau .css('display', 'none') untuk menyembunyikannya dibandingkan dengan menuliskan display:none secara pribadi dengan CSS. Ini akan menciptakan panel tertutup ketika JavaScript diaktifkan dan dapat terbuka ketika sebuah pemicu (misalnya tombol) diklik. Tapi ketika 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 dapat melihat isinya.