Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

JS Sekmeli Menü Yapımı

Son bir haftadır içimde blog'un kullanımı açısından yenilik yapma isteğim vardı. Bunun ne olabileceğini düşünürken paylaşımların kaç kere okunduğunu göstermeye karar verdim. Ayrıca fazla yer kaplamaması açısındanda bunu sekmeli (tabbed) menüler ile yapmaya karar verdim. Bu paylaşımda da bu menünün nasıl yapılacağını anlatmaya çalışacağım.

Giriş kısmında da anlattığım gibi paylaşımlarını okuma sayısı için gerekli düzenlemeleri Cuma gününden hazırlayıp sayaçların işlemesini başlatmıştım. Dün (pazar) ise sağ tarafından gereğinden fazla uzamaması ve derli toplu görünmesi açısından sekmeli menülerin nasıl yapılabileceğini araştırdım.

İnternette yaptığım aramalar, incelediğim kodlar arasında en başarılısını, DynamicDrive'da bulabildim. Kodlarını ve gerekli dosyaları aşağıda veriyorum.

İl başta bize gerekli olan tabcontent.js isimli dosyayı bilgisayarınıza aynı isimle kaydedin. (Sağ tık + Farklı Kaydet / Save As)

Daha sonra aşağıdaki kodları da bilgisayarınıza tabcontent.css ismiyle saklayınız.

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 sayfamızda çalışacak ve görünecek içeriğin olduğu index.htm sayfası:

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 menü1 tabı içeriği

</div>

<div id="Menu2" class="tabcontent">

Burada menü2 tabı içeriği

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

Paylaşım ile ilgili örnek çalışmayı sağ sütundan veya buradan görebilirsiniz.
Ayrıca konu ile ilgili ayrıntılı ve farklı seçenekleri DynamicDrive'dan temin edebilirsiniz.

Javascript/AjaxAyberk Atasay2 Şubat 2009, PazartesiEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

LuCiFeR
2 Nisan 2009, Perşembe

abi aynını yaptım hatta ornektekı css koduyla beraber ındexı de cektım ama olmuyor bos cıkıyor 2 menude

enes
6 Mart 2009, Cuma

saol abicim.bilgilerin icin daha taze bir tasarimciyim yani ögrenme aşamasındayım.Daha fazla bilgiverici ve ögrenkli calışma görmek beni mutlu eder.Tekrar Tekkür ederim.