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.
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…
olmuyor :(
yaw kardeş bu kodları oldugu gibi biyere koysak olmaz mı :S
bana ulaşırsan memnun olurum professional_akrep@hotmail.com
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.
[...] Tablosuz Katlanır Menü [...]
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.
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.
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.
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.
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…
kartal ın yaşadığı sıkıntıyı bende yaşıyorum… lütfen yardım eder misin en kısa zamanda…
tmm sorunu buldum…:D ufak bir şeymiş :D sorun yok şimidilik :D tekrar tşkler
Merhaba kartal,
Sorunu ve nasıl düzelttiğiniz yazarsan diğer kullanıcılar da bilgilenmiş olur.
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 …
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.
Bu Manude Itemlara link veriyorum iyi guzelde..!! Fram kullanmam gerekiyor..Ortadaki frame nasıl link vericem onu beceremedim…yardım edermisiniz….
Güzel bi JS CSS uygulaması teşekkürler…