Blackinci » CSS » Css İle Dikey Menü yapımı

(Oy Verenler: 24)

Css İle Dikey Menü yapımı

1805 Kere Okunmuş

CSS blackinci 27 Temmuz 2008 Haberi Yazdır

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.
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

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 verdik

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ık

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ık

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

atadığımız arkaplan resmini maus üstüne geldiğinde 25 yukarı kaydırdık renk verip alt çizgi oluşmasını istemedik.

İş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: 141)

Bu Konuda 17 Yorum Yapılmış
Bu Konuda 17 Yorum Yapılmış

	MuRaTTi	27 Temmuz 2008 20:52 Alıntı Yap #1
teşekkürler davut abi döktürmüşsün yine :D

	-busted-	30 Temmuz 2008 02:27 Alıntı Yap #2
Her zaman ki gibi süper bir çalışma sergilemişsin Blackinci , çok teşekkürler . Emeğine sağlık :)

	ByResul	30 Temmuz 2008 05:54 Alıntı Yap #3
Vay vay vay kalite abicim ya öptüm yanaklarından

	firlama	30 Temmuz 2008 20:06 Alıntı Yap #4
abi eline koluna sağlık döktürmüşsün hakkaten...

	AgesKoch	31 Temmuz 2008 01:31 Alıntı Yap #5
eline sağlık yine çok iyi bir anlatım ve çok iyi bir paylaşım, sayende css öğrendim

	Erbilen	31 Temmuz 2008 16:17 Alıntı Yap #6
Teşekkürler gerçektende css hakkında ne öğrendiysem hayri bey ve sizden öğrendim :)

	blackinci	31 Temmuz 2008 17:54 Alıntı Yap #7
Hepinize yorumlarınız için teşekkür ederim arkadaşlar

	MuRaTTi	1 Ağustos 2008 12:48 Alıntı Yap #8
ne demek abi görevimiz

	Arno	2 Ağustos 2008 15:36 Alıntı Yap #9
güzel anlatım olmuş. dt dl nin ul li den farkı yanlış hatırlamıyorsam başına madde işareti almaması bir tane de kullanım farkı olması lazım. Ama önemli olan tanımın içeriği olduğu için istersen abdulrezak diye tanımla bişey fark etmez :)

	Oğuzhan SARI (53HaCKeR89/RizeliGenc	4 Ağustos 2008 14:38 Alıntı Yap #10
Çok süper olmuş.. ul suz il siz bir menuyü bu kadar seveceğimi bilemezdim :) Emeğine sabrına sağlık.. Çok işime yaradı..

	Kemal	4 Eylül 2008 10:31 Alıntı Yap #11
Saolun çok güzel ve açıklayıcı olmuş

	Most_Speed	20 Ekim 2008 09:54 Alıntı Yap #12
ya ben bunu forum ansayfasına yan blok olarak yaptım gayet güzel ama tabloyla eşitleyemedim <br/> kodu veriyorum biraza aşağı kayıyor siliyorum bu seferde az bişey yukarda kalıyor forum tablosunda. Yardım ederseniz sevinirim saygılarımlai flood gibi olucak ama ie de çok berbat görünüyor

	blackinci	20 Ekim 2008 15:15 Alıntı Yap #13
Yazdığınız kodlardan dolayı sizde öyle görünüyordur benim yaptığım örnek sayfasında İE veya başka bir tarayıcıda hiç bir fark yok. Bu kaymayıda bir resimle gösterirmisiniz

	Most_Speed	21 Ekim 2008 04:24 Alıntı Yap #14
teşekkür ederim ilgilendiğiniz için resim link'i aşağıdadır http://img522.imageshack.us/my.php?image=gfdgdfggx2.png ie deki sorunda eksik belirtiğim birşey var kenarlık çizgileri yok