Hoşgeldin, Ziyaretçi: Üye Ol
Forumlarla ilgili sorunlar için buraya tıklayın


Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ile Menü Yapımı
*
Destek Ekibi
1. Seviye
Çevrimiçi
Kullanıcı Bilgileri Göster
Yorum Sayısı: 728
Konu Sayısı: 182
Üyelik Tarihi: 07-03-2012
Rep Puanı: 26
Teşekkürler: 6
18 mesaj içinde 35 teşekkür verildi.

SanalPara (SP): 332.62₺
#1
2qbw5sp.jpg

Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:

Kod:
Kod:
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
    display: inline;
}


Linklerin altındaki çizgileri kaldırıyoruz:

Kod:
Kod:
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
}


Linkler arasına biraz boşluk veriyoruz: 

Kod:
Kod:
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
    padding: .2em 1em;
}


Menüyü biraz renklendiriyoruz: 

Kod:
Kod:
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #1B1B1B;
  background-color: #E2E2E2;
}


Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:

Kod:
Kod:
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #1B1B1B;
    background-color: #E2E2E2;
}
ul.menu li a:hover
{
background-color: #999;
}


Burada temel menü örnekleri verdik. Mesele işin yapılışını öğrenmek. Daha ayrıntılı ve güzel örnekler internette bir çok yerde mevcut.
“Gerçek şair kendi aşkı, kendi mutluluğu ve acısıyla uğraşmaz. Şiirlerinde halkının nabzı atmalıdır…”
Cevapla
Teşekkür verenler: Taifun


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi
Önerilen Bağlantılar
SinemaOvasi.Com
Tema yapımcısı: Metehan Durmuş
Tüm hakları saklıdır. 10TL.Net sistemi için yazılmıştır.


Teknolojik -


Reliable Magento web hosting on https://certahosting.co.uk page. Click to see prices!