Oporren aurretik konpromiso irmo bat hartu banuen ere, egun hauek jolasean ibiltzeari eskaini diot nire denbora, gai serioak alde batera utziz. Era askotako frogak egin ditudan arren, emaitzekin ez naiz oso gustura gelditu. Horregatik, eginiko froga guztietatik bakarra daukat zuekin guztiokin partekatzeko.
Betidanik, beno, ezagutu nuenetik, gustatu egin zait Mac-en interfazea. Horregatik, menu hau ikusi nuenean, ahaleginak egiten hasi nintzen gune batean inplementatzeko. Eredu ezberdinak aztertzen aritu nintzen eta, azkenean, jQuery erabiltzen duena hautatu nuen. Jarraian azalduko dizuet nola inplementatzen den, baina beste aukera bat nahiago baduzue, hona hemen beste aukeren zerrenda:
- Nitobi (azalpenak), Demo 1 eta Demo 2.
- Dojo erabiliz eginikoa, Dojo erabiltzen duen beste bat
- Mootools erabiltzen duena
- CSS fisheye
Nik jQuery erabiltzen duena hautatu nuen inplementatzeko arrazoi sinple batengatik: niretzat errazena zelako. Besterik gabe. Agian, beste batzuk nik hautatutakoa baina arinagoak dira, baina inplementatzeko garaian, zailtasun maila handiagoa dutenez, baztertu egin behar izan nituen.
Orain, saiatuko naiz menu hau inplementatzeko eman ditudan pausu guztiak azaltzen. Ea lortzen dudan.
Lehenik eta behin, hiru javascript hauek jaitsi eta gunera igo nituen: jQuery, iutil eta fisheye. Blogsome erabiltzen baduzue, gogoratu javascript horiek igo ahal izateko, “jpg” formatua eman behar diezuela. Horretarako, nahikoa da fitxategia Ohar-blokarekin ireki eta gordetzea “jpg” extensioa gehituz.
Hori egin eta gero, hiru javascript horiek gure gunearen <head> eta </head> etiketen artean kokatuko ditugu.
<script type="text/javascript" src="/images/jquery_01.jpg"></script>
<script type=”text/javascript” src=”/images/iutil.jpg”></script>
<script type=”text/javascript” src=”/images/fisheye.jpg”></script>
Ohartuko zaretenez, nire kasuan, script horien extensioa ez da ohiko “js”, baizik eta “jpg”. Hori, arestian azaldutako arrazoiarengatik besterik ez da.
Jarraian, estiloa emango diogu. Horretarako, nik honako kode hau erabili dut CSS fitxategian:
.fisheye {
text-align: center;
height: 50px;
position: relative;
}
a.fisheyeItem {
text-align: center;
color: #fff;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.fisheyeItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem span, {
display: none;
positon: absolute;
}
.fisheyeContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
Jarraian, irudiak gure gunera igoko ditugu. Nik PNG formatua duten ikonoak erabiltzea aholkatzen dizuet. Nahiz eta pisu handiagoa duten, eskaintzen duten kalitatea askoz ere handiagoa da eta asko antzematen da sagua gainetik pasatzerakoan.
Estiloa eman eta irudiak igo eta gero, menua kokatu nahi dugun gunean, honako kode hau jarri beharko dugu:
XHTML kodea
<div id="fisheye" class="fisheye">
<div style=”left: 640px; width: 400px;” class=”fisheyeContainter”>
<a style=”width: 40px; left: 0px;” href=”ezarri nahi duzun helbidea” class=”fisheyeItem”><img src=”irudiaren helbidea” width=”30″><span style=”display: none;”>Zure Testua</span></a>
<a style=”width: 40px; left: 40px;” href=”#” class=”fisheyeItem”><img src=”images/bar/email.png” width=”30″><span style=”display: none;”>E-posta</span></a>
<a style=”width: 40px; left: 80px;” href=”#” class=”fisheyeItem”><img src=”images/bar/display.png” width=”30″><span style=”display: none;”>Pantaila</span></a>
<a style=”width: 40px; left: 120px;” href=”#” class=”fisheyeItem”><img src=”images/bar/clock.png” width=”30″><span style=”display: none;”>Ordularia</span></a>
<a style=”width: 40px; left: 160px;” href=”#” class=”fisheyeItem”><img src=”images/bar/web.png” width=”30″><span style=”display: none;”>Webgunea</span></a>
<a style=”width: 40px; left: 200px;” href=”#” class=”fisheyeItem”><img src=”images/bar/home.png” width=”30″><span>Hasiera</span></a>
<a style=”width: 40px; left: 240px;” href=”#” class=”fisheyeItem”><img src=”images/bar/email.png” width=”30″><span style=”display: none;”>Iruzkinak</span></a>
<a style=”width: 40px; left: 280px;” href=”#” class=”fisheyeItem”><img src=”images/bar/display.png” width=”30″><span style=”display: none;”>Estekak</span></a>
<a style=”width: 40px; left: 320px;” href=”#” class=”fisheyeItem”><img src=”images/bar/clock.png” width=”30″><span>Nor gara gu</span></a>
<a style=”width: 40px; left: 360px;” href=”#” class=”fisheyeItem”><img src=”images/bar/web.png” width=”30″><span style=”display: none;”>Jakintza Ikastola</span></a>
</div>
</div>
Eta hauxe da guztia. Pausuak ongi eman badituzue, zuen webgunean honako menu bat izango duzue: