Menumuzde CSS Var

Menumuzde CSS Var

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:

CSS Grafik

 

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:

  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

  1. #menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
  2. #menu ol, #menu li {margin:0; padding: 0 0 5px 0; list-style: none;}
  3. #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;}
  4. #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. Sonucu burada gorebilirsiniz.

2. CSS – Grafiksel Yatay Menu

  1. #menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
  2. #menu ol, #menu li {display: inline; list-style-type: none; }
  3. #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;}
  4. #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. Yatay menu CSS sonucunu burada inceleyebilirsiniz.

3. CSS – Grafiksiz Yatay Menu

  1. #menu {margin: 0; padding: 0 0 20px 10px; font: bold 12px/14px Verdana, sans-serif; border-bottom: 1px solid #A7A7A7;}
  2. #menu ol, #menu li {display: inline; list-style-type: none;}
  3. #menu a:link, #menu a:visited {float: left; margin: 0 10px 4px 10px; text-decoration: none; color:#999; }
  4. #menu a:hover {border-bottom:4px solid #A7A7A7; padding-bottom:2px; background:transparent; color:#900; }

Yukaridaki CSS’de de gordugunuz gibi, grafiksiz olarakda, basit ama roll-over efektli menuler olusturabiliriz. Burada tum yaptigimiz, grafigi devreden cikarip, onun yerine border yani kenar cizgileri ile oynama yapmak. Bu CSS bize surada gordugunuz gibi sonuclar verecektir.

Sorular?

Yukaridaki orneklerde gordugunuz gibi, HTML elementine hic dokunmadan, CSS ile uc degisik menu olusturduk. Ayrica bu menuler, JavaScript ile olusturulan menulere gore daha anlamli ve erişilebilir. Eger yukarida kullanilan CSS elementleri ile ilgili bir sorunuz olursa, asagidaki yorum kismini kullanabilirsiniz.



Top
Menu