Dolaşım Menüleri
Kolay ve anlaşılır bir menü web sitenin kalbi demektir. Anlaşılır ve belirgin olmayan dolaşım araçları kullanıcıların sitede fazla durmadan çıkmaları için yeterli bir sebep olacaktır. Bu yazıda basit yatay ve dikey menü oluşturmayı göstereceğim. Menülerin tasarımları genellikle dikey, yatay, dikey açılır ve yatay açılır olarak dört gruba ayrılabilir. Bu yazıda dikey ve yatay menü kavramı örneklerle açıklanmaktadır. Yatay animasyonlu açılır menü için Yatay Açılır Menü Yapımı yazısını okuyabilirsiniz.
Dolaşım Menüleri Liste Bağlantılarıdır.
Bir dolaşım çubuğu standart HTML etiketlerini içermelidir.
Bu örnekte en basit haliyle, ul ve li etiketlerini kullanarak yatay ve dikey menü oluşturacağız.
Örneklerimizde kullanacağımız HTML kodlarımız
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li><a href="#">Ana Sayfa</a></li> <li><a href="#">Web Tasarım</a></li> <li><a href="#">PHP Programlama</a></li> <li><a href="#">Adobe</a></li> <li><a href="#">Jquery</a></li> <li><a href="#">Veritabanı</a></li> </ul> |
UL etiketi madde işareti ve iç/dış boşluklar içermektedir. Bunları silmek için standart CSS kodlarımız yazalım.
|
1 2 3 4 5 6 7 |
ul{ list-style-type: none; margin: 0; padding: 0; } |
[divider]
Dikey Menü Yapımı
Dikey menü yapımında çok fazla CSS düzenlemesi yapmıyoruz. Temelde liste(li) etiketlerinin içindeki link(a) etiketlerini biçimlendiriyoruz. Liste içindeki linkler için en önemli CSS kodu display:block (bulunduğu alanda blok görün) olmasıdır. Diğer CSS düzenlemeleri tasarımla ilgilidir. link (a) etiketi varsayılan olarak inline block bir etikettir. inline block etiketleriningenişlik ve yükseklik değerleri olmaz. Bu yüzden link etinetini display:block yapıyoruz.
background-color:arkaplan rengi
color:yazı rengi
height:her bir bağlantının yüksekliği
line-height:height ile aynı yapıp satır yüksekliğini vermiş oluyor.(basit ifadeyle yazıyı dikeyde ortala)
text-decoration: yazının altındaki çizgiyi kaldırma için kullanılacak
padding-left:yazının solundan iç boşluk vermek için kullanılacak
|
1 2 3 4 5 6 7 8 9 10 11 |
li a { display: block; background-color:#D33257; color:#E7E7E7; height:50px; line-height:50px; text-decoration:none; padding-left:10px; } |
Liste etiketlerine CSS kodunu yazdık fakat genişlik sayfanın tamanında geçerli oldu. Bu aşamada liste etiketlerinin genişliği ile oynamak yerine UL etiketine(Dikey menüde geçerli) genişlik vermek doğru olan yöntemdir. Standart CSS tanımlamasındaki UL etiketine 150px genişlik değerini verdiğimizde UL etiketindeki CSS kodu şu şekilde oluşacaktır.
|
1 2 3 4 5 6 7 8 |
ul { list-style-type: none; margin: 0; padding: 0; width: 150px; } |
Ekran görüntüsü şu şekilde oluşacaktır.
Belki fare ile üzerine geldiğimizde daha hoş bir görüntü elde etmek isteyebiliriz. Bunu için de hover sözde seçicisini kullanarak biraz düzenleme yapıyoruz.
|
1 2 3 4 5 6 |
li a:hover{ background-color:#3C3741; padding-left:15px; } |
Belki CSS3 özelliklerini kullanarak biraz animasyon eklemek isteyebilirsiniz. Çok da abartmadan css dikey menü ile ilgili bölümü bitiriyorum 🙂
li a CSS koduna transition: all .3s ease-in; kodunu ekliyoruz.
Tüm CSS kodları aşağıdaki gibi oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ul { list-style-type: none; margin: 0; padding: 0; width: 150px; } li a { display: block; background-color:#D33257; color:#E7E7E7; height:50px; line-height:50px; text-decoration:none; padding-left:10px; transition: all .3s ease-in; } li a:hover{ background-color:#3C3741; padding-left:15px; } |
[divider]
Yatay Menü Yapımı
Yine yukarıdaki HTML etiketleri ve temel CSS tanımlaması üzerinden devam ediyoruz.
Yatay menü oluşturmak için liste etiketlerinin yan yana gelmesi gerekmektedir. Liste etiketlerini yan yana getirmek için sola hizalı yerleştirme kodu olan float:left; CSS kodunu kullanacağız.
Sonraki aşamada yapılacak olanlar hemen hemen dikey menüdeki gibi olacaktır. Liste etiketine kodumuzu yazarak başlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*temel css tanımlaması*/ ul { list-style-type: none; margin: 0; padding: 0; } /*yatay menü için li etiketlerini sol yerleştirme kodu*/ li{ float:left; } |
Ekran görüntüsü şu şekilde oluşacaktır.
Sıra geldi link(a) etiketinin biçimlendirme işlemine.
background-color:arkaplan rengi
color:yazı rengi
height:her bir bağlantının yüksekliği
width:link etiketinin yatayda ne kadar genişlikte olacağı
text-align:yazının yatayda ortalanması için kullanılacak.
line-height:height ile aynı yapıp satır yüksekliğini vermiş oluyor.(basit ifadeyle yazıyı dikeyde ortala)
text-decoration: yazının altındaki çizgiyi kaldırma için kullanılacak
|
1 2 3 4 5 6 7 8 9 10 11 12 |
li a { display: block; background-color:#2CC990; color:#D8335B; height:50px; width: 150px; text-align: center; line-height:50px; text-decoration:none; } |
Ekran görüntüsü şu şekilde oluşacaktır.
Fare ile üzerine geldiğimizde aktif olan linki belirtmek için hover sözde seçicisi ile link etiketimizi biçimlendiriyoruz.
|
1 2 3 4 5 6 |
li a:hover{ color:#2CC990; background-color:#D8335B; } |
Animasyonlu şekilde ekranda göstermek için transition:all .3s ease-in; kodunu li a içine ekliyoruz. CSS kodlarının tamamı aşağıdaki gibi oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
ul { list-style-type: none; margin: 0; padding: 0; } li{ float:left; } li a { display: block; background-color:#2CC990; color:#D8335B; height:50px; width: 130px; text-align: center; line-height:50px; text-decoration:none; transition:all .3s ease-in; } li a:hover{ color:#2CC990; background-color:#D8335B; } |
aga kalk link
ilginize teşekkürler. en kısa zamanda inşallah diyelim…
“link (a) etiketi varsayılan olarak inline block bir etikettir. inline block etiketleriningenişlik ve yükseklik değerleri olmaz. Bu yüzden link etinetini display:block yapıyoruz.” demişsiniz. Sadece inline etiketlerin yükseklik ve genişlik değeri olmaz diye biliyorum, doğru mu acaba
doğrudur. inline etiketlerin yükseklik ve genişlikleri olmaz. ancak css ile bu niteliği degiştirebiliyoruz.
Hayır, söylemek istediğim inline-blok etiketlerin yükseklik ve genişlik değeri olmaz demişsiniz ama olması gerekmiyor mu?
şimdi farkettim. uyarınız için teşekkurler. konuyu tekrar gözden geçireceğim. inline-block etiketleri width ve heigth ile yükseklik genişlik değerlerine etki edebilirsiniz. konu ile ilgili css display kullanımı başlığına bir gözatın.
Admin yazılar çok faydalı benim gibi yeni başlayanlar için. Devamını bekliyoruz bir de sıfırdan basit sayfa tasarımı gibi bir düşüncen var mı
Bu sitede yok henüz yapmadık ama bir arkadaşın sitesini önerebilirim. “Ahmetcansever.com css div tasarımları” olarak aeatırsan internette yeterince fazla örnek bulacaksın.
[…] CSS Menü Yapımı […]
[…] CSS Menü Yapımı […]
[…] https://www.yazilimbilisim.net/web/css/css-menu-yapimi/ bağlantısından önceki yazyı inceleyebilirsiniz. […]