Şahin

Üst Menü Hazırlamak (Geniş Anlatım)

ÜST MENÜ HAZIRLAMAK (GENİŞ ANLATIM)

Yazar: Admin 16.12.2011 | Dosya konumu: Webmaster

Menü yapmak aslında zaman ve düşünce gerektiren bir iştir... Bir menü için oldukça fazla zaman harcanabilir... Ama burada sizlere sadece fikrinizi ortaya atarak süper menüler oluşturabileceğinizi göstereceğim... Eğer dersi çok dikkatli bir şekilde takip ederseniz mutlaka ama mutlaka bir menü yapmayı öğreneceksiniz... Bu derste üst menüyü ele alalım...

Üst menümüzün renkleri ilk haldeyken beyaz-gri ve turuncu olsun...

Üst menümüzün ikinci hali ise beyaz-gri-kırmızı renklerde olsun... Eğer ilk ve son halindeki renkler birbirine benzerse ziyaretçiler için daha hoş bir menü olacağı düşüncesindeyim...

Şimdi ise kodu aşağıya ekliyorum... Bu kod üzerinde değişiklikler yaparak bir üst menü oluşturacağız...



Kodu incelersek eğer kodda anlatılmak istenenleri anlarız... Ben kodda kullanılan temel bölümleri aşağıda anlattım...

#Bedava-Sitem a { [ Menünün ilk hali ]
background-image:
url(BİRİNCİ RESMİN URL'Sİ);
height: RESMİN YÜKSEKLİĞİNDEN "padding-top"
ÖZELLİĞİNİN ÇIKARILMASIpx;
width: RESMİN GENİŞLİĞİpx;
text-align: YAZILARIN YERİ (center);
font-family: YAZI TİPİ;
font-size: YAZI BOYUTUpx;
color: #YAZININ İLK RENGİ;
padding-top: YAZININ YUKARIDAN KAÇ PX AŞAĞIDA OLDUĞUpx; }

#Bedava-Sitem a:hover { [ Üzerine Gelindikten Sonra ]

background-image: url(İKİNCİ RESMİN URL'Sİ);
color: #YAZININ ÜSTÜNE GELİNDİKTEN SONRAKİ RENGİ; }



Yukarıda bulunan özellikleri incelersek aslında kendi menümüzü oluştururuz demektir... Yani bu bölümü iyi inceleyin ve ilk bölümde uygulayın... Böylece sizlerde şık menülere sahip olun...

Menünün Son Hali :
 
 
 
Bugün 10 ziyaretçi (27 klik) kişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol