mintik

Akordiyon örnekleri  hem menüler  hem de  içeriklerin eklenmesi için oldukça işe yarayan çalışmalardır. Genişliği kolay ayarlanabildiğinden hemen hemen her türlü alan içine sığdırılması çok kolaydır. Genelde menü örnekleri için kullanılıyor  olsalar da resim, video ve yazı gibi içeriklerin eklenmesi için de çok kullanışlıdırlar. Buradaki akordiyon örneğimiz içerik eklemeniz için hazırlanmış. İstediğiniz, aklınıza gelen her türlü  içeirği ekleyebilirsiniz video, resim, yazı gibi.

Eğer  Css ile biraz özelleştirirseniz linkler  ekleyerek akordiyon menü olarak ta kullanabilirsiniz. Bazı örneklerde mouse üzerine geldiği zaman aşağıya doğru açılırlar. Buradaki örnekte mouse ile tıkladığınızda akordiyon çerçevesi kayarak açılır.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi:

<script src="images/jquery.js"></script>

JavaScript :

<!-- activate tabs with JavaScript -->
<script>
$(function() { 

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
<!-- activate tabs with JavaScript -->
<script>

// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {

	// 1. upon hiding, the active pane has a ruby background color
	this.getPanes().slideUp().css({backgroundColor: "#b8128f"});

	// 2. after a pane is revealed, its background is set to its original color (transparent)
	this.getPanes().eq(i).slideDown(function()  {
		$(this).css({backgroundColor: 'transparent'});

		// the supplied callback must be called after the effect has finished its job
		done.call();
	});
});
</script>

Css :

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	background:#333 url(h3.png) 0 0;
	width: 300px;
	border:1px solid #333;	
	-background:#666;
}

/* accordion header */
#accordion h2 {
	background:#ccc url(h31.png);
	margin:0;
	padding:5px 15px;
	font-size:14px;
	font-weight:normal;
	border:1px solid #fff;
	border-bottom:1px solid #ddd;
	cursor:pointer;		
}

/* currently active header */
#accordion h2.current {
	cursor:default;
	background-color:#fff;
}

/* accordion pane */
#accordion .pane {
	border:1px solid #fff;
	border-width:0 2px;
	display:none;
	height:180px;
	padding:15px;
	color:#fff;
	font-size:12px;
}

/* a title inside pane */
#accordion .pane h3 {
	font-weight:normal;
	margin:0 0 -5px 0;
	font-size:16px;
	color:#999;
}

a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="accordion">

	<h2 class="current">First pane</h2>

	<div class="pane" style="display:block">

		<img src="images/javascri.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0" />

		<h3>Lorem ipsum dolor</h3>

		<p>
			<strong>Fusce semper, nisi nec pellentesque sollicitudin.</strong>
		</p>

		<p style="clear:both">
			Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.
		</p>

	</div>

	<h2>Second pane</h2>

	<div class="pane">
		<h3>Vestibulum ante ipsum</h3>

		<p>
			Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.
		</p>
	</div>

	<h2>Third pane</h2>

	<div class="pane">
		<h3>Curabitur vel dolor</h3>

		<p>
			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.
		</p>
	</div>	
</div>