CSS ile Listeli ve Alt Nesneli Menü

CSS ile Listeli ve Alt Nesneli Menü yapmayı öğrenelim. Bu güzel bir menü örneği pek çok yerde kullanılabilir.

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:



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



<div id="Menu_fme_aorgun">


<ul>


<li><a href=http://www.sanalkurs.net>SanalKurs.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 =)

Hadi iyi çalışmalar...

"CSS ile Listeli ve Alt Nesneli Menü" dersi için 10 yorum var

ye olmadan yorum ekleyemezsiniz !