CSS ile Listeli ve Alt Nesneli Menü

01-06-2008 10:51 AM

CSS ile ilgili 2. dersim, bu kez bir menü yapacağız. Menümüzün listeleme ve alt nesne özellikleri de olacak.

Öncelikle style bilgilerini girelim:

Kod:

<style>

/* temel */

#Menu_fme_aorgun ul {

list-style: none;

margin: 0;

padding: 0;

}

#Menu_fme_aorgun {

width: 150px;

}

#Menu_fme_aorgun li {

display:inline;

}

/* menu */

#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;

}

/* Alt Menu */

#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;

}

/* 2 Alt Menu */

#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 sisteme tanıttık. Şimdi tek yapmamız gereken bu bilgileri html kodları içinde kullanmak, aynen böyle:

Kod:

<div id="Menu_fme_aorgun">

<ul>

<li><a href=http://www.forumaske.net>ForuMaskE.NeT</a></li>

<li><a href="deneme.html">nesne 1</a></li>

<li><a href="deneme.html">nesne 2</a></li>

<li><a href="deneme.html">nesne 3</a></li>

<li><a href="deneme.html">nesne 4</a>

<ul>

<li><a href="deneme.html">alt nesne 1</a></li>

<li><a href="deneme.html">alt nesne 2</a></li>

<li><a href="deneme.html">alt nesne 3</a></li>

<li><a href="deneme.html">alt nesne 4</a>

<ul>

<li><a href="deneme.html">2 alt nesne 1</a></li>

<li><a href="deneme.html">2 alt nesne 2</a></li>

</ul></li>

<li><a href="deneme.html">alt nesne 5</a></li>

</ul></li>

<li><a href="deneme.html">nesne 5</a></li>

<li><a href="deneme.html">nesne 6</a></li>

<li><a href="deneme.html">nesne 7</a></li>

</ul>

CSS kodlarındaki resim adreslerini değiştirmenizi öneririm, imageshack'e güvenilmez Evet
Hadi iyi çalışmalar...

Not :

Moderator olmak isteyen arkadaşlar lütfen özel mesaj atmayınız. Başvurularınız değerlendirilmeyecektir.
Forumda karşılaştığınız sorunlarla ilgili özel mesaj atmayınız. Soru - Sorun bölümüne yeni konu açarak sorunlarınızı belirtebilirsiniz.
Herkesi Moderator yapıyoruz ! Başvurmak için tıklayın !

Normal Mod \| Çizgisel Mod CSS ile Listeli ve Alt Nesneli Menü
Yazar	Mesaj