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

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çinse submenu sınıfı kullanıldı.

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.

<div id=“middlebar”>
<ul class=“menu”>

<li><a href=“#” onclick=“javascript:showlayer(’sm_1′)”> Kategoriler</a></li>

<ul class=“submenu” id=“sm_1″>
<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 :

ul, li{margin:0; border:0; padding:0; list-style:none;}
#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 :

#middlebar ul .submenu {
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.

function showlayer(layer){
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 :

<li><a href=“#” onclick=“javascript:showlayer(’sm_1′)”> Kategoriler</a></li>

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.

2 Yorum var | Etiketler: Web Dersleri | Yazar: HsnGlsn

Yorumlar:

  1. gNcWebmaster diyorki;
    10 Ara 2008 - 15:09

    Güzel bir anlatım olmuş ben denedim oluyor :) Bende dersi sizi kaynak göstererek yayınlamak istiyorum Türkçesini? Başarılar

  2. HsnGlsn diyorki;
    12 Ara 2008 - 3:59

    Yayınlayabilirsin tabiki :)

Yorum yaz





Yorumunuz