KingThemes.Tr.GG | WEBMASTER-TEMALAR-WORDPRESS-JOOMLA-OYUNLAR

Uzun Süren Bir aradan sonra kendime ayırabildiğim vakti birşeyler ile değerlendirmek istedim bir dikey menü yaptım
HTML kodlarmızla başlayalım bakalım

 

<dl class="menu"> <dd>MENÜ</dd> <dt><a href="#" _fcksavedurl="#">Ana Sayfa</a></dt> <dt><a href="#" _fcksavedurl="#">Forum</a></dt> <dt><a href="#" _fcksavedurl="#">Uygulamalar</a></dt> <dt><a href="#" _fcksavedurl="#">Hakkında</a></dt> <dt><a href="#" _fcksavedurl="#">İletişim</a></dt> </dl></body></html>

Yukarıda gördüğünüz gibi DL sıralı liste kodlarını kullandım UL de kullanılabilirdik ama bu sefer farklı olsun istedim.
Geçelim css kısmına ;
 

dl.menu { width:200px; border: 1px solid gray; font-family: Verdana,Arial,sans-serif; font-weight:bold; }</body></html>
 

Menümüze font özellikleri ve genişlik değeri verdik.
 

dl.menu dd { height:24px !important; /* Modern Tarayıcılar için */ height:30px; /* İE6 için */ background: url(menu.png) 0 -50px no-repeat; padding: 6px 0 0 3px; margin:0; font-size: 14px; color: lightyellow; }</body></html>
 

Menü başlığımız için arka plan resmi verdik yükseklik değeri verdik ve margin değerini sıfırladık font boyutu ve renk değeri verdik.
 

dl.menu dt { border-top: 1px solid silver; height: 25px; font-size: 12px; overflow: hidden; }</body></html>
 

td kodunun üst kısmına border uyguladık gükseklik verdik font boyutun verdik ve yüksekliğin taşmaması için overflow hidden kodunu kullandık

 

a koduna blok görünümü ve yükseklik verdik genişlik verdik linklerimize alt çizgi koymadık ve renklendirip sola yasladık son olarak arkapan resmi atadık

 

dl.menu a:hover { background: #fff url(menu.png) 0 -25px no-repeat; color:#FF6464; text-decoration: none; }</body></html>

ve bitti işte kodları
 

Linkleri kırık olan tasarımları indiremiyorsanız tüm arşivi tümüyle indirebilirsiniz...
İndirmek için TIKLAYIN