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 | Kategori: Web Dersleri | Yazar: HsnGlsn

6 Ekim 2008 - 16:26#1 Seçme 5

Merhaba arakadaşlar,yaklaşık bir aydır yazı yazmıyorum aslında yazmak istiyorum yazacak konum var fakat zaman gerekiyor ve ben de összede olduğum için pek zaman bulamıyorum o yüzden de böye oldu fakat bundan sonra boş vaktime uygun düşen yazıları yazacağım:) Yazıma geçeyim;

Arkadaşlar yazı yazacak zaman bulamasam da diğer blogları takip edebilecek kadar zamanın oluyor ben de yazı yazamadığım durumlarda diğer bloglardan hoşuma giden yararlı yazıları sizinle paylaşmaya karar verdim ve bu yazıları da “Seçme 5″ isimli bir kategoride arşivleyeceğim.

Bu hafta okuduğum ve hoşuma giden,yararlı olduğunu düşündüğüm yazılar şöyle;

1-JQuery ile Şık Bir Teknik

Volkan Görgülü‘nün Fatih Turan’ın bloğunda konuk yazar olarak hazırladığı bu yazıda şık bir şekilde sayfanıza açılır kapanır bilgi alanı yapabilirsiniz.

2-DreamWeaver Eğitim Serisi

Orçun İlbeyli’nin hazırladığı yeni başlayacakların Dw hakkında çok hoş bilgiler alabileceğini düşündüğüm bir video serisinin ilk videosu.(Orçun’a da başarılar dileyelim (: )

3-Web Tasarımına Başlarken!

Ahmet Ertürk’ün web tasarımına yeni başlayacakların neler yapması ve yapmaması gerektiğini anlattığı yazısı.

4-Planlı Dosyalama

Can Kaymaz’ın Planlı dosylamanın önemi hakkındaki yazı dizisi.Dizinin diğer yazılarını da(Röportajlarını da) okumanızı tavsiye ederim.

5-Firefoxda Resim Kullanmadan Oval Köşeler Yapmak

Atib3rk’in hazırladığı bu yazıda grafiklere ihtiyaç duymadan oval köşeli tasarım yapımını öğrenebilirsiniz yalnız başlıktan da anlaşılacağı üzere sadece firefox için geçerli (:

Diğer yazılarımda görüşmek üzere.

3 Yorum var | Kategori: Seçme 5 | Yazar: HsnGlsn