jQuery ile basit tab menü yapımı

Aslında uzun zaman­dır yaz­mak iste­di­ğim bir yazıydı, ama tema falan der­ken şimdiye kıs­met oldu… Neyse efe­nim konuya geçe­lim; Bil­di­ği­niz gibi tab menü­ler blo­gu­nu­zun yan menü­sün­deki kala­ba­lığa bire­bir geli­yor. Örne­ğin, kate­go­ri­leri, popü­ler yazı­ları v.b. gibi şeyleri, alt alta diz­mek yerine yan yan dizi­yor, böy­lece alan­dan ve yan menü­deki o kala­ba­lık­tan kurtuluyorsunuz.

Ben de şimdi hemen şu yan menüde gör­müş oldu­ğu­nuz gib bir tab menü­nün nasıl yapıl­dı­ğını anla­ta­ca­ğım siz­lere, bir­kaç basit adımda biraz HTML, biraz CSS ve biraz da jQu­ery ile blo­gu­nuza bir tab menü yapabileceksiniz.

Önce­likle tab menü için bir HTML oluşturalım…

<!-- tab menu starts -->
	<ul class="tabNav">
	<li class="current"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
 
</ul>
<div class="tabContainer">
 
	<!-- 1st tab -->
	<div class="tab current">	
<ul>
Birinci tab menü içeriği.
</ul> 
	</div>
 
	<!-- 2nd tab -->
	<div class="tab">
<ul>	
İkinci tab menü içeriği.
</ul>
	</div>
 
	<!-- 3rd tab -->
	<div class="tab">
<ul>
Üçüncü tab menü içeriği.
</ul>
	</div>
 
</div><!-- tab menu ends -->

Daha sonra da CSS ile biraz şekil verelim.

/*tab menü*/
ul.tabNav { float: left; list-style: none; width: 100%; }
ul.tabNav li { float: left; margin: 0 4px 0 0; padding: 4px 0 0;}
ul.tabNav li.current { padding-top: 0; }
ul.tabNav a { background: #EEE; border: 2px solid #CCC; border-width: 1px 1px 0; color: #333; display: block; padding: 4px 4px 5px 4px; text-decoration: none;}
ul.tabNav li.current a { background: #EEE; border-top: 2px solid #CCC;border-right: 2px solid #CCC;border-left: 2px solid #CCC; padding: 6px; }
div.tabContainer { clear: both; float: left; width: 100%; }
div.tabContainer div.tab {  background:#FFF; border: 2px solid #CCC; color: #000; display: none; padding: 10px;}
ul.tabNav a:hover {text-decoration:none;}
div.tabContainer div.current { display: block; background:#FFF;}
div.tab p:last-child { margin-bottom: 0; }
div.tabContainer ul li {background:#FFF;padding:0px;margin-left:15px;margin-bottom:1px;list-style-type:square;list-style-image:url(img/li.png);list-style-position:outside;}

Bun­ları da yap­tık­tan sonra, tab menü­mü­zün iske­le­tini yapı­lan­dır­mış olduk, görün­tüsü aynı benim blo­gum­daki gibi ola­cak­tır, artık siz CSS kıs­mını iste­ği­nize göre düzen­le­ye­bi­lir­si­niz. Fakat jQu­ery olma­dan tab menü­müz çalış­ma­ya­cak­tır tabii ki. Önce­likle şura­dan jQu­ery’i indi­ri­yo­ruz ve şura­dan da tab menü için hazır­lan­mış js dos­ya­sını indiriyoruz.

Daha sonra header.php (WordP­ress için) dos­ya­nızı açın ve head tagi­nin içe­ri­sine aşa­ğı­daki iki kodu yerleştirin.

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

NOT: js dos­ya­la­rı­nın header.php ile aynı dizinde olması gere­kir. Eğer değilse, src kıs­mın­dan sonra tır­nak işa­ret­leri ara­sına dos­ya­la­rın bulun­duğu dizini yazın.

İşte bu kadar basit, uma­rım yazı yete­rince açık­la­yıcı olmuş­tur. :)

Paylaş:Bu yazıyı beğendiyseniz Twitter -veya Facebook'da paylaşabilirsiniz!

Bu yazıya 1 yorum yapılmış:

  1. AndroidMedya

    27 Kasım 2011 05:41

    Yeni tasa­rı­mı­mı­zın hazır­lık­la­rına baş­la­dık allah izin verirse yeni tasa­rımda bu maka­le­niz­den yarar­la­na­ca­ğım teşekkürler.

    Cevapla

Siz de yorum yapmak ister misiniz?