Pazartesi , 21 Ağustos 2017
Anasayfa » WEB » CSS » CSS Menü Yapımı

CSS Menü Yapımı

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.

 

DEMO

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

UL etiketi madde işareti ve iç/dış boşluklar içermektedir. Bunları silmek için standart CSS kodlarımız yazalım.

Screenshot_33

 

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

 

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.

Ekran görüntüsü şu şekilde oluşacaktır.

Screenshot_34

 

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.

Screenshot_35

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.

tran

Tüm CSS kodları aşağıdaki gibi oluşacaktır.

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.

 

Ekran görüntüsü şu şekilde oluşacaktır.

Screenshot_36

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

Ekran görüntüsü şu şekilde oluşacaktır.

Screenshot_37

Fare ile üzerine geldiğimizde aktif olan linki belirtmek için hover sözde seçicisi ile link etiketimizi biçimlendiriyoruz.

 

Screenshot_38

 

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.

CSS Yatay Menü

 

 

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir