JQUERY Akordiyon Menü

Bu yazımda basit bir şekilde akordiyon menu yapımını anlatacağım. Kodları olabildiğince sade tuttum böylece kafanız karışmayacaktır

şimdi kodlarımıza geçmeden önce klasör yapımızı göstereceğim klasöt yapımız aşağıdaki gibi olacak

anadizin / index.html

anadizin / css / reset.css

anadizin / css / style.css

anadizin / js / jquery-1.7.2.min.js

anadizin / js / js-fonksiyonlar.js

şimdi tek tek bütün dosyaların içeriğine gelecek olursak

 

anadizin / index.html





Enes Dayanç | Jquery | Akordiyon Menu









	

 

anadizin / css / reset.css

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-weight:inherit;font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

 

anadizin / css / style.css

.menu_ana{
	width:120px;
	margin:auto;
	text-align:center;
}

.menu_secenek{
	border:1px solid #666;
}

.menu_baslik{
	background-color:#333;
	cursor:pointer;
	height:25px;
	padding-top:4px;
	color:#FFF;
}

.menu_alt{
	display:none;
	margin:4px 0px 4px 0px;
}

.menu_alt li{
	margin:2px 0px 2px 0px;
}

.menu_alt li a{
	text-decoration:none;
	color:#000;
}

.menu_alt li a:hover{
	color:#00F;
}

 

anadizin / js / jquery-1.7.2.min.js

http://code.jquery.com/jquery-1.7.2.min.js

 

anadizin / css / js-functions.js

$(document).ready(function () {
	$(".menu_baslik").click(function() {
		$(".menu_alt").slideUp("slow");
		$(this).next(".menu_alt").slideDown("slow");
	});
});

Projenin Çalışır Haline Aşağıdaki Link Üzerinden Erişebilirsiniz :

http://enesdayanc.com/projeler/jqueryakordiyonmenu/