CSS ile Yatay Menü Olusturmak

13.04.2017

Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmistik. simdi de yatay menülere bir örnek verecegiz. Önceki makalede bahsettigimiz gibi yatay ve dikey menüler belli bir yere kadar kodlamasi aynidir. Biz ayni olan kismi geçip sonrasina devam ediyoruz.

Kaldigimiz yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelligini kullaniyoruz:

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

ul.menu li {
	display: inline;
}

Linklerin altindaki çizgileri kaldiriyoruz:

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

ul.menu li {
	display: inline;
}

ul.menu li a {
	text-decoration: none;
}

Linkler arasina biraz bosluk 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 özelligine renk atiyoruz:

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ç iste:

Biz burada temel menü örnekleri verdik. Mesele isin yapilisini ögrenmek. Daha ayrintili ve güzel örnekler internette bir çok yerde mevcut. Gerek asagida verdigimiz Kaynaklar kisminda ve gerekse Internette aratarak bir çok menüye ulasabilrisiniz.

 

 

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • 2018-2019 Asp Net vize 2
  • 2018-2019 Web tasariminin temelleri vize 2 konulari
  • 2018-2019 Mesleki Yabanci Dil II Vize 2 Konular
  • 2018-2019 Web tasariminin temelleri web proje konulari
  • 2018-2019 Konu anlatim listesi
  • 2018-2019 güz Mesleki yabanci dil Vize2
  • 2018-2019 Ag temelleri Vize 2 Ödevleri
  • 2018-2019 Aspnet Vize 2 Ödevleri
  • Ders icerik notlari
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN