Home | Jquery Tutorial | Tab Menu with Fade Effect

Free Tutorial

Forum Discussion

Miscellanous

Members Area

Tree View

Newest Scripts

	SimpleChart
	by Administrator
	AJAX File Uploader
	by Administrator

Newest Templates

Newest User

	whiteforce
	on 17th of July 2010

	kuman
	on 11th of July 2010

	putri
	on 09th of July 2010

	acchunk
	on 20th of June 2010

	ISWAN
	on 17th of June 2010

Web Statistic

	Today	: 50
	This Month	: 998
	Total	: 80175
	Total Hits	: 153517
	Member	: 357
	Post Tutorial	: 35
	Post Forum	: 56
	Free Script	: 2
	Free Templates	: 76

Jquery Tutorial
Tab Menu with Fade Effect Share
by Administrator on 09 Feb 2010 - 12:34:47 lasted edit on 09 Feb 2010 - 12:42:09

Aplikasi Tab Menu ini dapat digunakan untuk meminimalisasi sub-sub menu dari sebuah content atau topik. Tab Menu ini juga menggunakan efek fade out dan fade in sehingga tampilannya akan lebih menarik
Aplikasi ini juga menggunakan Jquery Library sebagai enginenya.

download jquery library berikut :
jquery.min.js

create file indeks.html berikut :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tab Menu with Fade Effect</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
font-family: "Lucida Grande",Verdana,sans-serif;
font-size: 11px;
line-height: 16px;
padding: 10px;
}

h2 {
margin-top: 0;
}

#wrapper {
width: 470px;
margin: 0 auto;
}

.fader {
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #A4ADB7;
}

.clear {
clear: left;
}

#datacontent {
padding: 20px 10px;
}

#datacontent ul {
list-style: none;
margin: 0;
padding: 5px;
display: block;
height: 30px;
background: #DFDFDF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}

#datacontent li {
float: left;
}

#datacontent li a {
outline: 0;
display: block;
background: #DFDFDF;
color: #666;
text-decoration: none;
padding: 1px 5px;
margin: 5px;
border: 1px solid #DFDFDF;
}

#datacontent li a:hover {
border: 1px solid #D1D1D1;
background: #D1D1D1;
color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#datacontent li a.selected {
background: #AFAFAF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px inset #fff;
color: #fff;
}

#datacontent .panels {
border: 1px solid #DFDFDF;
border-top: 0;
border-bottom: 10px solid #DFDFDF;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
overflow: hidden;
}

#datacontent .panelsInner {
overflow: hidden;
}

#datacontent .panel {
padding: 20px;
}

</style>

</head>
<body>
<div id="wrapper">
<div id="datacontent">
<ul class="navigation">
<li><a href="#networks">Networks</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="panels">
<div id="networks" class="panel">
<h2>Networks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="about" class="panel">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

</div>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$('#content a').each(function () {
$('<div class="fader" />').css('opacity', 0).prependTo(this);
}).hover(function () {
$('img', this).stop().animate({
marginLeft : 5
}, 250);

$('.fader', this).stop().animate({
opacity : 0.15
});

}, function () {
$('img', this).stop().animate({
marginLeft : 10
}, 250);

$('.fader', this).stop().animate({
opacity : 0
});
}).find('img').css('marginLeft', 10);

$('.navigation').each(function () {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelwrapper = $panels.filter(':first').parent(),
delay = 500,
heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper

$panels.hide();

$links.click(function () {
var link = this,
$link = $(this);

// ignore if already visible
if ($link.is('.selected')) {
return false;
}

$links.removeClass('selected');
$link.addClass('selected');

if ($.support.opacity) {
$panels.stop().animate({opacity: 0 }, delay);
}

$panelwrapper.stop().animate({
height: 0
}, delay, function () {
var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;

$panelwrapper.animate({
height: height
}, delay);
});
});

$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
</script>
</body>
</html>

Untuk Demo, klik disini

Rating

Currently 4.20/10
1
2
3
4
5
6
7
8
9
10

0 Current Comments There're no current comments for this tutorial !

Restricted Area Sorry guys, you don't have permission to comment in this tutorial, please login first or you can register if you aren't our member yet.

Polling

Recent Post Forum

achmad.zaky on HTML Forum

halo pak,
saya mau tanya saya pada waktu saya pake command pint() , kenapa dicetak selalu dalam huruf yang kecil hanya 1/6 halaman . bagaimana agar cetakan bisa sesuai atau besar.

terima kasih

Post : Thursday 20th of May 2010 01:54:22 AM

tita89 on PHP Forum

aq member baru,,
mau tanya ni aq dpt tgs besar, buat sistem informasi yg dalemnya mau tak buat forum konsultasi (diskusi) kyk gini, tlg dung ksh source codenya,,, please..
yg lengkap... makasih ya,,

Post : Sunday 09th of May 2010 01:44:13 AM

Administrator on Lounge Forum

salam kenal juga mas Tedjo, ..
pengalaman saya, saya belajar web mulai dari HTML & CSS, terus lanjut ke Javascript & PHP, lanjut lagi PHP & Database, skrg ini saya sedang memperdalam ilmu Ajax & Jquery. Saya belajar web baru sekitar 2 tahun terakhir ini.
Untuk pembuatan website, biasanya berkisar 1-2 juta rupiah mas, tuh udah termasuk 1 domain & hosting yg standar.

tks

Post : Saturday 24th of April 2010 01:42:06 PM

tejomoeljono on Lounge Forum

Perkenalkan saya Tedjo dari surabaya, mohon saranya bagaimana cara belajar dari pemula sampai dengan expert seperti anda, saya harus belajar mulai dari mana,saya pemula di dunia cyber,..oh ya sama tanya kalau dibantu buatkan website berapa ya, terus prosesnya bagaimana.
Thanks sebelumnya

Post : Friday 23rd of April 2010 04:31:57 AM

Administrator on PHP Forum

yup bro, tuh harus dibuat dulu DFD nya, supaya nantinya mudah kita implementasi ke pemrograman dan database..tentukan dulu mana entitasnya, kemudian relasinya...

klo kira2 DFD sudah siap, tidak susah dibuat ke database..misal ntar didatbase kita buat satu tabel dengan nama KRS, yang fieldnya terdiri dari :
- id_matkul
- id_mhs
- semester

utk tabel MHS, terdiri dari field :
- id_mhs
- nama
- alamat
- tlp
- dll

utk tabel MATKUL, terdiri dari field :
- id_matkul
- nama
- sks

Nah, kira-kira seperti itu bro, tp itu hanya contoh aja, masih ada beberapa tabel lagi yg perlu kita buat, tabel dosen misalnya dll..

semoga bermanfaat

tks

Post : Monday 19th of April 2010 12:39:36 AM