Geri git   Van.GEN.TR Forum | Yerel Van Forumu > Bilgisayar > CSS

CSS CSS nedir, CSS örnekleri, çözümleri

Cevapla
 
Konu Araçlarý Stil
Alt 24/04/07, 00:12   #1
gokhanaygun
Tuðgeneral
 
gokhanaygun - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Apr 2007
Bulunduðu yer: VAN
Yaş: 36
Mesajlar: 925
Tecrübe Puanı: 26 gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold gokhanaygun is a splendid one to behold
Standart CSS ile Menü Yapmak III - Dikey Açýlýr Menüler

Bu tip menüleri javascript ile yapabiliriz. HTML ve CSS ile de daha esnek, kolay düzenlenebilir ve bir çok web tarayýcýsý tarafýnda desteklenen(IE6 ve öncesi dahil) açýlýr menü yapýlabilir. Aslýnda javascript’e ihtiyaç olmamasýna karþýn IE7′den önceki sürümler için javascript kodu gerekmektedir.

Açýlýr menü yapmak için daha önceki menü örneklerinde olduðu gibi sýralanmamýþ listeleri(<ul>) kullanacaðýz. Buradaki fark alt kategorilerin yani üzerine gelince açýlacak menünün bir alt sýrlanmýþ liste olarak eklenmesidir.

<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">þžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dýþý Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul> <li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>


Ýlk olarak satýr baþý boþluklarýný ve imgeleri kaldýralým.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}


Sonra ilk linkleri göreceli olarak konumlandýrmalýyýz. Bu konumlandýrma aslýnda ikinci kademe açýlacak menüye mutlak konumlandýrma yapýlmasý için kullanýlýr.

ul li {
position: relative;
}
Bir sonraki adýmda da ikincil açýlan menüleri konumlandýrmak olacaktýr. Her birinci linke karþýlýk gelen ikincil açýlýr menüler ilkinin saðýna konumlandýrýlmalýdýr. Bunun için soldan 149px deðeri verilir. 1 piksel sola kaydýrýlýr ki fare ilk linki üzerinde ikinci linkin üzerine glemeden kaybolmasýn. Ayrýca ikincil linklerin ilk sayfa açýldýðýnda görünmemesi için display:none özelliði atanýr.

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}


Açýlýr menü yapýsýný oluþturmuþ olduk þimdi linkleri güzelleþtirip menü haline getirmek için önceki menüleri yaparken uyguladýðýmýz kodlarý uygulayalým. Linklerin kendine has alanlarýný tanýmlamak için display:block özeliðini kullanalým. Linklerin altýndaki çizgiyi kaldýrmak için text-decoration:none özelliðini kullanalým. Linkler arasýna mesafe vermek için padding verelim. Birde bir zemin rengi tanýmý ver kenarlýk tanýmý yapalým. Üstteki linkin alt kenarlýðý ile alttaki linkin üst kenarlýðý üst üste bineceðinde alt kenarlýk deðerini sýfýrlayalým.

ul li a {
display: block;
text-decoration: none;
background-color: #E2E2E2;
padding: 5px;
border:1px solid #000;
border-bottom:0;
}
Bu kodu yazdýðýmýzda IE linkler arasýna boþluk koyacaktýr(IE7 de hala bu sorun devam ediyor) bu durumu düzeltmek için:

/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */


En alttaki çizgimiz eksik kalmamasý için ilk link ul’sinin alt kenarlýk taným yaparýz.

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00;
}


Birincil menü görünümü tamamlandý ancak ikincil menüler görünmüyor. Ýkincil menüleri göstermek için:

li:hover ul { display: block; }
Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da IE7′den öncesi bu kodu desteklemez.

Internet Explorer 7. versiyonuna kadar :hover pseudo sýnýfýný sadece linklerde (<a>) uygulanmasýný destekler diðer elementlerde bu özelliðin kullanýmýný desteklemez.

Peki menümüz böyle mi kalacak hayýr. IE6 ve altý için bir javascript kodu yazacaðýz.

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Bu çözümü bize kazandýran arkadaþlara teþekkürü bir borç biliriz ve linkini de yazarýz.

Ayrýca aþaðýdaki kodu da eklemeliyiz.

li:hover ul, li.over ul{ display: block; }
Ayrýca kod daki<ul id="menu" > ve javascriptteki navRoot = document.getElementById("menu"); ayný olmasýna dikkat edelim.
gokhanaygun isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 187
Alt 01/03/08, 22:14   #2
Neutralizer
Yasaklý kullanýcý
 
Neutralizer - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Jan 2008
Bulunduðu yer: Ýstediðin yerden
Mesajlar: 1.890
Tecrübe Puanı: 0 Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute Neutralizer has a reputation beyond repute
Standart

paylaşım için sağol
Neutralizer isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 317
Takýmýnýz:
Alt 14/03/08, 20:38   #3
Bur2
Korgeneral
 
Bur2 - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Oct 2007
Bulunduðu yer: evde :)
Yaş: 45
Mesajlar: 2.545
Tecrübe Puanı: 50 Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute Bur2 has a reputation beyond repute
Standart

paylaşım için tşkler
__________________

[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]

[Bu Adresi (link) Görme Yetkiniz Yok BEDAVA'ya Üye Ol Sitemizden Faydalan....]


Bur2 isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 497
Takýmýnýz:
Alt 04/08/08, 09:37   #4
firari
Mareþal
 
firari - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: Sep 2007
Mesajlar: 5.839
Tecrübe Puanı: 104 firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute firari has a reputation beyond repute
Standart

tşkler...
__________________



firari isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Konu Sayýsý: 613
Takýmýnýz:
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Konu Araçlarý
Stil

Yetkileriniz
Yeni Mesaj yazma yetkiniz Aktif deðil dir.
Mesajlara Cevap verme yetkiniz aktif deðil dir.
Eklenti ekleme yetkiniz Aktif deðil dir.
Kendi Mesajýnýzý deðiþtirme yetkiniz Aktif deðildir dir.

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Gitmek istediğiniz klasörü seçiniz


Bütün Zaman Ayarları WEZ +3 olarak düzenlenmiştir. Şu Anki Saat: 00:50 .


Powered by vBulletin
Copyright © 2000-2007 Jelsoft Enterprises Limited.
Sitemap
6, 5, 3, 7, 8, 9, 10, 11, 12, 13, 14, 15, 113, 16, 17, 18, 19, 81, 20, 27, 22, 23, 24, 25, 26, 48, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 43, 136, 40, 58, 45, 42, 44, 46, 47, 53, 54, 55, 56, 57, 59, 60, 70, 61, 62, 63, 64, 65, 66, 68, 69, 71, 72, 74, 75, 76, 77, 78, 79, 80, 82, 83, 96, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 98, 97, 100, 101, 102, 103, 106, 104, 105, 112, 109, 108, 107, 110, 111, 114, 115, 118, 116, 117, 119, 148, 154, 124, 165, 122, 120, 123, 121, 150, 153, 125, 128, 129, 131, 132, 133, 134, 135, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 151, 149, 202, 175, 164, 152, 167, 155, 156, 157, 158, 159, 160, 161, 162, 163, 195, 169, 166, 168, 170, 171, 172, 199, 174, 173, 196, 200, 176, 177, 180, 178, 179, 182, 189, 187, 184, 186, 191, 192, 193, 194, 197, 198, 201, 203, 229, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 236, 231, 232, 233, 234, 235, 237, 240, 239, 241, 243, 242, 244,