Cara membuat 'Mootools Homepage' terinspirasi navigasi efek menggunakan jQuery

Indonesian (Bahasa Indonesia) translation by indri suadha (you can also view the original English article)

Seperti yang Anda tahu ada sejumlah Perpustakaan javascript yang bersaing di sekitar hari ini. Meskipun saya lebih suka jQuery, aku selalu menyukai cara menu di MooTools bekerja. Jadi dalam tutorial ini kita akan menciptakan efek yang sama... tapi kita akan melakukannya dalam jQuery!

Demo dan kode sumber

Langkah 1

Mari kita mulai dengan menulis HTML yang diperlukan untuk membuat navigasi vertikal yang sederhana. Untuk struktur, seperti bisa Anda tebak, kita akan menggunakan daftar unordered <ul>dengan ID nama "geser-navigasi". Juga, kita akan menambahkan beberapa link dan memberi setiap item daftar<li>kelas nama "geser-elemen".</li></ul>

Saya juga akan menambahkan sebuah elemen judul. Ini adalah hal yang berguna untuk melakukan seperti banyak blog WordPress misalnya memiliki unsur-unsur judul mereka sidebar navigasi (misalnya "Arsip"). Jadi itu akan terlihat seperti ini:


<ul id="sliding-navigation">
  <li class="sliding-element"><h3>Navigation Title</h3></li>
	<li class="sliding-element"><a href="#">Link 1</a></li>
	<li class="sliding-element"><a href="#">Link 2</a></li>
	<li class="sliding-element"><a href="#">Link 3</a></li>
	<li class="sliding-element"><a href="#">Link 4</a></li>
	<li class="sliding-element"><a href="#">Link 5</a></li>
</ul>

Langkah 2

Sekarang, mari kita membuat sebuah dokumen HTML yang mana kita dapat menempatkan karya kami hanya melakukan. Buat sebuah file HTML yang baru dan menyebutnya demo.html. Kemudian membuka file ini dengan editor teks favorit Anda dan masukkan kode berikut:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>
	<body>
		<div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
        </div>
	</body>
</html>

Ada beberapa hal yang perlu diperhatikan di sini:

The! DOCTYPE untuk file demo.html kami diatur ke XHTML 1.0 Strict. Hal ini tidak diperlukan untuk efek untuk bekerja tetapi saya mencoba untuk mendapatkan dalam kebiasaan menggunakannya sebanyak yang saya bisa.
Anda mungkin telah memperhatikan bahwa <link> tag adalah mengacu pada file bernama style.css. Namun, file tersebut tidak ada. Tidak khawatir walaupun, itu adalah langkah berikutnya.
Akhirnya saya telah dibungkus blok navigasi saya ke<div>. Kami akan membuat menggunakan ini kemudian posisi blok pada halaman.</div>

Langkah 3

Sekarang bahwa kita memiliki file HTML kami dicap dan bekerja, mari kita tambahkan beberapa gaya. Ingat bahwa dokumen HTML kami menunjuk ke sebuah file CSS yang bernama styles.css. Jadi, mari kita mulai dengan menciptakan sebuah file bernama styles.css dan menyimpannya dalam direktori yang sama tempat tinggal kami dokumen HTML. Seperti yang kita lakukan pada langkah sebelumnya, buka file ini dengan editor teks favorit Anda dan masukkan kode berikut:


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

ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 15px;
	margin: 0;
	margin-bottom: 5px;
}

ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background: #333;
	border: 1px solid #1a1a1a;
	font-weight: normal;
}

ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background: #222;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}

ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Langkah 4

Saat ini Halaman demo.html Anda harus melihat sesuatu seperti ini:

Jadi, akhirnya saatnya untuk memulai menggunakan jQuery. Tapi sebelum kita dapat memulai kita perlu melakukan beberapa hal:

Download versi terbaru dari jQuery.
Buat sebuah file baru yang disebut sliding_effect.js dan menyimpannya dalam direktori yang sama seperti yang file HTML dan CSS.
Terakhir, masukkan file sebelumnya dua untuk dokumen HTML Anda<head>.</head>

Ini adalah apa Anda HTML file<head>akan terlihat seperti sekarang:</head>


	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>

Langkah 5

Sekarang, kita akan menciptakan fungsi yang akan melakukan semua "berat" mengangkat untuk efek geser untuk bekerja. Fungsi ini akan mengambil lima parameter (navigation_id, pad_out, pad_in, waktu, dan pengganda) dan menggunakannya sebagai berikut:

navigation_id: ini adalah nama ID navigasi, yang berisi unsur-unsur efek yang akan diterapkan pada.
pad_out: ini adalah jumlah piksel untuk melangkah meninggalkan ketika salah satu link di dalam navigasi adalah melayang.
pad_in: ini adalah jumlah piksel untuk melangkah meninggalkan ketika salah satu link di dalam navigasi tidak lagi menjadi melayang.
waktu: ini mewakili jumlah waktu (dalam milidetik) yang diperlukan untuk salah satu elemen link untuk slide dalam dan kembali di tempat saat halaman dibuka.
Multiplier: pekerjaan kelipatan adalah untuk menambah atau mengurangi jumlah yang diperlukan sebuah elemen link berikut untuk slide dalam ke layar. Dengan kata lain, jika kelipatan 1, Semua elemen link akan slide dalam ke layar dalam interval waktu yang sama. Namun, jika itu adalah kurang dari 0, elemen link berikutnya akan slide dalam lebih cepat, dan jika itu lebih dari 1 sebaliknya akan terjadi.

Jadi, buka sliding_effect.js file dan masukkan kode berikut:


function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Langkah 6

Semua yang perlu kita lakukan untuk memicu script adalah memanggil fungsi ketika halaman telah dimuat. Ada dua tempat untuk meletakkan potongan kode berikut. Ini dapat menjadi tertulis di dalam file sliding_effect.js (saya memilih opsi ini untuk tutorial ini) atau disebut dalam menggunakan HTML<script></script>


$(document).ready(function()
{
	slide([navigation_id], [pad_out], [pad_in], [time], [multiplier]);
});

Langkah 7

Akhirnya kita akan menambahkan sedikit gaya laman untuk membuatnya terlihat sedikit lebih glamor. Pertama saya telah membuat sebuah blok gambar yang terlihat seperti ini:

Gambar memiliki gradien pingsan, garis sorot, 190px luas dan disebut "background.jpg". Ide akan menjadi posisi ini di sebelah kiri navigasi kami sehingga tombol geser di bawahnya. Kita juga akan menambahkan sedikit pos judul halaman. Jadi HTML kita menjadi:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Navigation Effect Using jQuery</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="sliding_effect.js"></script>
	</head>
	<body>
		<div id="navigation-block">
        	<img src="background.jpg" id="hide" />
            <h2><span>Navigation Effect Using jQuery</span></h2>
            <p>By Bedrich Rios</p>
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
        </div>
	</body>
</html>

Perhatikan bahwa saya telah menambahkan gambar di dalam elemen "navigasi-blok" dan memberikan ID yang disebut "Sembunyikan". Juga, saya telah menambahkan elemen judul dan subjudul. Sekarang kita menambahkan sedikit tambahan CSS file styles.css kami sebagai berikut:



h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(navigation.jpg) no-repeat;
	height:40px;
}

h2 span
{
	display: none;
}

p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}

#navigation-block {
	position:relative;
	top:200px;
	left:200px;
}

#hide {
	position:absolute;
	top:30px;
	left:-190px;
}

Jadi pertama dalam<h2>elemen, kami telah menetapkan teks HTML menghilang menggunakan "menampilkan: tidak ada" dan mengatur gambar latar belakang teks mencari beberapa lebih bagus saya disiapkan sebelumnya.</h2>

Juga perhatikan bahwa elemen "navigasi-blok" sekarang memiliki posisi yang relatif, sehingga kita dapat memindahkan "Sembunyikan" gambar ke kiri. Ini akan membuat tab yang muncul dari bawah itu.

Akhirnya memberikan tab kami sedikit selesai saya telah menambahkan gambar latar belakang yang halus yang terlihat seperti shading seperti ini:


ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(heading_bg.jpg) repeat-y;
	font-weight: normal;
}

Selesai

Dan kita sudah selesai!

Lihat efek akhir

Download HTML/gambar/JS