Css Menü Yapımı İsteği

İlk mesaja ilk yanıt benden olsun :smile:

öncelikle html menu kodlarımızı yazıyoruz;

<!-- yatay menu --->
<ul id="menu">
<li><a href="adres">Link</a></li>
<li><a href="adres">Link</a></li>
<li><a href="adres">Link</a></li>
<li><a href="adres">Link</a></li>
<li><a href="adres">Link</a></li>
</ul>

<!--- dikey menu --->
<ul id="menu2">
<li><a href="adres">Link1</a></li>
<li><a href="adres">Link2</a></li>
<li><a href="adres">Link3</a></li>
<li><a href="adres">Link4</a></li>
<li><a href="adres">Link5</a></li>
</ul>

Genişletmek için tıkla ...

şimdi sıra cssmizi yazmaya geldi;

/*yatay menu için*/
#menu{width:300px;height:30px;line-height:30px;margin:0 auto;background:#ccc;padding:0;}
#menu li{float:left;list-style-type:none;margin:0 5px;}
#menu li a{text-decoration:none;color:#000;}
#menu li a:hover{color:#fff;}

/*dikey menu için*/
#menu2{width:100px;height:200px;background:#ccc;margin:0;padding:0;}
#menu2 li{list-style-type:none;margin:0 5px;}
#menu2 li a{text-decoration:none;color:#000;}
#menu2 li a:hover{color:#fff;}

Genişletmek için tıkla ...

Birazda anlatalım;
İlk css kodumuzda listeleme yapacağımız elemanın kapsayıcısı olan ul yi actık ve css değerlerini girdik. Bu değerler width=genişlik, height=yükseklik, background=arkaplan rengi, margin:0, default margin değerleri almaması için 0, padding:=margin ile aynı nedenden 0.line-height=yükseklik değerini vererek dikine hizalıyoruz.margin:0 auto ile sayfaya ortaladık(yan menu için)
İkinci kodumuzla listeleri düzenliyoruz. yan menude float:left ile yanyana getiriyoruz, margin ile aralarını acıyoruz.
Üçüncü kodumuzda, linklerimize renk kodu veriyoruz.
Dördüncü kodumuzda, link üstüne gelince değişsecek rengi belirliyoruz.

buda uygulama dosyası indirip kullanabilirsiniz, biraz basit daha farklı isteklere daha kapsamlısınıda yazarız sonra
https://www.4shared.com/document/-z7ngjXk/menu.html

Merhaba Arkadaşım bu sitede gerekli bilgileride bulabilirsin.

Teşekkürler arkadaşar...

Kardeş türkçe ve en iyi anlatım ..................................