renkli teneke » Basit CSS Menü Yapımı

internet çöplüğünden renkli kırıntılar…

Anasayfa » Web Programlama

Basit CSS Menü Yapımı

3 Ağustos 2009 Görüntülenme: 1.586 10 Yorum Yazar: Ahmet

(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.

PLAIN TEXT

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.

PLAIN TEXT

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.

Yazıyı beğendiysen başka yerlerde paylaşabilirsin:

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.

10 Yorum »

fizik demiş ki:

Tarih: 3 Ağustos 2009Saat: 20:54

Gayet güzel bir anlatım olmuş teşekkürler :)

Ali demiş ki:

Tarih: 4 Ağustos 2009Saat: 12:54

İyi oldu a etikeni bu şekilde kulanmak , teşekkürler

film izle demiş ki:

Tarih: 5 Ağustos 2009Saat: 14:03

tam aradığım anlatım çok teşekkürler. emeginize sağlık

Video Grup Etkinlik demiş ki:

Tarih: 9 Ağustos 2009Saat: 18:27

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..

Tasarist demiş ki:

Tarih: 25 Ağustos 2009Saat: 12:26

Güzel Anlatım Olmuş Teşekkürler.

Serdar Yetik demiş ki:

Tarih: 12 Eylül 2009Saat: 16:54

Teşekkurler guzel anlatım :)

gereksiz demiş ki:

Tarih: 30 Ekim 2009Saat: 18:55

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…

bedava film izle demiş ki:

Tarih: 11 Aralık 2009Saat: 16:51

güzel calişma teşekkürler

ortabizim demiş ki:

Tarih: 1 Şubat 2010Saat: 16:29

Ü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?

Ahmet (Admin Abi) demiş ki:

Tarih: 3 Şubat 2010Saat: 13:23

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.

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.