Basit CSS Menü Yapımı
(Bu yazı 2 oy aldı. Ortalama Değeri: 5,00 oy dan 5) 
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]
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>
[/html]
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.
103 views
RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.
Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 3 Ağustos 2009" tarihinde yazılmış olan "Basit CSS Menü Yapımı" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.
Gayet güzel bir anlatım olmuş teşekkürler :)
İyi oldu a etikeni bu şekilde kulanmak , teşekkürler
tam aradığım anlatım çok teşekkürler. emeginize sağlık
Harika görünüyor. Yeni tema yapımında kullanmayı düşünüyorum. O tonlardada bi tema yapmayı planlıyorum :) Bilgiler için teşekkürler..
Güzel Anlatım Olmuş Teşekkürler.
Teşekkurler guzel anlatım :)
Süpersin üstadım. On numara site. Bu işi öğrenince ben de nasıl en iyi şekilde öğretebilirim konusunda paylaşımlarda bulunacağım…
Hepinize teşekkürler…
güzel calişma teşekkürler
Üstadım çalışma için elinize saglık. html sayfasını oluşturup kodları koyduktan sonra sayfayı hazır hale getirdim. Ancak yeni oldugum için ftp ile bu html sayfasını nereye göndermem gerekiyor? yada hangi dasya ile degiştirmeliyim? yardımcı olabilecek varsa şimdiden saygılar sunarım..
Renkleri ayarlamak içinde renk kodları listesi falanmı var?
ortabizim; Buradan wikipedia sayfasına giderek renk kodları hakkında temel bilgileri edinebilirsin. buraya veya buraya uğrayarak da istediğin rengin koduna ulaşabilirsin.
Çok teşekkür ederim. İnanırmısın 3 haftadır bu css menü konusuna bakıyorum ama hiçbir ilerleme kaydedememiştim. Senin bu örneğin sayesinde istediğim işlemi yapmış oldum. Elinize sağlık.
Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!
Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.kitapyurdu
En Çok Okunan Yazılar
Kategoriler
Meta
Takipçi Sayısı
Arşivler
Bağlantılar
Etiketler
Son Yorumlar
en çok yorumlananlar
en çok okunanlar