Membuat Navigasi Bergerak Yang Keren Dengan CSS dan jQuery

() translation by (you can also view the original English article)

Animasi dan feedback visual merupakan cara bagus untuk mendampingi pengguna dalam navigasi dan berinteraksi dengan sebuah website. Sementara secara tradisional Adobe Flash merupakan tujuan untuk animasi apapun, sekarang ini dengan keajaiban javascript kita dapat menghindari Flash. Hari ini kita akan membuat menu navigasi bergerak yang sangat keren hanya dengan menggunakan CSS dan jQuery.

Demo dan Source Code

Ikhtisar

Menu yang sedang kita buat dapat dilihat di dalam screenshot di bawah. Kamu juga dapat melihat versi akhirnya di sini.

Saya akan memecah tutorial ini ke dalam lima bagian sebagai berikut:

Sketsa kasar
Membuat Sumber
Menuliskan HTML
Menuliskan CSS
Membuat animasi dengan menggunakan jQuery

Langkah 1: Sketsa Kasar

Pertama-tama mari kita lihat apa yang perlu kita lakukan di sini.

Jadi berikut ide kasar mengenai apa yang seharusnya kita lakukan:

Kita akan memecah halaman ke dalam 4 bagian, header, navigasi dan header konten dan sisa konten.
Area header akan berupa kontainer <div> sederhana
Area navigasi akan dipecah ke dalam beberapa kontainer <div> yang disesuaikan dengan item menu.

Sekarang kebanyakan waktu kita menggunakan kontainer <ul><li> namun karena setiap menu itu unik,
Saya tidak melihat keuntungan menggunakan <ul><li> sehingga sebagai gantinya saya akan menggunakan kontainer <div>.

Konten akan berupa kontainer <div> sederhana

Jadi untuk menyimpulkannya

<!-- header section-->
<div id="header"></div>

<!-- navigation section-->  	
<div id="navigation" class="container">
	<div><a href="#">home</a></div>
	<div><a href="#">about</a></div>
	<div><a href="#">services</a></div>
	<div><a href="#">solutions</a></div>
	<div><a href="#">contact</a></div>
</div>

<!-- container section-->
<div class="container">
	<div id="content-title"></div>
	<!-- rest of the content -->
</div>

Itu mungkin membantu untuk menunjukkan struktur direktori. Struktur direktori adalah sebagai berikut:

Langkah 2: Sumber

Saya menganggap kamu memiliki pengetahuan dasar dalam menggunakan Photoshop, sehingga saya tidak akan memberikan instruksi yang terlalu detail dalam membuat sumber.
Ada beberapa hal yang perlu kita buat.

Background Header
Judul Konten
Navigasi
Strip background

Perhatikan bahwa jika kamu ingin melewatkan langkah ini kamu dapat mengunduh file zip utuh di akhir tutorial dan mengekstrak salinan saya!

Oke, mari membuat background header. Buka Photoshop dan buat kanvas 1x181 px, atau kamu dapat membuatnya lebih besar dan kemudian memotong gambar.
Buat sebuah layer dan berikan gradien linier dengan preset Foreground to Background untuk 171px, ini akan menjadi gradien utama.
Buat layer lainnya dan berikan itu gradien linier dengan preset Foreground to Background sekitar 10px di bawah layer pertama untuk beberapa efek bayangan.

Berikut merupakan tampak seharusnya, itu 100x181 px yang nantinya saya crop menjadi 1x181 px.

Simpan ini sebagai 'hdr-bkg.png' di dalam folder 'img'.

Berikutnya, kita akan membuat judul konten. Sekali lagi, buka Photoshop dan buat 934x284 px.
Buat persegi panjang melengkung dengan menggunakan tool yang sesuai, pilih buat yang dibuat, buat sebuah layer baru, tambahkan gradien dan beri itu beberapa drop shadow.
Maka kita akan mendapatkan sesuatu seperti ini:

Simpan ini sebagai 'content-title.png' di dalam folder 'img'.

Sekarang mari kita buat sumber yang diperlukan oleh navigasi. Kita memerlukan dua set navigasi dan kotak putih.

Kotak putihnya sederhana. Buat sebuah persegi panjang melengkung sekitar 98px x 58px dan lukis itu dengan warna putih. Pastikan bahwa background transparan.

Simpan ini sebagai 'white.jpg' di dalam folder 'img'.

Untuk item navigasi, buka Photoshop dan buat dokumen 490px x 58px.
Buat sebuah persegi panjang melengkung dengan sekitar 98px x 58px dan buat beberapa teks di dalamnya. Kita akan memerlukan dua salinan untuk tiap teks.
Saya menerapkan sedikit drop shadow pada tiap teks, namun tentu saja ini opsional. Kamu dapat memilih warnamu sendiri untuk ditempatkan di sini.

Sekarang duplikasikan layer ini sepanjang garis horizontal. Terapkan warna dan teks yang berbeda.

Simpan ini sebagai 'nav.jpg' di dalam folder 'img'.

Terakhir, untuk strip background saya menggunakan sebuah online tool bernama the Stripe Generator. Outputnya tampak seperti ini:

Kamu dapat melihat pengaturan saya di sini.
Tentu saja kamu dapat membuat strip sendiri dalam Photoshop, namun mengapa tidak menggunakan web tool kecil yang rapi :-)

Langkah 3: kode HTML

Sekarang mari kita catat HTML kita.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  	<!--our CSS file-->
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<!--jQuery library-->
	<script type="text/javascript" src="js/jquery.js" ></script>
	<!--jQuery plugin, we’ll get to this later-->
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<!--Our animation script-->
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home"><a href="home">home</a></div>
		<div id="about"><a href="about">about</a></div>
		<div id="services"><a href="services">services</a></div>
		<div id="solutions"><a href="solutions">solutions</a></div>
		<div id="contact"><a href="contact">contact</a></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

Ini cukup banyak berdasarkan pada rencana kita yang dijelaskan dalam Langkah 1

Saya telah menambahkan tautan ke file 'main.css' yang belum dibuat dan
Saya juga telah menambahkan beberapa referensi pada beberapa file javascript. Karena tiap item navigasi itu unik saya telah memberikan ID untuk masing-masing item.
Kita akan tetap memerlukan beberapa style umum pada tiap item menu, ini akan membuatnya mudah bagi kita untuk mengelola style dalam tahap nantinya.

Kita juga akan memiliki sebuah kotak putih di atas tiap item navigasi, ketika kita mengarahkan pada menu atau item yang sedang dipilih, sehingga kita akan menambahkan kontainer <div> lainnya untuk itu. HTML akhir akan tampak seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home" class="pri-nav"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

Simpan ini sebagai 'index.html'. Hingga pada titik ini kita memiliki ini sebagai halaman HTML kita:

Langkah 4: CSS

Mari kita terapkan beberapa style dasar pada halaman Web. Kita akan mulai dengan menentukan background dan menambahkan area header.

body {
	background: url(../img/body-bkg.jpg) repeat scroll;
	margin: 0;
	padding: 0;
}

.containe r{
	margin: 0pt auto;
	width:950px;
}
#header {
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
}

Simpan ini sebagai ‘main.css’ di dalam 'css'.

Sekarang kita memiliki sesuatu yang tampak seperti:

Sekarang mari tambahkan style pada tiap item menu. Ingatlah kita ingin kotak putih pada bagian atas tiap item menu,
sehingga position harus diatus ke absolute. Tambahkan style berikut di dalam file 'main.css'.

#navigation{
	height:60px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:80px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:171px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}

Sekarang kita memiliki:

Satu masalah, tautan <a href> muncul di atas item menu, mari hapus itu dengan indentasi teks yang besar - secara efektif mengambil itu keluar layar.
Tambahkan ini ke style sheet.

.pri-nav a{
	display:block;
	text-decoration:none;
	text-indent:-30000px; 
}

Sekarang itu akan tampak seperti ini:

Kita masih memiliki satu masalah, kita menginginkan menu navigasi muncul di bawah bayangan header. Kita bisa mencapai itu dengan memodifikasi header style kita.

#header{
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
	position:absolute;
	z-index :100; /* ensure the header is on top of navigation area */
	top: 0px;
	left:0px;
	width:100%;
}

Sekarang karena kita menggunakan file .png dengan transparansi, itu harusnya tampak seperti ini:

Sempurna! Mari tambahkan konten sehingga kita bisa mendapatkan script animasi kita.

.content{
	margin-top:160px;
}

#content-title{
	background: url(../img/content.jpg) no-repeat scroll;
	height:323px;
	position:absolute;
	width:100%;
}

Langkah 5: Script animasi

Pertama-tama mari unduh script jQuery terbaru dan tempatkan itu di dalam folder 'js'.

Animiasi ini pada dasarnya adalah sebuah manipulasi style background position.
Sayangnya jQuery memiliki bug dalam menggerakkan style background position. Namun jangan khawatir! Alexander Farkas telah membuat sebuah plugin yang menyelesaikan masalah ini.
Download file dan namai ulang menjadi jquery-bp.js dan simpan itu di dalam 'js'.

Ada sesuatu yang perlu kita mengerti sebelum melanjutkan. Saya mengutip dari dokumentasi plugin:

Dikarenakan beberapa bugs pada browser (yaitu Firefox, kamu harus mengatur (initial) background-position inline:
<div style="background-position: 10px 20px"></div>
- Tentu saja kamu dapat mencapai ini dengan JavaScript (jQuery):
$('#background').css({backgroundPosition: '10px 20px'});

Oke sekarang setelah kita mengerti itu, mari kita mulai. Kita akan mengatur style background position untuk setiap item di dalam awal script.

// id for each of our menu items
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
$(document).ready(function(){
  setBkgPos();
});

function setBkgPos()
{
  for ( i = 0; i < nav.length; i++ ){
    $(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
    $(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
  }
}

Simpan ini sebagai 'navigation.js' di dalam folder 'js'.

Sekarang kita akan mengikat 3 event pada tiap item menu. Kita dapat melakukan ini dengan memicu fungsi bind.

$(document).ready(function(){
  setBkgPos();

  // bind the event to function here
  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }
});

Kapanpun pengguna mengarahkan pada item navigasi script kita akan memanggil fungsi 'mMouseOver'.
Ketika pengguna mengarahkan item navigasi script kita akan memanggil fungsi 'mMouseOut'.
Dan ketika pengguna mengklik item navigasi, script kita akan memanggil fungsi 'mClick'

Langkah 5.1: Mouse over

Mari membuat sebuah "papan cerita" untuk animasi mouse over.

Pada 'Mouse Over':

Mengubah gambar menu navigasi (pendar) dan mengubah kursor menjadi pointer.
Navigasi akan bergerak sedikit ke atas.
Kotak putih akan bergerak ke bawah.
Baik kotak putih dan menu navigasi akan turun.
Menu navigasi dan kotak putih akan bergerak ke atas hingga posisi akhirnya.
Dan mengubah gambar menu navigasi ke keadaan aslinya.

Oke mari tambahkan fungsi berikut di bawah script sebelumnya:

function _getHPos( id )
{
  for ( i = 0; i < nav.length; i++ ){
    if ( '#' + id == nav[i] ){
      return i*(-98);
    }
  }	
  return 0;
}

function mMouseOver(e)
{	
  $(this)
  // stop any animation that took place before this
  .stop()
  // step 1. change the image file and change the cursor 
  .css({backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer'})
  // step.2 move up the navigation item a bit
  .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
    // this section will be executed after the step.2 is done
	function(){ 
	  $(this)
	    .children()
		  // step. 3 move the white box down
		  .animate({backgroundPosition:'(0px -40px)'},20)
		  // step 4. move the white box down
		  .animate({backgroundPosition:'(0px -20px)'},"fast");
	  $(this)
		// step 4. move the navigation item down
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
		// step 5. move the navigation item to its final position
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
	  // store the parent element id for later usage
	  var parent = this;
	  $(this)
		.children()
		  // step 5. move the white box to its final position
		  .animate( {backgroundPosition:'(0px -45px)'},"fast",
			// this section will be executed after the step.2 is done
			function(){
			  // step.6 change the image to its original image	
			  $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
			});	
	});
}

Saya perlu menjelaskan beberapa hal di sini:

_getHPos digunakan untuk menyesuaikan navigasi horizontal background position untuk tiap item.
Sebagai contoh, background item ‘Home’ akan mulai dari 0, horizontal background position pada ‘About’ dimulai dari -98px, dan sebagainya.
Juga sadari bahwa di awal fungsi kita memicu fungsi 'stop'. Kita melakukan ini untuk memastikan animasi apapun yang berjalan sebelum event 'mouse over' telah berhenti.
Mengapa? Kita akan menambahkan animasi nantinya untuk event 'mouse out'.
Sekarang mari bayangkan pengguna mengarahkan pada sebuah item dan kemudian memindahkan pointer mouse dengan cepat ke tempat lainnya dan kembali lagi ke item yang sama secara cepat.
Jika kita tidak menghentikan animasi sebelum tiap event, akan ada penundaan karena beberapa bagian animasi akan mengantri atau bahkan lebih buruk lagi akan menjadi tidak konsisten dan mengganggu pengguna.

Langkah 5.2: Mouse out

Sekarang itu selesai. Mari membuat "papan cerita" untuk event 'mouse out'.

Pada 'Mouse Out':

Menurunkan item navigasi.
Memindahkan kotak putih ke bawah.
Memindahkan navigasi ke atas.
Menaikkan item navigasi dari posisi aslinya.
Memindahkan kotak putih ke posisi aslinya (tidak terlihat).
Mengembalikan kursor ke normal.

Kode:

function mMouseOut(e)
{			
  $(this)
  // stop any animation that took place before this
  .stop()
  // step.1 move down navigation item
  .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", 
    // this section will be executed after the step.1 is done
    function(){
      // step.2 white box move really fast
      $(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
      // step 3. move navigation item up
      $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", 
      // this section will be executed after the step.3 is done
        function(){
          // step 4. move navigation item ot its original position
          $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
            // this section will be executed after the step.4 is done
            function(){
              // move white box to its original position, ready for next animation
              $(this).children().css({ backgroundPosition:'0px -60px'});
            })
        })
    })
    .css({backgroundImage: 'url(img/nav.jpg)', cursor: ''});
}

Langkah 5.3: Click

Hampir selesai! Sekarang kita perlu menangani ketika pengguna mengklik item navigasi.

1	function mClick(e)
2	{
3	location.href = this.id;
4	}

Tentu saja kamu dapat mengarahkan ke lokasi manapun yang kamu rasa cocok. Fungsi khusus ini akan mengarahkan browser ke [current_url]/[navigation_id] sehingga untuk ‘home’ itu akan menjadi ‘[current_url]/home’, untuk ‘about’ itu akan menjadi ‘[current_url]/about’ dan sebagainya.

Langkah 5.4: Indikator halaman terkini

Tentu saja kita memerlukan sebuaih indikator ketika kita sudah berada dalam halaman. Untuk itu kita memerlukan CSS class lainnya.
Kita akan menyebut class tersebut ‘active’. Sebagai contoh jika kita sekarang berada di 'home' file HTML akan menjadi:

1	<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>

Atau jika kita di 'about' itu akan menjadi:

1	<div id="about" class="pri-nav active"><div><a href="about">about</a></div></div>

dan sebagainya.

Jadi sekarang idenya setelah sebuah halaman dimuat script kita akan memeriksa untuk melihat item navigasi yang mana yang memiliki class 'active'.
Lalu kita menerapkan efek animasi. Dan kita perlu memastikan event lainnya ( ‘mouseover’, ‘mouseout’, ‘click’) tidak akan menyebabkan efek animasi pada item 'active' ini.

Untuk itu kita perlu sedikit mengubah kode. Berikut kode lengkap setelah perubahan:

var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

$(document).ready(function(){
  setBkgPos();

  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }

  for ( i = 0; i < nav.length; i++ ) {
    // element with ‘active’ class will  start animation 
    if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
      $(nav[i])
      .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
        function(){ 
          $(this)
            .children()
            .animate({backgroundPosition:'(0px -40px)'},20)
            .animate({backgroundPosition:'(0px -20px)'},"fast");
          $(this)
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
          var parent = this;
          $(this)
            .children()
            .animate( {backgroundPosition:'(0px -45px)'},"fast",
			  function(){
                $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
                $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
              });
        });
        break;
    }
  }
});

Selesai!

Dan dengan itu kita mendapatkan menu kecil yang berguna.

Download ZIP pada Situs

Lihat Demo!