CSS ile Menü Yapmak II – Yatay Menüler

Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmıştık. şimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.

Kaldığımız yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:

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

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

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:

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:

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:

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;
}

Sonuç işte:

Biz 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. Gerek aşağıda verdiğimiz Kaynaklar kısmında ve gerekse İnternette aratarak bir çok menüye ulaşabilrisiniz.

Kaynaklar

63 Yorum (Yorum Ekle)

fatih.hayrioglu diyor ki:

Eylül 21, 2007, 19:59

http://www.fatihhayrioglu.com/dokumanlar/menuy.html

kaynak kodunu yardımcı olacaktır.

Cevapla

amarat diyor ki:

Eylül 21, 2007, 19:38

bunları css dosyasına mı kopyalıyoruz , eger oyleyse hangi kısmına ?
Teşekkürler.

Cevapla

Yavuz diyor ki:

Temmuz 16, 2007, 11:04

Değerli hocam bunca yıldır kodlarla uğraşırım bu kadar net ve sorunsuz çalışan kodlara rastlamadım. Verdiğin kodları kullandım ve çok memnunum teşekkürlerimi sunuyorum. Yorum yapamadan geçemedim allah razı olsun.

Cevapla

Ömer diyor ki:

Nisan 24, 2007, 15:44

Tamamda ul.menu li a:active bu şekilde de yapsak fareyi tıklayınca herhangi bi yere tekrar ayn şekle dönmezmi. Birde aklıma gelen gönderdiğim sayfanın adını veya id numarasını bildikten sonra yine mantıksal sorgulamayla id degeri atayayım diyorum ama uğraştırır gereksiz yere diye düşnüyorum . Neyse ben bi kez bi deniyeyim Cevap için teşekkürler kolay gelsin.

Cevapla

fatih.hayrioglu diyor ki:

Nisan 24, 2007, 10:26

ul.menu li a:active tanımını değişik stil tanımlarsanız olur.

Cevapla

Ömer diyor ki:

Nisan 20, 2007, 20:55

Hocam bu linkelerin aktif olduğu kullanıcıya nasıl bildirebiliriz örneğin bu sitede olduğu gibi ;

http://www.dw.gen.tr

Cevapla

hE&kE diyor ki:

Şubat 9, 2007, 22:27

üstad bu menü süper bişey çok sağol valla ne dersen de css de türkçe kaynaklarda üstüne yok birde bi sorul olacak üstüne gidince yazı rengi değişmesinide istiyorum
http://www.cssgaleri.com/ burdaki menü tazrzı bişeyler nedendir anlamadım son günlerde CSS ye karşı bi merakım oluştu ve o sınırsız dünyayı çözmeye çalışıyorum inşallah bi gün senin kadar bilgili oluruz. ve yakında tamamen css ile kodlanmış table kullanmadan yaptığım siteyi inşallah bitireceğim:))
iyi çalışmalar üstad tebrikler çok başarılı bir çalışma

Cevapla

interramcho diyor ki:

Temmuz 20, 2009, 16:36

font-color işe yarayabilir

Cevapla
- fatih.hayrioglu diyor ki:
  
  Temmuz 20, 2009, 21:55
  
  font-color ne için işe yarayabilir.
  
  Cevapla

fatih.hayrioglu diyor ki:

Şubat 3, 2007, 13:06

İE de padding sorunları genelde(benim karşılaştığım) kalıtsallıktan geliyor. Yani bu alanı etkileyen başka kodların etkisi ile padding değeri görünüyor olabilir.

Çözüm etkinliğide göz önüne alarak o nesneye ait kodlama yapmak

Cevapla