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
  • 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
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • 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