Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ile Menü Yapımı
#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.
Ara
Cevapla PGM
Teşekkür verenler: Adolf Hitler


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



Reklam yaziniz bostur. ayarlardan duzenleyiniz:medi -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping