Menü ve Reklam Alanı
Sayfayı Paylaş

THB - Ücretsiz Hizmetler

basitdikeymenuyapimi

Basit Dikey Menü Yapımı

Bugün sizlere basit bir şekilde nasıl dikey menü yapılır onu anlatacağım.

Önizleme:








Gerekli Resimler:





CSS kodlarını yazmaya geçebiliriz.

Öncelikle menüyü kapsayacak katmanla beraber genel ul için bir kod yazıyoruz. (Siz tek ul ilede yapabilirsiniz.)
#dikeymenu ul {
width: 300px;
height: 30px;
list-type:none;
margin: 0 ;
padding: 0;  }

Şimdi her bir sekmemizin görünümünü ayarlayalım.
#dikeymenu ul li a {
display: block;
background: url(/dikeymenu1.png);
width: 300px;
height: 30px; 
padding-top:10px;
padding-left: 10px;
font-family:Arial;
color: #000;
font-size:15px; 
text-decoration: none; }

Şimdi üstüne gelince görünecek ikincil arkaplan için kodumuzu tanımlayalım.
#dikeymenu ul li a:hover {
background: url(/dikeymenu2.png);
padding-top:10px;
padding-left: 10px;
font-family:Arial;
color: #fff;
font-weight:bold;
font-size:12px; 
text-decoration: none; }

Bir iki ufak açıklama:

//Öncelikle list-type:none değeri menümüzün başındaki noktaları kaldırmak için.
//display:block değeri: linklerin alt alta hizalı şekilde geçmesi için.
//Menü arkplanının yüksekliğinin 40px olmasına rağmen 30px vermemizin nedeni padding-top değerine 10px verdiğimizden.

HTML:
<div id="dikeymenu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: ruletka51( xvlkbtumhepsiburada.tr.gg ), 06.01.2014, 11:27 (UTC):
ïîêåğ íà äåíüãè ñ òåëåôîíà android, êàçèíî ÷àïëèí áîíóñ!

Yorumu gönderen: slot95( jbbdipztumhepsiburada.tr.gg ), 22.11.2013, 02:22 (UTC):
êàçèíî èãğàòü îíëàéí èãğû, èãğîâûå àâòîìàòû crazy fruits de la passion.

Yorumu gönderen: poker27( rlifkdntumhepsiburada.tr.gg ), 16.11.2013, 01:18 (UTC):
èãğîâûå àâòîìàòû ïîïîëíèòü qiwi êîøåëåê easypay èëè îíëàéí ïîêåğ íà äåíüãè îòçûâû.

Yorumu gönderen: slot59( xenpuktumhepsiburada.tr.gg ), 08.11.2013, 03:45 (UTC):
êàçèíî èíòåğíåò àçàğò, èíòåğíåò êàçèíî àííà êàğåíèíà.



Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Mesajınız:

Bugün 4 ziyaretçi (94 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=