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: