JS Sekmeli Menu Yapimi
Son bir haftadir icimde blog'un kullanimi acisindan yenilik yapma istegim vardi. Bunun ne olabilecegini dusunurken paylasimlarin kac kere okundugunu gostermeye karar verdim. Ayrica fazla yer kaplamamasi acisindanda bunu sekmeli (tabbed) menuler ile yapmaya karar verdim. Bu paylasimda da bu menunun nasil yapilacagini anlatmaya calisacagim.

Giris kisminda da anlattigim gibi paylasimlarini okuma sayisi icin gerekli duzenlemeleri Cuma gununden hazirlayip sayaclarin islemesini baslatmistim. Dun (pazar) ise sag tarafindan gereginden fazla uzamamasi ve derli toplu gorunmesi acisindan sekmeli menulerin nasil yapilabilecegini arastirdim.

Internette yaptigim aramalar, inceledigim kodlar arasinda en basarilisini, DynamicDrive'da bulabildim. Kodlarini ve gerekli dosyalari asagida veriyorum.

Il basta bize gerekli olan tabcontent.js isimli dosyayi bilgisayariniza ayni isimle kaydedin. (Sag tik + Farkli Kaydet / Save As)

Daha sonra asagidaki kodlari da bilgisayariniza tabcontent.css ismiyle saklayiniz.

tabcontent.css
.shadetabs{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 12px Verdana;list-style-type: none;text-align: left;}
.abtblog {border:1px solid #ccc; margin-bottom: 1em; padding: 10px;background: #fff; line-height: 150%;}
.shadetabs li{display: inline;margin: 0;}
.shadetabs li a{text-decoration: none;position: relative;z-index: 1;padding: 3px 7px;margin-right: 3px;border: 1px solid #ccc;color: #0c386e;background: #f1f1f1;}
.shadetabs li a:visited{text-decoration: none;position: relative;z-index: 1;padding: 3px 7px;margin-right: 3px;border: 1px solid #ccc;color: #0c386e;background: #eee;}
.shadetabs li a:hover{color: #CC0000;background: #f7f7f7;}
.shadetabs li a.selected{color:#000;position: relative;background: #fff;}
.shadetabs li a.selected{color:#000;border-bottom-color: white;background: #fff;}
.shadetabs li a.selected:hover{color:#000;text-decoration: none;background: #fff;}
.tabcontent{display:none;}
@media print {.tabcontent {display:block !important;}}


Son olarak sayfamizda calisacak ve gorunecek icerigin oldugu index.htm sayfasi:

index.htm
<!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" lang="TR" xml:lang="TR"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<meta http-equiv="Content-Language" content="tr" />
<title>Tab Menu</title>
<link href="tabcontent.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tabcontent.js"></script>
</head>
<body>
<ul id="ABT-Tab" class="shadetabs">
<li><a href="#" rel="Menu1" class="selected">Menu 1</a></li>
<li><a href="#" rel="Menu2">Menu 2</a></li>
</ul>
<div class="abtblog">
<div id="Menu1" class="tabcontent">
Burada menu1 tabi icerigi
</div>
<div id="Menu2" class="tabcontent">
Burada menu2 tabi icerigi
</div>
</div>
<script type="text/javascript">
var Menuler=new ddtabcontent("ABT-Tab")
Menuler.setpersist(true)
Menuler.setselectedClassTarget("link") //"link" or "linkparent"
Menuler.init()
</script>
</body>
</html>


Paylasim ile ilgili ornek calismayi sag sutundan veya buradan gorebilirsiniz.
Ayrica konu ile ilgili ayrintili ve farkli secenekleri DynamicDrive'dan temin edebilirsiniz.
February 2, 2009
Ayberk Atasay
Javascript/Ajax
2 yorum