CSS İLE MENÜ TASARIMI

HTML bize menü tasarımında basit özellikler ya da spry menü ile hazır şablonları sunduğu gibi Css ile oluşturulan menü stillerini daha aktif ve görsel açıdan daha göze hitap eden bir şeklide düzenleyebiliriz. Bunun için tek yapmamız gereken CSS bilgimizi kullanmak.

Bilindiği gibi web sayfamız için menü stili oluşturmak için HTML'de sırasız liste mantığı kullanılır("ul"-unordered list). Sırasız listelemede her bir menü "li"(list İtem)etiketi ile sıralanır. Dolayısıyla CSS ile menü stilini oluştururken bu iki etiketi şekillendireceğiz.

 

 

1- Sırasız liste ikonuna tıklanır
2-Menüler enter tuşu kullanılarak yazılır.
Menüler oluşturulduktan sonra CSS kuralı "ul" etiketi için belirlenir.

 

 

1-Menüler seçilir
2-CSS ekle butonuna tıklanır
3-Açılan pencereden "Selecter Type" seçeneğinden Compound seçilir ve Selector Name kutusunda "ul" etiketi kontrol edilir ve OK ile CSS atması yapılır..

 

 

 

"ul" etiketi için yapılması geren iki işlem vardır.
1-Category-list-list style type="none" ile liste işaretleri kaldırılır
2-Category- box- padding ve margin değerleri sıfırlanır.
İşlemleri yaptıktan sonra menü başlıkları önündeki imgelerin kalktığını ve menümüzün sol üst köşeye hizalandığını göreceksiniz. "ul" etiketini şekillendirdikten sonra artık listelemizi oluşturan "li" etiketini şekillendirelim

 

 

Öncelikle menümüzdeki her bir eleman için sahte link "#" işaretini verelim ve daha sonra herhangi bir menü başlığını seçerek CSS kuralını ekleyelim. Açılan pencereden "Selecter Type" seçeneğinden Compound seçilir ve Selecter Name kutusunda "ul li a" etiketi kontrol edilir ve OK ile CSS atması yapılır.

Oluşturulacak olan CSS atamasında ilk yapılması gereken işlem "display" özelliğidir. Anlamı yazının kapsadığı ya da bizim belirticeğimiz değerlerdeki alanı bir katman olarak belirleme işlemidir.

Sıralamak gerekirse...

1-Block kategorisinden-display-Block seçilir
2-Box kategorisinden- Width ve Height değerleri ile menü genişlik ve yükseklik değerleri atanır. Eğer yatay bir menü yapılacaksa float özelliği verilir.
3- Menü yazı stilini ayarlamak için Type kategorisinden family, color, text decoration ayarları yapılır.
4- Backgroud kategorisinden, menü arka plan zeminine renk ataması yapılabilir.
5- Menümüzü belirttiğimiz kutu genişliğinde merkeze hizalamak istiyorsak Block kategorisden "text-align" center yapılabilir.
6- Eğer menü yazımızı kutunun dikey hizasında ortalanmasını istiyorsak kutu yüksekliği ile yazı yükseklik değerini eşit yapmamız gerekir. Yazı yüksekliği için Type kategorisinden "Line-heihgt" değeri ataması yapılır.
7- Son olarak kutu aralarına boşluk bırakmak istiyorsak Box kategosinden "margin" alanında Right değerine atama yapılır...
Murat Aksel AKÇAY | 01 / 12 / 2014