|
Css Dikey Menü Yapımı
|
| chatlaq |
Mesaj Tarihi 08-03-2010 23:00
|
Yönetici
Mesaj Sayısı: 1139
Katılım Tarihi: 31.12.09
|
Arkadaşlar bildiğiniz gibi sitelerin vazgeçilmezidir menüler. Kimi Css'dir kimi Flash'dır.
Burda css ile güzel görünümlü menüler hazırlamayı göstereceğim. Tabi anlatılanlar bazılarına basit bazılarına zor gelebilir. Ana mantığı göstermeye çalışacağım.
css menü yapmak için html'de var olan UnOrdered List yani sırasız liste kullanacağız. Bkz:
Şimdi menümüzü yazalım
 Kod<ul class="cssmenu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
html kodlar tamam şimdi asıl iş buna Css(Cascading Style Sheet) ile stil vermek
temamızın styles.css dosyasını açıyoruz ve aşağıdaki kodları eklemeye başlıyoruz.
ilk olarak liste başındaki noktaları ve boşlukları kaldırıyoruz
Kod ul.cssmenu {
list-style-type:none;
margin:0;
padding:0;
}
daha sonra linklerin alacağı halleri düzenliyoruz(mouse üzerine değilken)
display blok yaptık ki sadece yazının değilde blok halinde çevresininde link olmasını sağladık
padding değerleri vererek linklerin aralarını açtık.
Kod
ul.cssmenu a {
background-color:wheat;
border-left:3px solid red;
color:black;
padding:2px 0 5px 5px;
text-decoration:none;
display:block;
width:10em;
}
şimdi mouse üzerine geldiğinde alacak hali yapacağız
üsttekiyle neredeyse aynı fakat belirli olsun diye renkleri ters yaptık
Kod ul.cssmenu a:hover {
background-color:red;
border-left:3px solid wheat;
display:block;
text-decoration:none;
font-weight:bold;
}
eee hepsi bu kadar kolaymış dimi css yi kavrayınca daha güzellerini yapabilirsiniz.
bir sonraki dersimiz olan css yatay menü yapımında görüşmek üzere hoşçakalın
önizlemesi
Düzenleyen chatlaq Düzenleme Tarihi: 08-03-2010 23:01 |
| |
|
|
| Mehmet |
Mesaj Tarihi 09-03-2010 02:24
|
Kıdemli Üye
Mesaj Sayısı: 1482
Katılım Tarihi: 02.01.10
|
Eline sağlık kardeş. Çok güzel bilgiler bunlar.
Akıl süsü dil, dil süsü sözdür. İnsanın süsü yüz, yüzün süsü gözdür. İnsan sözünü diliyle söyler. Sözü iyi olursa yüzü parlar. (Kutadgu Bilig, Yusuf Has Hacip)
 |
| |
|
|
| Reklamlar |
Mesaj Tarihi: 09-09-2010 09:04
|
Reklamlar
Mesaj Sayisi: 0
Katilim Tarihi: 01/01/10
|
Reklamlar
|
| |
|
|
| Ati |
Mesaj Tarihi 09-03-2010 11:41
|
Saygın Üye
Mesaj Sayısı: 473
Katılım Tarihi: 03.01.10
|
@chatlaq, güzel paylaşım. Özellikle yeni başlayacak arkadaşlar için sade, güzel ve temiz bir anlatım olmuş. Eline sağlık. 
...::: Bilgi Paylaştıkça Çoğalır, Fakat Herkese Söylenmez. :::... |
| |
|
|
| chatlaq |
Mesaj Tarihi 09-03-2010 14:21
|
Yönetici
Mesaj Sayısı: 1139
Katılım Tarihi: 31.12.09
|
anlaşılmayan bölümleri olursa burdan daha fazla açıklayabilirim |
| |
|
|
| Reklamlar |
Mesaj Tarihi: 09-09-2010 09:04
|
Reklamlar
Mesaj Sayisi: 0
Katilim Tarihi: 01/01/10
|
Reklamlar
|
| |
|
|
| Arda |
Mesaj Tarihi 09-03-2010 16:29
|
Super Yönetici
Mesaj Sayısı: 3511
Katılım Tarihi: 30.12.09
|
wheat white olacak sanırım onun dışında güzel paylaşım eline sağlık css navigation panel in mantığı da bu şekilde
Sevgi ve Saygının anlamını bilenlere |
| |
|
|
| chatlaq |
Mesaj Tarihi 09-03-2010 19:10
|
Yönetici
Mesaj Sayısı: 1139
Katılım Tarihi: 31.12.09
|
SoulSmasher tarafından yazılan metin:
wheat white olacak sanırım onun dışında güzel paylaşım eline sağlık css navigation panel in mantığı da bu şekilde
yok arda ben buğday rengi olsun diye wheat yaptım isteyen beyaz için white yapabilir |
| |
|
|
| Arda |
Mesaj Tarihi 09-03-2010 19:13
|
Super Yönetici
Mesaj Sayısı: 3511
Katılım Tarihi: 30.12.09
|
chatlaq tarafından yazılan metin:
SoulSmasher tarafından yazılan metin:
wheat white olacak sanırım onun dışında güzel paylaşım eline sağlık css navigation panel in mantığı da bu şekilde
yok arda ben buğday rengi olsun diye wheat yaptım isteyen beyaz için white yapabilir Wheat diye renk kodu var mıydı yahu, bak gerçekten bilmiyorum 
Sevgi ve Saygının anlamını bilenlere |
| |
|
|
| chatlaq |
Mesaj Tarihi 09-03-2010 19:28
|
Yönetici
Mesaj Sayısı: 1139
Katılım Tarihi: 31.12.09
|
SoulSmasher tarafından yazılan metin:
chatlaq tarafından yazılan metin:
SoulSmasher tarafından yazılan metin:
wheat white olacak sanırım onun dışında güzel paylaşım eline sağlık css navigation panel in mantığı da bu şekilde
yok arda ben buğday rengi olsun diye wheat yaptım isteyen beyaz için white yapabilir Wheat diye renk kodu var mıydı yahu, bak gerçekten bilmiyorum
ana renklerin koddan başka ismide olurya orange gibi buda onun gibi birşey buğday |
| |
|
|
| Ati |
Mesaj Tarihi 10-03-2010 00:32
|
Saygın Üye
Mesaj Sayısı: 473
Katılım Tarihi: 03.01.10
|
vay onu bende bilmiyordum, hani red, yellow felan neysede buğday rengi iyimiş 
...::: Bilgi Paylaştıkça Çoğalır, Fakat Herkese Söylenmez. :::... |
| |
|
