14 Ekim 2008 - 17:21Digg benzeri açılır menü yapımı ( Xhtml & Css )
Merhaba arkadaşlar
Dün akşam kendi halimde xhtml ve css ile uğraşırken yaptığım şablonda kategorileri digg’de olduğu gibi oluşturmak istedim ve bir araştırmadan sonra nasıl yapılacağanı da buldum,kendim yaptım şimdi de sizinle paylaşmak istedim.
Digg Menü Örnek
Bahsettiğim şey aynen üsteki menü normalde soldaki gibi duracak ve üstüne tıklandığı zaman sağdaki konuma gelecek,neyse anlatmaya başlıyalım 
Adım 1 : Html Kodlama
Html kodlamaya başlıyoruz burada kullanacağımız yapı iki adet düzensiz liste ( <ul> ) etiketinden oluşuyor.(Anamenü ve alt menü için )
Anamenü için menu Alt menü için ise submenu sınıfı kullanıldı.
Alttaki Html kodunu yeni bir döküman içine kopyalayıp kaydedelim.
<ul class=“menu”>
<li><a href=“p1.html”>İnceleme</a></li>
<li><a href=“p2.hmtl”>İnternet </a></li>
<li><a href=“p3.hmtl”>Wordpress</a></li>
</ul>
</ul>
</div>
Adım 2 : Css Kodlama
Anamenü düğmesini şekillendirmek için kullanacağımız css kodlar :
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:4px;
height:30px;
}
#middlebar .menu li {
background:url(lm.png) left top no-repeat;
height:30px;
float:left;
margin-right:10px;
}
#middlebar .menu li a{
color:#3b5d14;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(rm.png) right top no-repeat;
}
#middlebar .menu li a:hover{
color:#666666;
}
… ve tıklandığı zaman açılacak olan altmenüyü şekillendirmek için gerekli kodlar :
border:solid 1px #c9dea1;
border-top:none;
background:#FFFFFF;
position:relative;
top:4px;
width:150px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
}
#middlebar ul .submenu li{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
border-top:solid 1px #DEDEDE;
}
#middlebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#middlebar .submenu li a:hover{
background:#e3edef;
}
Adım 3 : Altmenüyü Açmak/Kapamak için gereken JavaScript kodlama
Anamenü butonuna tıklandığında altmenü kısmının açılması için aşağıdaki kodları kullanacağız.
var myLayer = document.getElementById(layer);
if(myLayer.style.display==”none” || myLayer.style.display==”"){
myLayer.style.display=”block”;
} else {
myLayer.style.display=”none”;
}
}
Hatırlarsanız 1. adımın 3. satırında şöyle bir kod kullanmıştık :
işte bu satırda son yazdığımız JavaScript kodunu çağırdık bu JavaScipt kodu sayesinde Menü bağlantısına tıkladığımızda Altmenü satırları devreye girecek.
Bukadar …
Örnek Kodları buradan indirebilirsiniz….
Not : Arkadaşlar bu ders burada yayınlanmış ve en başta belirttiğim gibi benim işime yaradı umarım sizin de işinize yarar.
Not 2:İngilizcem pek iyi değildir ama dilimin döndüğünce anlatmaya çalıştım,eğer ki bir hatamı yakaladıysanız veya anlamadığınız bir yer varsa yorum kısmını kullanarak belirtirseniz hemen düzeltir veya yine dilimin döndüğünce tekrar anlatmaya çalışırım.
Yorum yok | Kategori: Web Dersleri | Yazar: HsnGlsn
