Css İle Dikey Menü yapımı
27 Temmuz 2008. Yazar: blackinci
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="#">Ana Sayfa</a></dt>
<dt><a href="#">Forum</a></dt>
<dt><a href="#">Uygulamalar</a></dt>
<dt><a href="#">Hakkında</a></dt>
<dt><a href="#">İletişim</a></dt>
</dl>
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.<dd>MENÜ</dd>
<dt><a href="#">Ana Sayfa</a></dt>
<dt><a href="#">Forum</a></dt>
<dt><a href="#">Uygulamalar</a></dt>
<dt><a href="#">Hakkında</a></dt>
<dt><a href="#">İletişim</a></dt>
</dl>
Geçelim css kısmına
dl.menu {
width:200px;
border: 1px solid gray;
font-family: Verdana,Arial,sans-serif;
font-weight:bold;
}
Menümüze font özellikleri ve genişlik değeri verdik width:200px;
border: 1px solid gray;
font-family: Verdana,Arial,sans-serif;
font-weight:bold;
}
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;
}
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 verdikheight: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;
}
dl.menu dt {
border-top: 1px solid silver;
height: 25px;
font-size: 12px;
overflow: hidden;
}
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ıkborder-top: 1px solid silver;
height: 25px;
font-size: 12px;
overflow: hidden;
}
dl.menu dt a {
display block;
height: 25px;
width: 100%;
padding: 5px 0 0 22px;
float: left;
text-decoration: none;
background: #fff url(menu.png) top left no-repeat;
color: gray;
}
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ıkdisplay block;
height: 25px;
width: 100%;
padding: 5px 0 0 22px;
float: left;
text-decoration: none;
background: #fff url(menu.png) top left no-repeat;
color: gray;
}
dl.menu a:hover {
background: #fff url(menu.png) 0 -25px no-repeat;
color:#FF6464;
text-decoration: none;
}
İşte hepsi bukadar grafiklerin PSD dosyasıda rar arşivinin içerisindedir alttaki bağlantıdan dosyayı indirebilirsiniz hoşcakalın...
Örnek - Ön İzleme
dikey-menu.rar [11.74 Kb] (İndirme: 191)