HedeHödö

Digg benzeri açılır menü yapımı ( Xhtml & Css )

HsnGlsn — Tue, 14 Oct 2008 14:21:29 +0000

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 (

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.

“middlebar”>

menu”

“#” onclick=“javascript:showlayer(’sm_1′)”> Kategoriler

“submenu”

id=

“sm_1″

“p1.html”>İnceleme

“p2.hmtl”>İnternet

“p3.hmtl”>Wordpress

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.

Hatırlarsanız 1. adımın 3. satırında şöyle bir kod kullanmıştık :

“#” onclick=“javascript:showlayer(’sm_1′)”> Kategoriler

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.

#1 Seçme 5

HsnGlsn — Mon, 06 Oct 2008 13:26:20 +0000

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.

Google Chrome Wordpress teması Türkçe

HsnGlsn — Fri, 12 Sep 2008 20:21:54 +0000

Arkadaşlar nette dolaşırken şu temayla karşılaştım,Wordpress için Google Chrome tasarımı yapılmış ben de dedim bari Türkçe’ye çevireyim temaya bir katkım olsun

Önizleme

Ana özellikler

Çift sütunlu
Bileşen destekli
Gravatar destekli
İe 6/7 , Firefox,Opera,Chrome ve Safaride denenmiş.(Ben Safari’de denemedim ama diğerlerinde sorun yok (: )
Xhtml&Css standartlarına uygun.

Önizleme

Orjinal Önizleme | Türkçe önizleme şuan veremiyorum.

Temanın Türkçe versiyonunu bu bağlantıyı kullanarak indirebilirsiniz.

İlk defa tema çevirisi yaptığım mutlaka hatalarım vardır bunları yorum kısmına belirtirseniz düzeltmeye çalırşım

Kolay gelsin

Özet

HsnGlsn — Thu, 11 Sep 2008 17:09:51 +0000

Yaklaşık bir haftadır bloğa birşey yazmıyorum,yazmak istiyorum ama yazamıyorum ben de dedim ki bari bu bir haftayı madde madde özet geçeyim

Uyku problemim çözüldü artık geceleri uyuyabiliyorum.
Final dershanesine kayıt oldum.(Öss kategorisinde bir aksilik olmazsa Birey demiştim biliyorum ama demekki bi aksilik çıkmış (: )
Ramazan geldi zayıfladım,zateb çırpı gibiydim daha da eridim hayır adam gibi oruçta tutmuyorum ne diye zayıflıyorum ben de bilmiyorum.
Sinemaya gittim dün Dünyanın Merkezine Yolculuk’a,film çok süper tavsiye ederim.
Olasılıksız(Adam Fewer)’ı okumaya başladım.
Yarın saat 9:00 da ilk deneme sınavım var ve bundan başka yazacak brişeyim yok sanırım.

Görüşürüz

Kim toplattı magicleri ?

HsnGlsn — Thu, 04 Sep 2008 21:30:40 +0000

Bu akşam canım magic cup çekti sevgili ziyeretçi hem de öyle bir çekti ki sorma gitsin 8 aylık hamilenin kışın ortasında erik,çöldeki bedevinin su,bi çevrecinin kutup ayılarının rahatça uymasını hatta küçük bebeğin elinden alınan elma şekerini geri istemesi gibi ben de bi panda magic cup yemek istedim ama olmadı saatlerce evet saatlerce yaklaşık 1.5 saat aramama rağmen kocaman(ufak bi köye nazaran) Zonguldak’ta bi tane bile magic cup bulamadım ayaklarıma kara sular indi ama bulupta yiyemedim o magic cup’ı ama çok merak ettim acaba kim neden tüm şehirdeki magic cupları toplattı ?