Basit CSS Menü Yapımı
Web sitesi hazırlarken sitenin menüsünü hazırlarken kullandığınız yöntemleri kısa bir süreliğine unutun. CSS ile daha pratik ve hızlı menülerin nasıl yapılabişeceğinden bahsedeceğim biraz. Sadece css kodlarını kullanarak hoş görünümlü menü hazırlamanın aslında ne kadar kolay olduğunu göreceksiniz.
Sadece bir örnek vererek açıklamanın uygun olacağını düşünüm. Zamanla sindire sindire tek tek örnekler yaparak ve bunlarıda siz uyguladığınızda tam bir öğrenme olacaktır, eminim.
İlk olarak web sitesi yapımı için kullandığınız editörünüzü açın. Sadece bir tane html sayfası oluşturun. Html sayfası içerisine ilk olarak aşağıdaki CSS kodlarını </head> tagından önce sayfaya yerleştirin.
CSS:
-
<style type=”text/css”>
-
body {
-
background: #F8F8F8; /*sayfa arkaplan rengi*/
-
}
-
#menu a{
-
font: 11px Verdana; /*menu font özellikleri*/
-
color: #191919; /*yazının rengi*/
-
padding: 10px; /*menünün içten olan boşluğu*/
-
background: #CECECE; /*arkaplan rengi*/
-
text-decoration: none; /*yazının alt çizgisinin iptal edilişi*/
-
}
-
#menu a:hover{
-
background: #191919; /*arkaplan rengi*/
-
color: #CECECE; /*yazının rengi*/
-
}
-
</style>
CSS kodları içerisinde gerekli açıklamları yaptım. Siz bu kodlar arasındaki bütün sayısal değerleri değiştirerek farklı yöntemler deneyebilir ve yazılan o satırdaki kodun tam olarak ne işe yaradığını daha iyi kavrayabilirsiniz. Bunu kesinlikle yapın. Mesela padding: 10px; olan kod satırını padding: 100px; yapın. Sayfayı kaydedin inceleyin. Sonra eski haline getirin. İkisi arasındaki farkları inceleyin. Bu şekilde birşeyleri kurcalayarak daha iyi ve kalicı şekilde öğrenebilirsiniz. Ben bazen bu şekilde yapıyorum.
Aşadağıki kodları ise html sayfanızın <boy> tagından sonraki alana ekleyin. Kodlarımız bizim menümüzü oluşturuyor.
HTML:
-
<div id=”menu”>
-
<a href=”#”>Anasayfa</a>
-
<a href=”#”>Hakkýmýzda</a>
-
<a href=”#”>Hizmetler</a>
-
<a href=”#”>Referanslar</a>
-
<a href=”#”>Ýletiþim</a>
-
</div>
Kodların hepsini yerleştirdiyseniz sayfanızı kaydedip deneyebilirsiniz. Burada önemli olan CSS kodlarının ne işe yaradığı. Az öncede dediğim gibi kodları bol bol kurcalayın, sayısal değerleri ile oynayın, aradaki farkları kavrayarak daha iyi öğrenin. Hazırladığımız bu menünün demosunu bu sayfada bulabilirsiniz. İndirmek için ise bu adresi kullanabilirsiniz.
***
Bu arada söylemeden edemeyeceğim. RSS abone sayım şuanda bu yazıyı yazarken tam olarak 74. Bu sayı her geçen gün arttıkça benimde yazma hevesim artıyor. Bana göre bu arak çok düşük. Şuanda en kötü ihtimalle 300 felan olmalıydı. Bu da bu blogdan henüz pek fazla kişinin haberdar olmadığını gösteriyor bana göre. Eğer bu blogu sevdiyseniz tanıdıklarınıza önerebilir ve RSS abonesi kazandırabilirsiniz. Teşekkürler.
Yorum Yap: