CSS Liste Şeklinde Menü Yapımı (Dikey Menü)

Son Yazılar
Kategoriler
Son Yorumlar
- Osman Demirci: Şarkı aslında çok güzeldi ama yazık oldu. haris al... »
- mustafa: bakın indirdiğiniz zip dosyasını C:/Program Files&... »
- Mc_TaRaNTuLa: yha bot paketini indirdim cs yi yeniden kurdum kon... »
- BLooDySw0Rd '.+: :S:S:S:S:S NoN SteamDa Niye OLmuyor.... »
- isimsiz: çok kolay orda bot sayısı yazıyor oraya 32 yaz 32 ... »

CSS ile Liste Şeklinde Menü(Dikey)

17 Şubat 2008

ErhanK

CSS ile yapılan, liste şeklinde ve alt nesneleri olan bir menü.

Bu kez bir menü yapacağız. Menümüzün listeleme ve alt nesne özellikleri de olacak.

Öncelikle style kodlarını girelim. Buradaki kodları sayfanızın <head></head> arasına yerleştirin.

DÜZ YAZI

CSS:

<style type="text/css">
<!--
/* temel */
#Menu_fme_aorgun ul {
list-style: none;
margin: 0;
padding: 0;
}
#Menu_fme_aorgun {
width: 150px;
}
#Menu_fme_aorgun li {
display:inline;
}
#Menu_fme_aorgun li a:link, #Menu_fme_aorgun li a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 0.6em;
font-weight: bold;
color: White;
height: 12px;
display: block;
background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif);
padding: 5px 0 6px 20px;
}
#Menu_fme_aorgun li a:hover {
color: #ACD373;
background: url(http://img374.imageshack.us/img374/7254/bckmenuel6.gif) 0 -23px;
padding: 5px 0 6px 20px;
}
#Menu_fme_aorgun li li a:link, #Menu_fme_aorgun li li a:visited {
font-weight: normal;
background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif);
padding: 2px 0 3px 30px;
}
#Menu_fme_aorgun li li a:hover {
background: url(http://img524.imageshack.us/img524/7609/bcksubmenuqi5.gif) 0 -17px;
padding: 2px 0 3px 30px;
}
#Menu_fme_aorgun li li li a:link, #Menu_fme_aorgun li li li a:visited {
background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif);
padding: 0 0 1px 40px;
}
#Menu_fme_aorgun li li li a:hover {
background: url(http://img122.imageshack.us/img122/8743/bcksubsubmenuia8.gif) 0 -13px;
padding: 0 0 1px 40px;
}
-->
</style>

Burada her nesne için kod tanımlaması yaptık, style bilgilerini sayfaya tanıttık. Şimdi tek yapmamız gereken bu bilgileri html kodları içinde kullanmak, şu şekilde;

DÜZ YAZI

HTML:

<p id="Menu_fme_aorgun"> </p>
<ul>
<li><a href="http://www.cssimbenim.com/">CSSimBenim.com</a></li>
<li><a href="css-menu.html">nesne 1</a></li>
<li><a href="css-menu.html">nesne 2</a></li>
<li><a href="css-menu.html">nesne 3</a></li>
<li><a href="css-menu.html">nesne 4</a>
<ul>
<li><a href="css-menu.html">alt nesne 1</a></li>
<li><a href="css-menu.html">alt nesne 2</a></li>
<li><a href="css-menu.html">alt nesne 3</a></li>
<li><a href="css-menu.html">alt nesne 4</a>
<ul>
<li><a href="css-menu.html">2 alt nesne 1</a></li>
<li><a href="css-menu.html">2 alt nesne 2</a></li>
</ul>
</li>
<li><a href="css-menu.html">alt nesne 5</a></li>
</ul>
</li>
<li><a href="css-menu.html">nesne 5</a></li>
<li><a href="css-menu.html">nesne 6</a></li>
<li><a href="css-menu.html">nesne 7</a></li>
</ul>

Sonuç;

CSS Dosyalarınızı Optimize Edin
Padding ve Margin Arasındaki Farklar
CSS Position Özellikleri
Internet Explorer İçin Farklı CSS Kullanın
Hoverbox CSS Resim Galerisi
RSS TrackBack

Bir de Bunlar Var

Yatay Tab Menü

CSS İle Hazırlanmış Harika Siteler

CSS Dosyalarınızı Optimize Edin

CSS Position Özellikleri

Mor Yatay Tab Menü

Bu Yazıyı Paylaşın

Kategori: CSS

Etiketler: CSS, css menü, css menü yapımı, dikey menü, liste

You can leave a response, or trackback from your own site. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.

“CSS ile Liste Şeklinde Menü(Dikey)” için 4 Yorum

Kemsay diyor ki:

04 Şubat 2009, 13:12

ellerine saglı güzel tebrik ederim
yamakasi diyor ki:

19 Mart 2009, 23:20

krdş menüyü siteme uygulayamadım.resimlerin url lerini falan kendime göre düzenledm ama yazı olarak çıkıor.normal css kodu olarak yollar mısın
Emre diyor ki:

25 Haziran 2009, 17:51

Teşekkür ederim, bu güzel yazı için.
akın diyor ki:

13 Şubat 2010, 22:04

saol.süper paylaşım.