"Outside the Box" navigasi dengan jQuery

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Hampir setiap situs web menggunakan konsep-konsep navigasi biasa yang kita semua terbiasa. Setelah beberapa saat ini dapat mendapatkan cukup membosankan, terutama untuk desainer yang berkembang pada kreativitas. Sementara meniru OS X dock dan tumpukan tidak baru, sudah pasti tidak umum.

Beberapa hari lalu, Jeffrey posting tentang potensi "outside the box" kompetisi di ThemeForest untuk mendorong penulis untuk mengenakan topi kreativitas dan desain template yang dapat digunakan dengan "outside of the box" kreatif desain. Dalam tutorial ini saya akan membahas beberapa cara untuk melakukan hal itu dengan OS X style dock dan tumpukan navigasi.

Sumber dan kredit

Sebelum kita mulai, saya ingin memberikan berteriak untuk beberapa orang yang datang untuk menyelamatkan ketika mereka mendengar saya meminta bantuan di Twitter. Steve diperbarui script tumpukan dengan Harley dari menggunakan jQuery 1.2.6 menggunakan 1.3.2 saat ini rilis dan Rey Bango dari tim jQuery membantu saya memperbaiki bug. Mereka berdua melompat ke tugas dalam beberapa menit saya teriakan minta tolong melalui Twitter. Terima kasih ton guys! * Putaran tepuk tangan * :-D

Sumber-sumber asli

"Menambahkan Leopard desktop dengan jQuery" oleh Harley melalui Net.tutsplus.com
Antarmuka: Menu Fisheye
jqDock v1.2
Contoh template (Internet Encyclopedia) oleh Luka Cvrk

Catatan cepat

Script ini mengandalkan jQuery 1.3.2. Contoh-contoh yang ditunjukkan ini kompatibel dengan semua browser utama termasuk IE6 dan mudah untuk memastikan merendahkan anggun jika JavaScript dinonaktifkan .

jQuery OS X Dock #1 (horisontal)

Dermaga pertama kita akan membangun menggunakan Fisheye Menu jQuery plugin disebutkan di atas. It's cukup ringan (~ 7kb dengan dependensi tapi aku ingin menggunakan ini salah satu alasan utama) adalah karena ia telah sangat halus, tidak ada gagap. Lihat Demo.

Seperti yang Anda lihat dalam demo, hal ini sangat halus dan responsif. The downside adalah bahwa Anda tidak dapat menggunakan posisi fixed dengan itu jika halaman perlu di scroll seperti itu akan pecah. Jika Anda tidak perlu fixed dalam jendela browser kemudian ia bekerja bagus.

Ini adalah contoh yang bagus dari konsep "Outside the Box" di situs web dan menyediakan sebuah antarmuka yang interaktif dan menyenangkan.

File yang diperlukan (saya telah digabungkan Fisheye plugin dan iutil.js dalam file demo).

jQuery 1.3.2
Antarmuka: Fisheye Menu plugin
Interface: iutil.js (dependensi)

HTML

Kami akan membungkus gambar dan judul kami di link dan menempatkan mereka dalam mengandung div. Kemudian kami akan membungkusnya dalam lain yang mengandung div untuk berfungsi dengan baik.

<div id="dock">
  <div class="dock-container">
		<a class="dock-item" href="index.html"><span>Example 1</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/home.png" alt="home" /></a> 
		<a class="dock-item" href="example2.html"><span>Example 2</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/email.png" alt="contact" /></a> 
		<a class="dock-item" href="example3.html"><span>Example 3</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/portfolio.png" alt="portfolio" /></a> 
		<a class="dock-item" href="all-examples.html"><span>All Examples</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/music.png" alt="music" /></a> 
		<a class="dock-item" href="#"><span>Video</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/video.png" alt="video" /></a> 
		<a class="dock-item" href="#"><span>History</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/history.png" alt="history" /></a> 
		<a class="dock-item" href="#"><span>Calendar</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/calendar.png" alt="calendar" /></a> 
		<a class="dock-item" href="#"><span>Links</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/link.png" alt="links" /></a> 
		<a class="dock-item" href="#"><span>RSS</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss.png" alt="rss" /></a> 
		<a class="dock-item" href="#"><span>RSS2</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss2.png" alt="rss" /></a> 
	</div><!-- end div .dock-container -->
</div><!-- end div .dock #dock -->

Perhatikan bahwa saya sudah menempatkan judul span Tags sehingga kita bisa style mereka serta memungkinkan plugin untuk menyembunyikan/menampilkan mereka yang diperlukan.

CSS

Dengan CSS kita akan posisi dock mana kita inginkan pada halaman. Kita tidak dapat menggunakan fixed tetap dengan plugin ini atau itu tidak akan berfungsi dengan baik.

.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
.dock-item span { display: none; padding-left: 20px; }
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }

Saya juga sudah ditempatkan sedikit tambahan CSS di head halaman di bawah CSS termasuk di atas. Aku membungkusnya dengan noscript Tag jika pengunjung tidak memiliki JavaScript diaktifkan atau tersedia, itu akan tetap navigasi yang dapat digunakan. Saya harus menunjukkan bahwa ini tidak akan memvalidasi karena noscript tag tidak berlaku di bagian head, meskipun ia bekerja di semua browser saat ini. ;-)

#dock { top: -32px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }

JavaScript

Kami akan membawa dalam berkas JavaScript kami sekarang mulai dengan jQuery 1.3.2. File fisheye-iutil.min.js adalah kombinasi Fisheye plugin dan file tergantung iutil.js nya. Kami akan membuat file yang terakhir dan menempatkan JavaScript kami perlu untuk menginisialisasi dock di dalamnya.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fisheye-iutil.min.js"></script>

Sekarang kita akan menginisialisasi dock setelah halaman load. Anda dapat menggunakan beberapa pilihan plugin untuk menyesuaikan dock yang Anda butuhkan untuk posisi dan fungsi. Anda dapat melihat dokumentasi dengan mengunjungi situs yang terdaftar di bawah sumber untuk Fisheye plugin.

$(function () { 
	// Dock initialize
	$('#dock').Fisheye(
		{
			maxWidth: 30,
			items: 'a',
			itemsText: 'span',
			container: '.dock-container',
			itemWidth: 50,
			proximity: 60,
			alignment : 'left',
			valign: 'bottom',
			halign : 'center'
		}
	);
});

Itu semua ada untuk itu! :-D

jQuery OS X Dock #2 (vertikal)

Dock horisontal adalah mudah dan jelas ide yang rapi untuk menggunakan situs web. They're mungkin jenis yang paling umum digunakan di seluruh web saat ini jadi mari kita mencoba sesuatu yang berbeda. Kita bisa mendapatkan sedikit lebih "outside of the box" jika kita melakukan navigasi vertikal dock.

Dock ini bergantung pada jqDock jQuery plugin. Ini adalah sekitar 10kb dalam ukuran, jadi ini adalah beberapa kb lebih besar daripada versi sebelumnya tapi itu tidak banyak. Kerugian dari plugin ini adalah bahwa tidak cukup sehalus dermaga Fisheye plugin, walaupun masih sangat fluida dan tentunya bermanfaat. Plugin ini juga tidak memiliki masalah dengan posisi fixed. Lihat Demo.

HTML

Kami akan menempatkan gambar dalam daftar unordered dan membungkus mereka dalam link. Seperti dengan plugin terakhir, kami akan membungkus semuanya mengandung div. Ketika kita menginisialisasi plugin kita akan menggunakan tag "ul" di sini.

<div id="dockContainer">
	<ul id="jqDock">
		<li><a class="dockItem" href="index.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/home-sm.png" alt="Home" title="Example 1" /></a></li>
		<li><a class="dockItem" href="example2.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/email-sm.png" alt="Contact" title="Example 2" /></a></li>
		<li><a class="dockItem" href="example3.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/portfolio-sm.png" alt="portfolio" title="Example 3" /></a></li>
		<li><a class="dockItem" href="all-examples.html"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/music-sm.png" alt="music" title="All Examples" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/video-sm.png" alt="video" title="Video" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/history-sm.png" alt="history" title="History" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/calendar-sm.png" alt="calendar" title="Calendar" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/link-sm.png" alt="links" title="Links" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss-sm.png" alt="rss" title="RSS" /></a></li>
		<li><a class="dockItem" href="#"><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/dock/rss2-sm.png" alt="rss" title="RSS" /></a></li>
	</ul>
</div><!-- end div #dockContainer -->

Anda akan melihat di dock ini kami tidak memiliki judul yang dibungkus dalam tag span. Sebaliknya, plugin ini akan melihat kumpulan tag "title" untuk setiap gambar dan membuat judul seperti itu (jika diaktifkan di pilihan plugin). Hal ini membuat markup sedikit simple tetapi juga membuat judul sedikit kurang disesuaikan.

CSS

Kami posisi dock di sisi kiri (dapat kedua sisi) menggunakan fixed posisi. Kami akan memberikan sedikit ruang antara dirinya dan bagian atas jendela peramban untuk estetika dan jadi ikon tidak menghilang ketika diperbesar.

#dockContainer { position: fixed; top: 60px; left: 6px; }
#jqDock { position: relative; bottom: 48px; }
.jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Untuk style judul, kita dapat menggunakan class ".jqDockLabel". Kita juga tidak perlu memasukkan apapun style tambahan untuk itu masih dapat digunakan dengan JavaScript dinonaktifkan. Ini mungkin tidak sangat cantik tapi fungsional.

JavaScript

Kami akan membawa di Perpustakaan jQuery seperti dermaga sebelumnya serta plugin.

	<script type="text/javascript" src="js/jquery.jqDock.min.js"></script>

Kami menginisialisasi dock dan mengatur beberapa opsi untuk menyesuaikan. Anda dapat membaca dokumentasi pada pengaturan ini dengan mengunjungi situs yang terdaftar di bawah sumber pada awal tutorial untuk jqDock. Apa yang saya ingin menunjukkan di sini meskipun adalah opsi durasi. Ini adalah waktu untuk pembesaran animasi dalam milidetik. It's nice untuk dapat mengubah kecepatan durasi tetapi tampaknya untuk mendapatkan sedikit stuttery, yang merupakan sesuatu yang aku benci.

$(function(){
	var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
	$('#jqDock').jqDock(jqDockOpts);
});

Anda dapat dengan mudah mengubah posisi dock dan label, serta ukuran awal ikon dan beberapa pilihan lain. Apa yang saya tidak suka mengenai plugin ini adalah bahwa hal itu bagus untuk ukuran penuh ikon. Plugin sebelumnya memberi Anda kemampuan untuk mengubah ukuran itu bagus untuk. Itu semua ada untuk itu!

jQuery OS X tumpukan dan tumpukan Drop

Ini mungkin adalah gaya navigasi favorit saya dari tiga ditampilkan dalam tutorial ini. Ini adalah super ringan (~ 1kb) dan benar-benar kreatif "outside of the box" metode navigasi untuk sebuah situs web. Mungkin sedikit canggung memiliki navigasi di bagian bawah kanan atau kiri jendela browser tapi itu pasti akan menjadi kreatif dan menghemat banyak ruang. Lihat Demo.

Saat menulis ini, saya menyadari ada mungkin banyak orang yang tidak seperti mereka navigasi di bagian bawah halaman jadi saya mengambil beberapa menit tambahan dan ditambahkan setumpuk drop-down ke berkas contoh. Dengan cara ini navigasi springs keluar dari atas ke bawah sehingga dapat sekarang digunakan di bagian atas halaman.
Lihat Demo.

HTML

HTML hanya yang sederhana seperti contoh dua dock. Kami akan menempatkan semuanya dalam sebuah div yang berisi dan menempatkan semua gambar dan judul, yang dibungkus dalam link, dalam daftar unordered.

<div class="stack">
	<img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png" alt="stack" />
	<ul id="stack">
		<li><a href=""><span>Aperture</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png" alt="Aperature" /></a></li>
		<li><a href="#"><span>All Examples</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png" alt="Photoshop" /></a></li>
		<li><a href="example3.html"><span>Example 3</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png" alt="Safari" /></a></li>
		<li><a href="example2.html"><span>Example 2</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png" alt="Coda" /></a></li>
		<li><a href="index.html"><span>Example 1</span><img src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/finder.png" alt="Finder" /></a></li>			
	</ul>
</div><!-- end div .stack -->

Perhatikan bahwa saya sudah ditempatkan gambar sebelum unordered list. Ini adalah gambar keranjang yang sisa ikon akan disusun di belakang.

CSS

Kami akan posisi wadah utama dan pastikan gambar keranjang memiliki indeks z lebih tinggi daripada unordered list sehingga semuanya tumpukan di balik itu. Perhatikan juga bahwa aku telah diberi keranjang gambar 35px dari padding. Ini mencegah ikon di belakang keranjang diklik karena gambar keranjang lebih pendek dari ikon. Jika Anda mengubah ikon keranjang untuk sesuatu yang lebih tinggi maka Anda akan perlu juga mengubah padding.

.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span { 
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	right:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

Juduk yang dibungkus dalam tag span ditetapkan untuk display:none sehingga mereka akan tersembunyi ketika halaman load.

JavaScript

Kami akan menempatkan JavaScript dalam file sendiri karena lebih dari dua baris. Ketika gambar di luar unordered list (keranjang) diklik, menggunakan fungsi toggle jQuery's untuk menghidupkan daftar item dan set mereka posisi berdasarkan titik awal horisontal + .75px kemudian dikalikan dengan 2. Ini memberikan action spring melengkung yang bagus daftar item.

Anda bisa mengubah .75px atau kelipatan (2) untuk menyesuaikan berapa banyak kurva.

$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack>img').toggle(function(){
		var vertical = 0;
		var horizontal = 0;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
			vertical = vertical + 55;
			horizontal = (horizontal+.75)*2;
		});
		$el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingTop: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingTop: '35'});
	});
	
	// Stacks additional animation
	$('.stack li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});

Kemudian ketika klik pengguna keranjang gambar lagi menjalankan fungsi berikutnya yang membalikkan apa yang kita hanya melakukan. Saya kemudian menambahkan beberapa animasi tambahan untuk daftar item dan judul mereka untuk memberi mereka sedikit lebih banyak umpan balik pengguna, yang tentu saja dapat dengan mudah dihapus.

Dan di sana Anda memilikinya! Sederhana dan fleksibel OS X gaya tumpukan navigasi untuk website Anda. :-D Script ini adalah juga dalam proses dikonversikan menjadi lebih mudah untuk menggunakan plugin sehingga mengawasi keluar untuk itu.

Akhir pikiran

Mudah-mudahan contoh-contoh ini akan memberi Anda beberapa ide-ide kreatif dan keluar dari cetakan ketika merancang situs web atau template Anda berikutnya. Seperti yang Anda lihat, jQuery adalah sebuah perpustakaan yang kuat yang membuatnya mudah untuk membuat ide-ide kami menjadi kenyataan. Dengan potensi mendatang persaingan berdasarkan "outside the box" Desain, Anda mungkin memulai beberapa ide untuk disubmit ke ThemeForest. Jika Anda belum mengirimkan file sebelumnya, itu sangat mudah dan layak untuk waktu Anda! :-)

Saya ingin mengucapkan terima kasih kepada Rey (dari tim jQuery) dan Steve untuk menjawab panggilan saya untuk bantuan Twitter begitu cepat. Ini adalah Perdana contoh bagaimana berguna Twitter dapat untuk desainer dan pengembang. Jika Anda tidak belum mengikuti Theme Forest atau Nettuts di Twitter, sekarang adalah waktu yang baik untuk melakukan itu. Itu baik situs dengan banyak informasi fantastis. Anda juga dapat mengikuti saya di Twitter jika Anda ingin.

Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.