Perşembe , 19 Ocak 2017
Anasayfa » WEB » CSS » Yatay Menü Yapımı

Yatay Menü Yapımı

Daha önceki yazılarda menülerin sitenin en önemli parçası olduğundan bahsetmiştim. Bu yazıda tab görünümlü yatay menü nasıl oluşturulacağız.

http://www.yazilimbilisim.net/web/css/css-menu-yapimi/ bağlantısından önceki yazyı inceleyebilirsiniz.

Gelelim yatay menüyü adım adım nasıl oluşturacağımıza;

DEMO

Adım 1: Yatay Menünün HTML kodları

Sayfada birden fazla menü olması duruma karşın id değeri yatay-menu olarak tanımladık. Standart bir menü ul li a etiketleri ile oluşturulmaktadır. Bu kurala uygun olarak aşağıdaki şekilde HTML etiketleri oluşturulmuştur.

Adım 2: UL Etiketinin Biçimlendirilmesi

UL etiketi tarayıcı tarafından varsayılan olarak madde işareti, iç boşluk ve dış boşluk içermektedir.  Bunları istediğimiz tasarıma göre biçimlendiriyoruz.

Adım 3: LI etiketinin Biçimlendirilmesi

Önceki yazıda float:left özelliği ile yatay menü oluşturmuştum. Bu yazıda farklı bir yöntem olarak display:inline-block; yöntemi ile yatay menü oluşturacağız.

inline-block özelliği etiketin bulunduğu satırda ve alanda block olarak görünmesini sağlar. Liste etiketleri alt alta yazılırsa tarayıcılar tarafından beyaz karater boşluğu bırakılmaktadır.(yaklaşık 2px boşluk). Bu bilgi ile dış boşlukları -2px yaparak kaldıracağız.

Adım 4: Link Etiketinin Biçimlendirilmesi

Adım 5: Aktif Linkin Renginin Değiştirilmesi

 

Screenshot_40

TÜM KODLAR

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir …

Bir Cevap Yazın

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

Wordpress Tema indir