Gönderen: cssarsiv | Nisan 11, 2008

Css – Grafiksiz Yatay Menu

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:

<ol id=”menu”>
<li><a href=”#” title=”Birinci Link icin buraya tikla ” accesskey=”1″>Birinci Link</a></li>
<li><a href=”#” title=”Ikinci Link icin buraya tikla” accesskey=”2″>Ikinci Link</a></li>
<li><a href=”#” title=”Ucuncu Link icin buraya tikla” accesskey=”3″>Ucuncu Link</a></li>
<li><a href=”#” title=”Dorduncu Link icin buraya tikla” accesskey=”4″>Dorduncu Link</a></li>

<li><a href=”#” title=”Besinci Link icin buraya tikla” accesskey=”5″>Besinci Link</a></li>
</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.

#menu {margin: 0; padding: 0 0 20px 10px; font: bold 12px/14px Verdana, sans-serif; border-bottom: 1px solid #A7A7A7;}
#menu ol, #menu li {display: inline; list-style-type: none;}
#menu a:link, #menu a:visited {float: left; margin: 0 10px 4px 10px; text-decoration: none; color:#999; }
#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.

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Kategoriler

%d blogcu bunu beğendi: