Përpara se të filloj me shpjegimin e teknikës, më duhet t’ju lajmëroj se kjo guidë përdor njohuritë e marra në guidën time tjetër “Sprites në CSS“. Nëse nuk e dini çfarë janë sprites dhe si përdoren në CSS, atëherë shkoni menjëherë në guidën e parë, përndryshe s’do kuptoni asgjë këtu.

Besoj se shumë prej jush e mbajnë mend kohën e artë të Adobe Flash (atëherë Macromedia Flash) dhe faqet me animacione kudo, ndonjëherë edhe pa pikë lidhje. Personalisht nuk më mungon ajo kohë, por diçka sigurisht që më ka munguar: animacionet e vogla të menuve. Në Flash mund ti bënim shumë thjeshtë dhe ngjanin bukur, por në CSS është e pamundur ti replikosh! Këtu hyn në lojë JavaScript, specifikisht libraria ime e preferuar JQuery.

Si funksionon teknika?

Para se t’ju bëj qejfin e të kaloj në kod, më duhet t’ju shpjegoj pak teori që atë kod ta kuptoni, jo vetëm ta kopjoni. Kodi HTML dhe CSS është praktikisht i njëjti me një sprite normale, vetëm se ndryshon në një gjë. Përmes JavaScript, do të gjenerojmë një element span i cili do të krijohet kur mouse-i vendoset mbi lidhjen. Pikërisht ky element i gjeneruar do të përmbajë gjendjen e dytë të imazhit (gjendjen hover) dhe do të shfaqet i animuar. Shpresoj të ketë sens kjo që thashë, megjithatë kur të shikoni edhe kodin besoj se gjithçka do ketë kuptim.

Diagrama e menusë

Si ti animojmë Sprites?

Le të fillojmë me atë që ju intereson të gjithëve. Ky është imazhi që kam përdorur për këtë guidë:

Imazhi i menusë

Fillimisht do të shkruajmë kodin HTML i cili është minimal. Vetëm një lidhje (anchor) me id të vendosur.

<a href="#" id="menu"></a>

Hapi i dytë është kodi CSS. Do deklarojmë disa rregulla standarte tipike për një sprite, të cilat e kthejnë lidhjen në element bllok, përcaktojnë gjatësinë (sa gjysma gjatësisë së imazhit) e gjerësinë dhe vendosin imazhin si background.

#menu{
     display:block;
     height:68px;
     width:247px;
     background:url(menu.png) no-repeat 0 0;
}

Deri tani jemi sipas manualit për të krijuar një sprite. Që nga ky moment gjërat ndryshojnë pak, sidomos me shtimin e kodit JavaScript. Më poshtë kam paraqitur të gijthë kodin JavaScript që e bën magjinë të ndodhë.

$(document).ready(function(){
     $('#menu').append('<span></span>').each(function(){
          var $span = $('> span.hover', this).css('opacity', 0);
          $(this).hover(function(){
               $span.stop().fadeTo(500, 1);
          }, function(){
               $span.stop().fadeTo(500, 0);
          });
     });
});

Para se t’ju zejë paniku, më lini kohë t’ju shpjegoj gjithçka. Që mos të bëheni konfuz, fillimisht është shpjegimi, më pas kodi.

Kjo pjesë bën të mundur që kodi të egzekutohet vetëm pasi dokumenti të ngarkohet, në mënyrë që JavaScripti mos të tentojë të aksesojë elementë të pa krijuar.

$(document).ready(function() {

Këtu i shtojmë një element span bosh menusë (me id #menu) përmes funksionit append(). Ky element do të mbajë pjesën e dytë të imazhit dhe do të shfaqet i animuar. Pjesa each() në fakt për këtë guidë nuk na shërben sepse kemi vetëm një menu. Por në skenarë realë do të kishim disa menu të vendosura mundësisht në një listë të parenditur. Në atë rast, lista (ul) do kishte id-në #menu dhe do shkruanim: $$(‘#menu li’) ose $(‘#menu’).children(‘li’). Shpresoj të jetë e qartë.

$('#menu').append('<span></span>').each(function(){

Ky kod e bën animacionin të ndodhë, ku përcaktohet që funksioni fadeTo() të ndodhë në hover dhe në dalje të mouse-it. Në hover parametri “transparenca” i fadeTo() bëhet 1 (pra 100%), ndërsa në dalje të mouse-it bëhet 0 (pra 0%). Parametri i parë që kam shënuar 500 është kohëzgjatja në milisekonda.

var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function(){
     $span.stop().fadeTo(500, 1);
}, function(){
     $span.stop().fadeTo(500, 0);
});

Gjëja e fundit që na ngelet është të përcaktojmë disa rregulla CSS për elementin span që gjeneruam me JavaScript. Rregullat do jenë egzaktësisht si ato që përcaktuam në fillim të guidës, por me një ndryshim të vetëm: zhvendosja vertikale e background ka marrë vlerë negative, në mënyrë që imazhi të ngrihet lart dhe të përfitojmë pjesën e dytë të tij.

#menu span.hover {
     display:block;
     height:68px;
     width:247px;
     background:url(menu.png) no-repeat 0 -68px;
}

Nëse keni ndjekur gjithçka sipas guidës, tashmë duhet të keni një rollover të animuar për faqet tuaja. Teknika është vërtetë e thjeshtë për tu përdorur dhe do i shtojë një gradë interaktiviteti faqes tuaj, të cilën jam i sigurt që vizitorët do e vlerësojnë. Kini parasysh që JQuery është një librari e pasur me funksione animimi që mund ti përdorni për ti dhënë një efekt tjetër menuve.

Mësim të mbarë.