Tweet

SEO Dostu CSS Yatay Menü Yapımı

Merhabalar...
Bugün CSS dilinde Yatay Menü Yapımı hakkındaki makaleyi yazmaya başlıyorum.Bu yapacağımız Yatay Menü SEO dostudur...
Hemen hemen tüm sitelerde karşınıza çıkmış olabilecek olan bu yatay menüyü birde TheCoders.net adına ben göstermek istedim.Bu yatay gezinme menüsünü oluşturmanın en kolay yöntemidir! İsteyenler bunun üzerinde geliştirmelerde yapabilir tabikide.En önemli özellik ise SEO dostu olması olacak sanırım bu yazının[...] (:
Eğitimimizde kullanacağımız boş bir belge açalım ;
CODE:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title> TheCoders.Net </ title> </ head> <body> </ body> </ html>


Menüye ait <p> etiketli kodumuz.
CODE:
<body>
<div id="navigation"></div>
</body>


Evet şimdi bizim elimzide navigasyon için basit bir konteynırımız var.Şimdi var olan bu konteynırımıza stil kodları ekleyerek yola başlayabiliriz...

CODE:
<head>
<style type="text/css">

</style>
</head>


Şimdi de bu menümüze bir genişlik , yükseklik ve bir de arka plan rengini ayarlayarak menümüzdeki yolumuza devam ediyoruz...

CODE:
<style type="text/css">
#navigation{
width:100%;
height:40px;
background-color:#999;
}
</style>


Şimdi buraya kadar yaptıklarınızı bir kontrol edin.Karşınıza çıkacak olan şeyi görmeniz ve buraya kadar yaptığınız işlevlerin görsellerini görmeniz açısından...

Şimdi de anladık ki daha birşeyler bitmemiş.Yolculuğumuza kaldığımız yerden devam ediyoruz. Bu menümüzü taşımak gerekiyor gibi sanki.Şimdi bizim navigasyon konteynerımız için unordered listesi yöntemini kullanarak menü öğelerimizi ekleyelim ;
CODE:
<body>
<div id="navigation">
<ul>
<li> Base </ p>
<li> Makale</ li>
<li> coderForum </ p>
<li> İletişim </ li>
</ul>
</div>
</body>


Tabi bunu isteğinize göre artırabilrsiniz de...
Biz TheCoders ' e göre yaptık (:

Sanırım şimdi şimdi gezinme çubuğu menü gibi olacaktır.Yani yatay değildir.Dikey menü biçimindedir.Biz bunu yataya çevirebilmek için hiç durmadan kurallarımıza uyarak yolculuğumuza devam edelim...

CODE:
<style type="text/css">
#navigation{
width:100%;
height:40px;
background-color:#999;
}

#navigation ul
{}
#navigation ul li
{}
</style>>


(# navigasyon ül) dikkatinizi çekmiş olabilir.Bu herhangi bir özel kurallar ekleyerek " <ul> " bizim navigasyon kapsayıcı alanındaki başlangıç için bir tarayıcıyı anlatmaktadır. (# navigasyon ül p) ise herhangi bir " <ul> " etiketini bizim navigasyonumuzdaki konteyner " <li> " belirli kuralları okumaya başlamak için tarayıcı söylemektedir. Şimdi biz doğrudan " <ul> " ve " <li> " eklersek bazı mülkiyet hakları değişebilmektedir.Bunun gibi CSS de farklı değişken kurallar mevcut olabilmekte ve değişkenlikde göstermektedir.Neyse biz devam edelim kaldığımız yerden...

CODE:
#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;}


Biz burada dedik ki ;
<ul> bir 0px için bir marjı , paddingler var.Biz bunu yapmak için bizim navigasyonumuz konteyner içine soldaki üst konumunda olması gereklidir ve de daha sonra ne kadar kapalı konumda olması için navigasyon istiyorum dedik ve daha sonra üst ve sol konteyner olarak bunu belirledik. Siz bu kodlamalar ile oynama yaparak istediğinzi sonuçlara aslında daha aklınızda daha kalıcı olarak ulaşabilirsiniz (:
Yatay menü oluşturma yolculuğumuzda bir menü öğesi başlacak ve başka bir menü öğesi ile de bitecektir. Biz bunu düzeltmek için, <li> ve sol kenar eklemek için CSS kuralı ile dönüşümümüzü sağlayabiliriz...
CODE:
#navigation ul li
{display:inline; height:40px; float:left; list-style:none; margin-left:5px;}


Sanırım şu andaki ulaştığımız sonucu son verdiğim koddaki anlatmak istediğim şey ile anlayabilmeniz daha çok mümkün olacak (:
Şimdi de gelelim yapmış olduğumuz bu menüdeki başlıkları bağlantıya çevrip bizim menü öğelerimizi bağlantı olarak açmaya...

CODE:
<ul>
<li><a href="http://www.thecoders.net/">Base</a></li>
<li><a href="http://www.thecoders.net/dersmakale">Makale</a></li>
<li><a href="http://www.thecoders.net/forum">Forum</a></li>
<li><a href="http://www.thecoders.net/iletisim">İletisim</a></li>
</ul>


Evet.Şimdi sonuca bir de kendiniz bakabilrsiniz...
Neyse geçelim biz.Çünkü göreceğiniz gibi sadece çok sade basit bir menüden ibaret olmuş durumda şu anda.Buna biraz alt menü biraz bi farklılaşmalar vermemiz şart gibi gözükmekte.Öyle değilmi thecoders ?
Şimdi bizim bağlantı etiket kurallarını ekleyerek <a> etiketinde olabilecek olan dekore sorununu düzenlememize sağlamak için ;

CODE:
#navigation li a
{}

#navigation li a:hover
{}


Önce navigasyonda bizim <a> bağlantı etiketleri ve nokta bunun için ayarlar bizim belirli kurallara uyumumuz ve CSS de çalışabilmemizi sağlar.Yani bu öğeler oldukça gereklidir.
Belirli kurallar ve yeni özellikler bizim <a> etiketlerimiz için vardır.

CODE:
#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{color:#fff; text-decoration:underline;}


Şimdi bağlantılar beyaz bir yazı tipi rengi olmalıdır.
Sözü fazla uzatmadan hemen alt menü oluşturulmasına geçelim...
CODE:
<ul>
<li>AltMenü 1</li>
<li>AltMenü 2</li>
<li>AltMenü 3</li>
<li>AltMenü 4</li>
</ul>


Şimdi iyi arkadaşım bunları verdinde bize biz bunları nereye nasıl yerleştireceğiz diye düşünebilirsiniz. Gerçekte her ana menü içinde koymak " <li> " kullanarak mümkün.
CODE:
<div id="navigation">
<ul>
<li>
<a href="http://www.thecoders.net/">Base</a>
<ul>
<li>AltMenü 1</li>
<li>AltMenü 2</li>
<li>sAltMenü 3</li>
<li>AltMenü 4</li>
</ul>
</li>

<li>
<a href="http://www.thecoders.net/dersmakale">Menu Item 2</a>
<ul>
<li>AltMenü 1</li>
<li>AltMenü 2</li>
<li>AltMenü 3</li>
<li>AltMenü 4</li>
</ul>
</li>

<li>
<a href="http://www.thecoders.net/forum">Menu Item 3</a>
<ul>
<li>AltMenü 1</li>
<li>AltMenü 2</li>
<li>AltMenü 3</li>
<li>AltMenü 4</li>
</ul>
</li>

<li>
<a href="http://www.thecoders.net/iletisim">Menu Item 4</a>
<ul>
<li>AltMenü 1</li>
<li>AltMenü 2</li>
<li>AltMenü 3</li>
<li>AltMenü 4</li>
</ul>
</li>
</ul>
</div>


Şimdi muhakkak olacaktır...
Fakat biz daha tam olarak menümüzü istediğimiz şekile getirmedik...
Bunları belirli bir düzende sıralamak vs birşeyler daha yapacağız kısaca diyecek olursak.

CODE:
#navigation -> ul -> li -> ul -> li


Her menü listesinden öğe we menü öğeleri başka bir listesini başlar. Biz CSS kuralları oluşturmak için ihtiyacı olan nokta özellikle bizim alt menülerimiz.Bunun için gereken kodumuz ise ;

CODE:
#navigation li ul
{ }

#navigation li:hover ul
{ }

#navigation li li
{ }



Özellikdeki yeni kurallar için ekleyelim ve bu alt kısımlarındada düzenlemelerimize devam edelim...

CODE:
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
}


Ana kategori ve alt başlıkları düzenmeye biraz daha hız vermek istiyorum aslında konu epey bir uzadı konu niteliği dağılmadan bitirelim hemen şu işi (:

CODE:
#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;

position:relative;
}

Şimdide konumu düzenlemeye şunun ile devam ediyoruz ;

CODE:
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
}


CODE:
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
}


CODE:
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999;
}


Bunlardan sonra daha düzenli bir görünüme kavuştuğunu söyleyebilirim.
Şimdi o zaman ana menü öğeleri üzerine açılan büyük bir yanıt alt menü var çok güzel...
Alt menülerde de bu konuda biraz düzenlemeler yapmamız şart olacak...

CODE:
<ul>
<li><a href="#">AltMenü1</a></li>
<li><a href="#">AltMenü 2</a></li>
<li><a href="#">AltMenü 3</a></li>
<li><a href="#">AltMenü 4</a></li>
</ul>

Son olarak da ;
CODE:
#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{color:#fff; text-decoration:underline;}

ile özellikle de bizim alt menü bağlantıları işaret ve bir bağlantı sonra ve metin dekorasyon beyaz bir yazı tipi rengi var olacaktır.
İşte bu kadar !!!

Mehmet Akif | TheCoders.net


M.Akif
mehmetakif@thecoders.net
28 Mayis 2009 20:21

İlgili Olabilecek Makaleler


Yorumlar (2)





l3urak
23 Kasim 2009 11:16
Merhabalar, Elinize sağlık güzel anlatmışsınız fakat ben ie 'de sorun yaşadım tekrar kontrol etmeme rağmen yaptığım bir hata da farketmedim.
Acaba ie de bir sorun varmı?


Oguzz
28 Temmuz 2011 12:56
ie kendi adıma konuşursam çok can sıkıcı bir tarayıcı. Malesef bir çok kişinin hala ie kullandığını düşünürsek yazdığımız css stillerini ie ile uyumlu hale getirmek zorundayız. Buda bambaşka bir konu uğraştırıcı (:

Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg