mirmirik / günlük / CSS ve XHTML ile Site Navigasyonu

CSS ve XHTML ile Site Navigasyonu

Posted on

Yeni siteyi tasarlarken ana navigasyonu(üstte görülen) tek resim ile yaptim. Bu yeni navigasyonu olusturan tek resim asagida görülmekte:


<div id='navigation'>
<ul id='nav'>
<li id='home'><a id='A1' accesskey='b' runat='server' title='mirmirik.net.blogs();'
href='~/'>baslangiç</a></li>
<li id='yaz'><a id='A2' accesskey='i' runat='server' title='mirmirik.net.software();'
href='~/content.aspx?l=12'>yazilim</a></li>
<li id='siy'><a id='A3' accesskey='o' runat='server' title='mirmirik.net.politics();'
href='~/content.aspx?l=13'>siyaset</a></li>
<li id='gun'><a id='A4' accesskey='a' runat='server' title='mirmirik.net.diary();'
href='~/content.aspx?l=11'>günlük</a></li>
<li id='hak'><a id='A8' accesskey='a' runat='server' title='mirmirik.net.about();'
href='~/rights/'>hakkinda</a></li>
</ul>
</div>

Daha sonra bu UL ve LI tag` lerinden olusan liste için CSS` i olusturdum. CSS` i olustururken, her bir LI için ayri ID kullandim(home, yaz, siy gibi). ‘#nav’ id` sine sahip olan UL` deki her bir LI tag` i için text-indent özelligini -999px olarak verdim ki, CSS kullanan gezginler için yazilar görülmesin. Ayrica LI taglerinin içindeki her ‘anchor'(<a>) için arka plan resmini aynisi olarak tanimladim. Bu da söyle bir CSS kodu çikartti:


/* Navigation */
#navigation { position: absolute; top: 141px; float: left; height: 32px; padding-left: 0px; padding-top: 5px; margin: 0; display: block; }

ul#nav { }
ul#nav li { padding: 0; margin: 0; float: left; text-indent: -9999px; list-style-type: none; }
ul#nav li a { width: 90px; height: 32px; border: 0; display: block; text-decoration: none; background: transparent url(../../images/blues/navbg.jpg) no-repeat; }

Genel navigasyon tanimini yaptiktan sonra her bir menü seçenegi için ayri ayri bu arkaplan resminin pozisyonunu degistirmem gerekiyordu. Bunu yaparken de su ölçülerden faydalandim:


li#home a:hover, li#home a:focus { background-position: 0px -32px; }
li#yaz a:link, li#yaz a:visited { background-position: -90px 0px; }
li#yaz a:hover, li#yaz a:focus { background-position: -90px -32px; }
li#siy a:link, li#siy a:visited { background-position: -180px 0px; }
li#siy a:hover, li#siy a:focus { background-position: -180px -32px; }
li#gun a:link, li#gun a:visited { background-position: -270px 0px; }
li#gun a:hover, li#gun a:focus { background-position: -270px -32px; }
li#hak a:link, li#hak a:visited { background-position: -360px 0px; }
li#hak a:hover, li#hak a:focus { background-position: -360px -32px; }

Bu CSS kodlarini ilk basta yazdigim XHTML` e uygulayinca üstteki menü ortaya çikti. Navigattion Matrix konusu ile ilgili öncelikle Veerle` s blog sitesindeki The XHTML/CSS template phase of my new blog, part 2 yazisindan, daha sonra da ayni yazida linki verilen Navigation Matrix Reloaded yazilarindan faydalandim.

Herkese iyi CSS` ler…

Eklemek istedikleriniz?

Top