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>