Home | Jquery Tutorial | Apple Style Accordian Menu

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	: 36
	This Month	: 984
	Total	: 80161
	Total Hits	: 153478
	Member	: 357
	Post Tutorial	: 35
	Post Forum	: 56
	Free Script	: 2
	Free Templates	: 76

Jquery Tutorial
Apple Style Accordian Menu Share
by Administrator on 08 Feb 2010 - 11:55:02 lasted edit on 08 Feb 2010 - 11:59:20

Dewasa ini Jquery sudah sangat populer, bahkan dikabarkan telah menyaingi Ajax. Salah satu aplikasinya adalah Accordian Menu. Accordian Menu adalah sebuah menu navigasi vertikal yang memungkinkan user untuk memilih menu dengan event hover menggunakan mouse. Aplikasi ini dibangun dengan menggunakan Jquery Library. Selain itu, yang membuat aplikasi ini menarik adalah style dari aplikasi ini mirip dengan style yang sering kita lihat pada aplikasi-aplikasi Apple.

Jquery Library
Pertama download library jquery dan file image berikut :
http://www.freetutorialwebsite.com/othe … enuimg.rar

setelah file library berhasil didownload, create file indeks.html, dengan script berikut :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}
.applemenu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>
</head>
<body>
<div class="applemenu">
<div class="silverheader"><a href="http://www.freetutorialwebsite.com/view.php?cat_id=1">PHP Tutorial</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.freetutorialwebsite.com/view.php?cat_id=2">Javascript Tutorial</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.freetutorialwebsite.com/view.php?cat_id=3">Ajax Tutorial</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.freetutorialwebsite.com/view.php?cat_id=4">HTML Tutorial</a></div>
<div class="submenu"><a href="http://www.freetutorialwebsite.com"><img src="banner.png" width="165" height="24" border="0"/></a></div>
<div class="silverheader"><a href="http://www.freetutorialwebsite.com/view.php?free_scripts&p=1#124">Free Scripts</a></div>
<div class="submenu">
Some random content here<br />
</div>
</div>
</body>
</html>

Untuk Demo, klik disini

Rating

Currently 4.46/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