CSS ile Menü Yapmak II - Yatay Menüler

[gokhanaygun]

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; }
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.emu li { display: inline; }


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

ul.menu { list-style-type: none; }
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; }
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; }
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; }
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;
}