Websitelerinin degismez ogelerinden biri de link menuleridir. Bircok website, bu menuleri daha da ilginc bir gorsel yapiya sokmak icin web tasariminda "roll-over" adini verdigimiz efektler kullanir. Bu Roll-Over efektini gerceklestirmek icin bircok websitesi JavaScript ve grafik kullanirlar. Halbuki ayni efekti saglamak icin CSS kullanabilirsiniz. Bu sayede, hem siteniz JavaScript’e bagimli kalmaz hem de daha da erisilir bir hale gelir.
Size, CSS ile roll-over efektinin nasil pisirilecegini ogretmeye calisacagim bu yazida.
Bu tarif icin gerekli malzemeler:
* 2 vazifeli grafik (istege bagli)
* 3 parca CSS kodu
* 1 tutam HTML listesi
Iki vazifeli grafik, bizim, bir resim ile iki kus vurmamizi saglayacak. Boylece roll-over yaratmak icin "on" ve "off" diye iki tane resime gerek kalmayacak. Benim bu ornekte kullanacagim resim asagida gorulmektedir:
Yukarida gordugunuz gibi, bir grafik icinde, hem "off" grafigi, hem de "on" grafigi mevcut. Onemli nokta bu grafiklerin boyutlarinin ayni olmasi ve bu grafikleri iceren ana grafigin (yukarida goruldugu gibi) yuksekliginin, bu iki grafigin yuksekliklerinin toplamina esit olmasi.
Grafigimiz hazir. Simdi menuyu olusturacak HTML’i yazmaya baslayabiliriz. Ben, menu icin HTML 4.01 icinde mevcut olan <ol> elementini kullanacagim. <ol>'in <ul> den tek farki, <ul>'nin sirasiz liste; <ol>'nin ise sirali liste olusturmasi. Eger bir menunun, siralanmis bir liste oldugunu dusunursek, <ol> gibi bir HTML elementinin bu ornek icinde kullanilmasinin daha anlamli olacagini dusunuyorum. Iste HTML kodumuz asagidaki gibi olacaktir:
Kod:
1. <ol id="menu">
2. <li><a href="#" title="Birinci Link icin buraya tikla " accesskey="1">Birinci Link</a></li>
3. <li><a href="#" title="Ikinci Link icin buraya tikla" accesskey="2">Ikinci Link</a></li>
4. <li><a href="#" title="Ucuncu Link icin buraya tikla" accesskey="3">Ucuncu Link</a></li>
5. <li><a href="#" title="Dorduncu Link icin buraya tikla" accesskey="4">Dorduncu Link</a></li>
6. <li><a href="#" title="Besinci Link icin buraya tikla" accesskey="5">Besinci Link</a></li>
7. </ol>
Menu listemizi olusturmak icin <ol> liste elementini kullandik. Ayrica <ol> listemize, CSS icinde kullanacagimiz ve referanslarda bulunacagimiz bir id verdik. id="menu" CSS icinde, bu listenin nasil gorunmesi gerektigini belirlememize yarayacak. Ayrica linkler icinde hem title hem de accesskey elementlerini kullandik.
title ve accesskey, erişilebilirlik icin onemli HTML elementleridir. title ile bu linkler hakkinda engelli kullanicilara daha fazla bilgi verebiliriz ve accesskey ile de fare kullanamayan engelli ziyaretcilerimizin klavye yardimi ile site icinde hareket etmelerini saglayabiliriz. Ornegin ALT+3 klavye tuslari bizi "Ucuncu Link" elementine goturecektir.
Butun bu asamalardan sonra CSS’imizi yazabiliriz. CSS bolumunde size 3 degisik CSS yazarak, 3 degisik menu sonucu elde etmenize yardimci olacagim. Birinci CSS size grafiksel dikey bir menu verecek.
1. CSS – Grafiksel Dikey Menu #menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
#menu ol, #menu li {margin:0; padding: 0 0 5px 0; list-style: none;}
#menu a:link, #menu a:visited {width:125px; height:26px; background: url(grafik.gif) no-repeat; color: #999; display: block; text-decoration: none; text-indent: 14px;}
#menu a:hover {background-position: 0 -26px; color: #900; text-decoration: none;}
Yukarida ki CSS’i incelerseniz goreceksiniz ki hazirladigimiz grafigi biz listedeki linkler icin arkaplan resmi olarak kullandik. Fakat yuksekligi 26 piksel vererek bu arkaplan resminin yanlizca bir kismini gostererek, grafigin "off" olarak gorunmesini sagladik. a:hover yani fare linkin uzerine geldiginde ise arkaplanin poziyonunu degistirerek grafigin "on" olmasini sagladik.
Önizleme 2. CSS – Grafiksel Yatay Menu #menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
#menu ol, #menu li {display: inline; list-style-type: none; }
#menu a:link, #menu a:visited {width:125px; height:26px; background: url(grafik.gif) no-repeat; color: #999; float:left; margin: 0; text-decoration: none; text-align:center;}
#menu a:hover {background-position: 0 -26px; color: #900; text-decoration: none;}
Yukaridaki CSS, dikey menu CSS’ine cok benzemesine ragmen, sonuc bize yatay menu vermekte. Bunu saglayan ise display:inline; elementi ve float:left elementidir.
Önizleme Konu Mehmet Doğan'a Aittir.Teşekkür Ederiz.
