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.
teşekkürler güzel menü :)
padding:1px 2px;
şeklinde yazmak hem kısa hemde daha az yerkalar.
Ama sizin yazdığınız gibi de olur
Fatih hocam ben bir şey sorucam linklerimizin arasını biraz açarken kullandığımız padding özelliğini ben pekiştirip akılda kalması açısından dreamweaverde kendim veriyorum ama o
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
şeklinde kodluyor bunu kısaltmalımıyım uyumluluk ve düzen açısından bir şey fark edermi bu konu hakkında yorumunuz ne olur?
haklısın Ramazan. Şimdi düzeltiyorum
ul.menu { list-style-type: none; }
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
yukarıda neden list-style-type: none; kısmını iki defa yazdınız anlayamadım pek ilk satırdaki koda gerek varmıydı aşağıda zaten aynısı var
dışa bir katman koyup position:relative verip ul ye relative:absolute verip hallede bilirsin.
css’de sola yaslama babında denemediğim işlev kalmadı sanırım. muhtemelen eksik birşeyler yapıyorum. hocam normal şartlarda listeyi div içinde sola nasıl yaslarız, hangi kodlarla?
position denediniz mi ?
hocam div’in içerisinde menümü yaptım anlattığınız şekilde. ancak div içerisinde istediğim yerde tayin edemiyorum. padding ve margin komutlarını da giriyorum işe yaramıyor. neden olabilir sizce
eyvallah hocam, çok makbule geçmiştir…