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.
ilk koddaki ul.emu li { display: inline; } kısmında .emu yazan yer sanırım .menu olacak ^^’
Uyarı için teşekkürler. Düzelttim.
Sitenizi takip ediyorum. Birseyler ogrenmeye cabaliyorum.
Ben bir bedava site yaptim.
http://ekgelirkazanmak.tr.gg/
Sitede CSS Tasarimi secerek internette buldugum bir tasarimi siteme uyarladim.
Benim size sorum su olacak sitede yatay ve dikey menuleri nasil acilir alt menuye sahip sekle getirebilirim.
Bunun icin tr.gg sitelerinde CSS kodu ve tasarim altina konan kodlarin icine sizin yapmis oldugunuz menuleri uyguladim olmadi.
Dikey olmasi gerekirken yatay oldu ve alt menuler sayfanın ortasında acildi.
yardimci olabilirseniz cok sevinirim.
Iyi calismalar.
@İsmail Kaya
Sorunu çözmek kolay :)
ul.menu li { display: inline; }
bunun yerine
ul.menu li { float: left; }
yaparsan sorun çözülüyor.
teşşekürler fatih usta işin yapı taşını yok iyi anlatan bir kaynak hazırlamışsınız ellerinize sağlık … bu teşşekkür mesajını iletmek istedim
@İsmail Kaya
http://www.fatihhayrioglu.com/dokumanlar/menuy.html
örnek inceleyip üzerinden gidersen sorun olmayacaktır.
Belki diğer atamlar buna etki ediyordur. FireBug ile bi kontrol et
bu sayfadı menü kodlarını aynı şekilde uyguladığımda,anasayfa ve hakkımızda bitişik, ürünler ise pirkaç pixel ayrı kalıyor. nerde yanlış yapmış olabilirim yardımcı olursanız sevinirim.kolay gelsin.
@murat akyurt
http://www.cssplay.co.uk/menus/final_pullup.html
merhaba,
css menu yaparken altmenulerin yukarı açılması mümkün değilmi acaba.
standart olarak altmenuler hep aşağıya açılıyor.
benim yapacağım meunu sayfanın en altında olacak o yüzdende menunun yukarı açılması gerekiyor. googlada arattım ama kayda değer yada benim anlayabileceğim bişey bulamadım.
bilginiz varmı acaba?
teşekkür ederim
@Emre css hakkında bilgin olamdan menüyü uygulasan bile dğeişiklikleri yapman zor olur.
Ama yine örnek uygulamayı indirip nasıl uygulandığını görebilirsin.
Fatih kardeş çok guzel yazmışsın teşekkur ederiz. ama ben css den hiç anlamıyorum. bu yaptıgın menuyu de baya beğendim. bunu sayfamda nasıl gosterebilirim. style.css olarak kaydettim ve bi değişiklik olmadı. linkleri verirken nasıl bir kod koymamız gerekli onu yapamadım. yardım edersen sevinirim. Teşekkurler…