Skip to content
Ocak 18, 2007 / Erkan

Tablosuz Katlanır Menü (Collapsible Menu Tableless)


Katlanır menüler menüdeki öğeleri gizlemek ve görüntü kirliliğinden kurtulmak için çok iyi bir seçimdir. Bugünkü yazımda JavaScript ve CSS yardımıyla tablosuz (tableless) katlanır menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Hazırlayacağımız katlanır menü aşağıdaki resimlere benzeyecek.

Katlanır Menü Görüntüsü 1

Katlanır Menü Görüntüsü 2

Bayram ve yılbaşı hediyesi olarak kabul edersiniz inşallah :)

Tablosuz (Tableless) katlanır menümüzü hazırlamak için öncelikle en çok kullandığımız HTML düzenleyicimizi açıyoruz ve daha sonra aşağıdaki kod bloklarını bir bir eklemeye başlıyoruz.

Menümüz İçin Style’imizi oluşturalım

Aşağıdaki CSS kodlarını HTML dosyamızın <head></head> etiketleri arasına ekleyelim.

<style type="text/css">
#MenuTasiyici{
margin: 0;
padding: 0;
width: 320px;
font-family: arial, tahoma sans-serif;
}
#MenuTasiyici .Baslik{
background-color: #245EDC;
height: 22px;
width: 320px;
font-size: 12px;
font-weight: bold;
color: #E4EBFA;
line-height: 22px;
margin-bottom: 1px;
}
#MenuTasiyici .Baslik span{
padding-left: 8px;
}
#MenuTasiyici .OgeBaslik{
background-color: #ABC1F1;
height: 20px;
line-height: 20px;
font-weight: bold;
font-size: 11px;
padding-left: 7px;
cursor: pointer;
border-bottom: solid 1px #245EDC;
}
#MenuTasiyici .OgeGrup{
width: 100%;
color: #004E98;
}
#MenuTasiyici .Oge{
background-color: #F5F5F5;
height: 20px;
line-height: 20px;
font-size: 11px;
padding-left: 10px;
border-bottom: solid 1px #D9DAD8;
}
</style>

Evet artık menümüz için bir style’miz mevcut. Bundan sonra menümüzün açılıp kapanmasını sağlayacak JavaScript kodunu yazabiliriz.

Menümüze ait JavaScript kodumuzu yazalım.
Aşağıdaki kod bloğunu style’limizin hemen altına yazalım.

<script type="text/javascript">
function OgeAcKapa(oge)
{
if (document.getElementById(oge).style.display == 'none')
{
document.getElementById(oge).style.display = '';
}
else
{
document.getElementById(oge).style.display = 'none';
}
}
</script>

Evet artık katlanır menümüzü canlandıracak JavaScript kodumuzuda yazdık ve HTML dosyamıza ekledik. Bundan sonra yapmamız gereken tablosuz (tableless) menü kodlarımızı yazmak.

Katlanır Menümüze ait HTML kodlarımızı yazalım.
Ağaşıdaki kod bloğunu HTML dökümanımızın <body></body> etiketleri arasına ekleyelim.

<div id="MenuTasiyici">
<div class="Baslik"><span>Katlanır Menü</span></div>
<div class="OgeBaslik" onclick="OgeAcKapa('og1');">
WebTasarimcisi.Com
</div>
<div id="og1" class="OgeGrup" style="display: none;">
<div class="Oge">Ana Sayfa</div>
<div class="Oge">İlanlar</div>
<div class="Oge">Oylama</div>
</div>
<div class="OgeBaslik" onclick="OgeAcKapa('og2');">
KolayUrl.Com
</div>
<div id="og2" class="OgeGrup" style="display: none;">
<div class="Oge">Ana Sayfa</div>
<div class="Oge">Hakkında</div>
</div>
<div class="OgeBaslik" onclick="OgeAcKapa('og3');">
Blog Kardeşliği
</div>
<div id="og3" class="OgeGrup" style="display: none;">
<div class="Oge">Bağ1</div>
<div class="Oge">Bağ2</div>
<div class="Oge">Bağ3</div>
</div>
</div>

Evet artık HTML dökümanımızı test edebiliriz. Elimizde geliştirilmeyi bekleyen oldukça hoş bir katlanır menümüz oldu.

Örnek HTML dosyası:

http://www.webtasarimcisi.com/erkana/katlanir_menu.zip

İyi günlerde kullanmanız dileğiyle…

20 Yorum

Yorum Yapın
  1. KoNeL / Şub 6 2007 2:45 pm

    olmuyor :(
    yaw kardeş bu kodları oldugu gibi biyere koysak olmaz mı :S

  2. KoNeL / Şub 6 2007 2:46 pm

    bana ulaşırsan memnun olurum professional_akrep@hotmail.com

  3. Erkan / Şub 7 2007 11:12 pm

    Yukarıdaki kodları gerekli yerlere kopyalayıp yapıştırırsanız çalışacaktır.

    Eğer kodlarda sorun yaşıyorsanız çift tırnak (“) işretlerini silip yeniden yazınız.

  4. sukdal / Mar 2 2007 3:48 pm

    Menü için teşekkür ederiz harika olmuş, ancak bu kadar emek vermişsiniz bir de açılan seçeneğe de tıkladığımızda altına da tekrar alt menüler açılabilirse ne diyeyim iyinin mükemmeli olacak ve sayfamda kullanabileceğim müthiş olacak.
    Teşekkürler ve başarılar.

  5. Sokak Kedisi / Mar 24 2007 5:03 pm

    Menü scriptinin çalışmamasının sebebi, javascriptin girişindeki ve sonundaki taglarında yatıyor. O tagları kaldırır ya da biçiminde düzeltirseniz, menü sorunsuz çalışıyor.

  6. Sokak Kedisi / Mar 24 2007 5:10 pm

    Yoruma girdiğim HTML tagları sayfaya eklenirken otomatikman silinmiş. O nedenle, ne demek istediğim anlaşılamıyor. Şöyle anlatayım: Javascriptin girişine ve sonuna konan ve eski tarayıcıların javascripti görmemesini sağlayan işaretler hatalı. Onları ya kaldırın ya da giriş tagındakinin sonuna eklenmiş olan iki adet kesme işaretini silin. Ayrıca tire işareti de ( – ) bir değil iki tane olacak. Hem girişte hem sonda. Umarım bu kez anlaşılabilir anlattığım. Bu kez farklı yazıyorum kodu, belki silinmez. <!– (bu açılışa) // –> (bu da kapanışa) konacak.

  7. Erkan / Mar 24 2007 7:00 pm

    Selam Sokak Kedisi,

    Uyarın için teşekkür ederim sanırım wordpress oradaki cift tire işaretini kabul etmiyor. Kod’da düzenleme yapıp oradaki çift tire işaretini kaldırdım. Ayrıca menünün kodlarını yukarıda vermiş olduğum bağlantıdaki dosayayı indirerekte görebilirsiniz.

  8. kartal / Nis 3 2007 9:26 pm

    kodlar için tşkler… güzel bir menü stili ama bi sıkıntım var…seçeneklere link ekliyorum…çalıştırdığım zaman hem eklediğim seçenek verdiğimi linke giriyo..hem de onun altında ki seçenekler giriyo… böyle bir sıkıntım var… ilgilenirsen sevinirim…

  9. pirate / Nis 3 2007 9:28 pm

    kartal ın yaşadığı sıkıntıyı bende yaşıyorum… lütfen yardım eder misin en kısa zamanda…

  10. kartal / Nis 3 2007 9:53 pm

    tmm sorunu buldum…:D ufak bir şeymiş :D sorun yok şimidilik :D tekrar tşkler

  11. Erkan / Nis 3 2007 11:17 pm

    Merhaba kartal,

    Sorunu ve nasıl düzelttiğiniz yazarsan diğer kullanıcılar da bilgilenmiş olur.

  12. kartal / Nis 5 2007 9:46 am

    link ekleme koldarının sonuna kodu yazmadığım için sorun yaşamıştım… bendeki sorun böyleydi. Arkadaşların ki de böyle olabilir belki …

  13. M. Bülent YILDIZ / Nis 7 2007 2:24 pm

    Peki bunu;
    Açılmasını üstediğimiz menüye tıkladıgımız zaman eger önceden başka bir menüye tıklamışsak onun kapatılıp yeni tıkladımızın açılmasını nasıl sağlarız.
    Teşekkürler.

  14. Hakan / Nis 17 2007 5:07 pm

    Bu Manude Itemlara link veriyorum iyi guzelde..!! Fram kullanmam gerekiyor..Ortadaki frame nasıl link vericem onu beceremedim…yardım edermisiniz….

  15. Web / May 4 2008 4:28 pm

    Güzel bi JS CSS uygulaması teşekkürler…

  16. dost / Oca 4 2009 1:05 am

    Kardes aldim kodlari yapistirdim direk calisti tesekkurederim. Allah razi olsun bilgiyi paylasmak cok guzel allah muffak etsin saygilar herkeze

Trackbacks

  1. Türkçe CSS kaynakları | Blog ve Wolkanca - işimiz gücümüz blog!
  2. 15 adet CSS dersi { Türkçe Kaynak } | Hayalmeyal
  3. Türkçe CSS Kaynakları ve Yazıları « WebeGe Blog
  4. Türkçe CSS kaynakları | Blog Wolkanca

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: