jQuery Talk: Menu Highlighter

Kali ini saya akan mencoba untuk memberikan pencerahan tentang teknik memperindah tampilan halaman web dengan jQuery. jQuery kali ini saya namakan dengan Menu Highlighter. Dimana menu yang akan kita buat ini akan memberikan highlight bukan hanya sekedar title default dari browser anda, tapi title dengan sedikit animasi. (Lihat screen shot-nya dibawah ini) Ok, mari kita langsung saja ke tutorialnya.

1. Starter

Buatlah folder dengan nama tutorial-highlight dan buatlah 5 file dengan nama masing-masing:

  1. index.html digunakan untuk pengkodean html
  2. style.css digunakan untuk memberikan style pada html yang kita buat
  3. js-style.js digunakan untuk menampung code javascript.
  4. hover.png dapat di download disamping ini
  5. jquery.js ini adalah jQuery library yang kita gunakan untuk memberikan sedikit animasi pada website.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. HTML coding time

Isikan file index.html dengan script berikut:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<title>Menu Highlight</title>

<link rel=”stylesheet” href=”style.css” type=”text/css” />

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”js-style.js”></script>

</head>

<body>

</body>

</html>

Saya rasa teman-teman sudah paham ya dengan script diatas. Yup script diatas dapat dikatakan sebagai inisialisasi dari halaman web yang kita akan buat. Dapat kita lihat bahwa script diatas meng-import 2 file javascript dan 1 file css. Dimana 2 diantara file tersebut adalah file yang akan kita buat dari nol. File jquery.js adalah file framework jQuery yang akan kita gunakan. Jika teman-teman menggunakan versi atau nama yang lain, silahkan ubah tag src-nya sesuai dengan nama framework jQuery yang anda gunakan.

Jika sudah selesai dengan script diatas, tambahkanlah script berikut ini didalam tag body:

<div id=”menu”>

<p class=”Our recent news…”><a href=”#”>Home</a></p>

<p class=”Our Discography..”><a href=”#”>About</a></p>

<p class=”Take us close to you..”><a href=”#”>Contact Us</a></p>

</div>

Script diatas mendefinisikan tag div dengan id bernama menu. Menu yang kita akan buat, di konstruksi dari tag p(paragraph) tidak seperti biasanya. Setiap tag paragraph tersebut memiliki class yang berbeda-beda. Nilai dari masing-masing class akan menjadi text dari highlight yang akan kita buat.

4. CSS coding time

Masukan code css berikut ke dalam file css anda:

body {

color:#000;

margin: 0 auto;

padding: 0;

font: 75%/120% Arial, Helvetica, sans-serif

}

#menu {

margin: 100px 0px 0px 100px;

}

Code css diatas merupakan inisialisasi dari tampilan dasar web kita. Lalu tag dengan id menu akan di posisikan lebih ketengah yang ditujukan untuk menunjukan effect dari penggunaan highlight ini. Tambahkan lagi code css anda dengan code css berikut:

#menu p em {

font-weight: normal;

text-align: center;

font: 100%/100% Arial, Helvetica, sans-serif;

background: url(hover.png) no-repeat;

width: 180px;

height: 45px;

position: absolute;

top: -85px;

left: -60px;

padding: 20px 12px 10px;

display: none;

}

Panjang ya? mari kita bahas satu persatu. Code diatas digunakan untuk memberikan tag em pada setiap tag p di html anda. Tag em digunakan sebagai container bagi highlight. Pertama-tama font-weight, text-align dan jenis font di inisialisasi. Lalu background em ini di set dengan gambar hover.png yang ada diatas. Selanjutnya width dan height dari em ini diatur. position: absolute digunakan untuk membuat tag em ini memiliki lokasi yang absolute, dalam artian kedudukannya tidak akan mengganggu atau diganggu tag html lain. Hal ini yang akan memberikan kebebasan pada tag em tersebut. Lalu posisi left dan top disesuaikan sehingga ketika tag em ini muncul, seolah-olah tag tersebut meluncur dari atas sampai bagian atas menu. kemudian untuk memberikan kesan rapih, kita gunakan padding. Yang terakhir display: none yang digunakan untuk menghilangkan object ini dari halaman web anda. Tambahkan lagi code css berikut pada file css anda:

#menu p {

position: relative;

float: left;

padding: 5px 20px 0px 0px;

width: 80px;

height: 25px;

margin: 0px;

text-align: left;

font: bold 120%/100% Arial, Helvetica, sans-serif;

}

Ok sepertinya tidak perlu dijelaskan lagi secara detail. Mungkin hal yang baru disini adalah position: relative dimana posisi ini hampir sama dengan absolute, hanya posisi relative masih mempunyai keterkaitan dengan tag tag html yang lain. Sehingga ketika posisi mereka berubah, maka posisi tag html yang lain pun ikut menyesuaikan.

5. jQuery coding time

Isikan script berikut ke dalam file js-style.js anda:

$(document).ready(function(){

$(“#menu p”).append(“<em></em>”);

$(“#menu p”).hover(function() {

$(this).find(“em”).animate({opacity: “show”, top: “-75”}, “slow”);

var hoverText = $(this).attr(“class”);

$(this).find(“em”).text(hoverText);

}, function() {

$(this).find(“em”).animate({opacity: “hide”, top: “-85”}, “fast”);

});

});

Script $(document).ready menginisialisasikan bahwa script yang ada didalamnya akan tereksekusi setelah browser anda selesai menge-load semua file website ini. Pertama-tama tag em yang diinisialisasikan di css di attach ke tag p. Lalu ketika tag p pada tag dengan id menu di hover, maka tag em pada tag p yang bersangkutan akan dianimasikan dari opacity hide ke show dengan nilai top berubah menjadi -75. Animasi ini berlangsung lambat. Lalu text pada tag em tadi akan diset dengan value dari class pada tag p. Setelah hover berakhir, maka tag em ini akan dianimasikan lagi dari opacity show ke hide dengan nilai top menjadi -85. Animasi ini berlangsung cepat.

Jika teman-teman sudah mengikuti semua step diatas dengan benar, silahkan buka langsung file index.html dengan browser anda. Perhatikan apa yang terjadi ketika anda mengarahkan pointer mouse anda ke suatu menu.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

3 thoughts on “jQuery Talk: Menu Highlighter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s