Yeni siteyi tasarlarken ana navigasyonu(üstte görülen) tek resim ile yaptım. Bu yeni navigasyonu oluşturan tek resim aşağıda görülmekte:
Bunu oluştururken "CSS Navigation Matrix" adı verilen bir yöntemden yararlandım. Buna göre her bir menü seçeneği için sadece arka plan resminin pozisyonu değiştirilerek, eskiden javascript ile yapılan "mouseover" ile resim değiştirme durumu görsel olarak sağlanıyor. Navigasyonu istediğim şekilde oluşturmak için şu şekilde bir XHTML bloğu yazdım:
<div id="navigation">
<ul id="nav">
<li id="home"><a id="A1" accesskey="b" runat="server" title="mirmirik.net.blogs();"
href="~/">başlangıç</a></li>
<li id="yaz"><a id="A2" accesskey="i" runat="server" title="mirmirik.net.software();"
href="~/content.aspx?l=12">yazılım</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/">hakkında</a></li>
</ul>
</div>
Daha sonra bu UL ve LI tag` lerinden oluşan liste için CSS` i oluşturdum. CSS` i oluştururken, her bir LI için ayrı ID kullandım(home, yaz, siy gibi). "#nav" id` sine sahip olan UL` deki her bir LI tag` i için text-indent özelliğini -999px olarak verdim ki, CSS kullanan gezginler için yazılar görülmesin. Ayrıca LI taglerinin içindeki her "anchor"(<a>) için arka plan resmini aynısı olarak tanımladım. Bu da şöyle bir CSS kodu çıkarttı:
/* 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 tanımını yaptıktan sonra her bir menü seçeneği için ayrı ayrı bu arkaplan resminin pozisyonunu değiştirmem gerekiyordu. Bunu yaparken de şu ölçülerden faydalandım:
Bu ölçülere göre, arka plan resmini her bir seçenek için hareket ettirirsem istediğim görüntü etkisini sağlayacaktım. Deneme yanılmalardan sonra şu CSS` i oluşturabildim:
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 kodlarını ilk başta yazdığım XHTML` e uygulayınca üstteki menü ortaya çıktı. Navigattion Matrix konusu ile ilgili öncelikle
Veerle` s blog sitesindeki
The XHTML/CSS template phase of my new blog, part 2 yazısından, daha sonra da aynı yazıda linki verilen
Navigation Matrix Reloaded yazılarından faydalandım.
Herkese iyi CSS` ler...
Kelimeler: AJAX,
ASP,
ASP.NET,
Başvuru Kaynağı,
Bedava, free,
Blog,
C#,
GNU,
Internet Explorer,
Javascript,
Microsoft,
Mozilla,
Netscape,
Open Source,
Site design,
Site dizayn,
Tasarım,
W3C,
Web sitesi,
XHTML
« Microsoft ve Bedava?¿!
|
Tag Cloud / nam-ı diğer Sözcük Bulutu »