Cara Membuat Tombol Navigasi Menggunakan jQuery

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Kunci dari sebuah situs yang sukses adalah kenyamanan dimana pengguna dapat menemukan apa yang mereka cari. Oleh karenanya, penting menghabiskan banyak waktu dan tenaga untuk membuat baik sistem navigasi yang berguna dan menarik secara visual. Akhirnya, saya telah berusaha bereksperimen dengan cara-cara baru bernavigasi di sebuah situs. Di tutorial ini saya akan menunjukkan cara membiarkan pengguna menggunakan keyboard mereka untuk mengelilingi situsmu.

Langkah 1

Hal pertama yang kita butuh adlah membuat halaman percobaan kita. Dalam kasus ini saya akan menggunakan demo.html dan akan mengandung:

Sebuah link ke framework jQuery
Sebuah link yang akan dikerjakan nanti. Sebut saja keypress_nav.js
Sebuah link ke file css disebut style.css ( kita juga akan bekerja di sini nanti )
Kepala div yang akan mengandung menu navigasi di antara hal lain dan
lima elemen div unik yang akan menampilkan halaman untuk situs

Jadi, seperti ini demo.html akan terlihat sekarang.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<!-- Our navigation will go here -->
		</div>
		<div id="home">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

Langkah 2

Sekarang kita telah punya DIV, kita bisa melangkah membuat navigasi untuk situs. Seperti yang kamu bayang kita akan menggunakan unordered list <ul> untuk menahan link-link dan DIV ID sebagai target dari link tersebut. Kita juga akan menambahkan class container ke semua "page" DIV. Kelas ini akan menolong kita untuk memudahkan acuan kepada DIV ketika kita membuat skrip. Jadi, ini yang harus kita miliki sekarang:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>KeyPress Navigation Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="keypress_nav.js"></script>
	</head>
	<body>
		<div id="header">
			<ul id="navigation">
				<li><a href="#home">Home ( a )</a></li>
				<li><a href="#about">About ( s )</a></li>
				<li><a href="#contact">Contact ( d )</a></li>
				<li><a href="#awards">Awards ( f )</a></li>
				<li><a href="#links">Links ( g )</a></li>
			</ul>
		</div>
		<div id="home" class="container">
			<h2>Welcome!</h2>
			<p>Some Text</p>
		</div>
		<div id="about" class="container">
			<h2>About Me</h2>
			<p>Some Text</p></p>
		</div>
		<div id="contact" class="container">
			<h2>No Spam Please</h2>
			<p>Some Text</p>
		</div>
		<div id="awards" class="container">
			<h2>Awards, So Many ...</h2>
			<p>Some Text</p>
		</div>
		<div id="links" class="container">
			<h2>Cool Sites</h2>
			<p>Some Text</p>
		</div>
	</body>
</html>

Catatan: Huruf (key) di dalam tanda kurung adalah key yang akan kita gunakan untuk navigasi di halaman.

Langkah 3

Struktur dari halaman percobaan kita sekarang selesai tetapi kekurangan elemen visual. Jadi maritambahkan beberapa CSS. Satu hal yang harus diingat adalah sebelum memulai memberi gaya laman kita. Bahwa laman kita harus tetpa bagus meskipun JavaScript dimatikan. Skrip, dalam opiniku, selalu harus digunakan sebagai bonus pada pengguna yang punya JavaScript menyala tapi tidak harus menjauhkan yang tidak punya. Kita ada desainer situs, dan kita peduli pada usabilitas kan?

Kamu bisa lihat yang kita kerjakan di screenshot diatas. Itu adalah sederhana, menggunakan beberaoa warna untuk menerangi seksi yang berbeda. Jadi ini CSS kita:

body 
{
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans", sans-serif;
	font-size: 100%;
	background: #333;
}


/* Header
-------------------------------------------------- */

#header
{
	width: 460px;
	margin: 0 auto;
	font-size: .75em;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}

#header ul 
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#header ul li 
{
	float: left;
	text-align: left;
}

#header ul li a
{
	display: block;
	color: #ffff66;
	text-decoration: none;
	text-transform: uppercase;
	margin-right: 20px;
}

#header ul li a:hover
{
	text-decoration: underline;
	color: #ffcc66;
}


/* Containers
-------------------------------------------------- */

.container
{
	width: 400px;
	height: 300px;
	margin: 30px auto;
	padding: 10px 20px;
	border: 10px solid #fff;
	color: #fff;
	font-size: .75em;
	line-height: 2em;
}

.container h2
{
	padding: 5px 10px;
	width: 200px;
}

#home		{ background: #15add1; }
#home h2	{ background: #007aa5; }
#about		{ background: #fdc700; }
#about h2	{ background: #bd9200; }
#contact	{ background: #f80083; }
#contact h2	{ background: #af005e; }
#awards		{ background: #f18300; }
#awards	h2	{ background: #bb5f00; }
#links		{ background: #98c313; }
#links h2	{ background: #6f9a00; }


/* Self-Clearing Rules 
-------------------------------------------------- */

ul#navigation:after 
{
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

* html ul#navigation 	{ height: 1px; }
ul#navigation 			{ min-height: 1px; }

Catatan: Saya telah menambahkan beberapa aturan pembersih otomatis di navigasi agar bekerja di tinggi yang kurang akibat elemen inner floated. Dengan kata lain, aturan margin dari bagian paling atas mengandung efek yang tepat di navigasi <ul>.

Langkah 5

Di bagian tutorial ini kamu harus memiliki halaman yang terliaht seperti ini:

Halaman yang berfungsi dengan tanpa JavaScript yang dinyalakan. Namun, seperti yang saya bilang sebelumnya, mari berikan sedikit bonus bagi yang memiliki JavaScript di browser mereka. Kita akan melakukannya dalam dua langkah. Pertaman, kita akan membuat dua fungsi yang akan menyembunyikan dan menampilkan laman secara tepat. Lalu, kita akan menambahkan beberapa kode yang akan menentukan kunci yang akan ditekan pengguna nanti. Mari buat sebuah berkas keypress_nav.js dan bekerja dengan fungsi.

Langkah 6

Kita akan menentukan dua fungsi agar skrip bekerja sesuai keinginan. Salah satunya akan dipanggil ketika pengguna menekan kunci yang telah ditentukan (huruf dalam kurung dilangkah 2) dan akan menyembunyikan kontainer yang lain, menampilkan yang terasosiasi dengan kunci di DIV. Dan ini penampakan pertama fungsi kita:

function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

Sekarang, fungsi kedua kita akan mengambil array dari link dan memberikan mereka fungsi click target. Dengan kata lain fngsinya akan mendapatkan link navigasi, mengembalikan atribut "href" dan menampilkan DIV yang tepat saat mengkliknya. Jadi, fungsi keduanya akan seperti ini:

function showViaLink(array)
{
	array.each(function(i)
	{	
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

Langkah 7

Sekarang kode fungsi kita selesai, kita perlu memanggil mereka secara tepat ketika laman dimuat. Hal pertama yang perlu dilakukan adalah menyembunyikan semua elemen yang memiliki class container dengan pengecualian DIV yang memiliki ID home. Lalu, kita memanggil fungsi showViaLink() dengan link di dalam navigasi <ul> kami sebagai parameternya. Lalu, kita harus mendengarkan ke key yang ditekan pengguna dengan menggunakan fungsi showViaPress() dengan ID yang tepat sebagai parameternya. Ini bisa diselesaikan dengan menggunakan switch di key yang ditekan.

Switch akan punya 5 kasus ( untuk setiap link ) dan angkanya mengikuti ASCII untuk setiap key. Contohnya, jika "a" ditekan, maka switch akan menggunakan kasus 97. Jadi, kodenya akan terlihat begini.

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

Langkah 8

Sekarang kita telah memiliki semua pecahan puzzle, kita bisa meletakkannya bersama. Skrip terakhir kita harusnya seperti:

$(document).ready(function()
{
	// hides all DIVs with the CLASS container
	// and displays the one with the ID 'home' only
	$(".container").css("display","none");
	$("#home").css("display","block");
	
	// makes the navigation work after all containers have bee hidden 
	showViaLink($("ul#navigation li a"));
	
	// listens for any navigation keypress activity
	$(document).keypress(function(e)
	{
		switch(e.which)
		{
			// user presses the "a"
			case 97:	showViaKeypress("#home");
						break;	
						
			// user presses the "s" key
			case 115:	showViaKeypress("#about");
						break;
						
			// user presses the "d" key
			case 100:	showViaKeypress("#contact");
						break;
						
			// user presses the "f" key
			case 102:	showViaKeypress("#awards");
						break;
						
			// user presses the "g" key 
			case 103:	showViaKeypress("#links");
		}
	});
});

// shows a given element and hides all others
function showViaKeypress(element_id)
{
	$(".container").css("display","none");
	$(element_id).slideDown("slow");
}

// shows proper DIV depending on link 'href'
function showViaLink(array)
{
	array.each(function(i)
	{	
		$(this).click(function()
		{
			var target = $(this).attr("href");
			$(".container").css("display","none");
			$(target).slideDown("slow");
		});
	});
}

Demo

Lihat cara kerja skrip di halaman demo.
Pola yang digunakan di demo ini dibuat oleh Taylor Satula.

ENDE