CSS sprites meni s hover efektom

CSS sprites meni
Slika sprites je slika, ki vsebuje več slik. Sliko sprites določimo za ozadje nekega HTML elementa, do posameznih slik pa pridemo tako, da določimo poseben položaj sprites slike. CSS sprites tehnika je izredno preprosta, ko dojamete, kaj je potrebno storiti, da pridete do posamezne slike.

 

PRIKAZ - CSS SPRITES MENI

 

{iframe height="70" frameborder="0" width="500" scrolling="no" style="background-color:#FFF;" border="0" name="form" allowtransparency="false" margin-left="20px"}/css_primeri/css_sprites_meni/a.html"{/iframe}

 

Na spletni strani uporabljamo slike. Več, kot je slik, več zahtev po prikazu teh slik pošljemo strežniku, kar posledično pomeni, da se stran dalj časa odpira. S CSS sprites lahko te zahteve zmanjšamo na eno samo, saj vse slike vključimo v eno samo sliko.

Ta slika vsebuje slike gumbov v vseh stanjih, robove, header, logo, v bistvu ves slikovni material lahko združimo v eno samo sliko.

Primer sprites slike:

css_sprites_primer



Posamezne slikice iz te velike slike nato dobimo ven tako, da s CSSjem določimo položaj slike.

CSS vodič vam bo pokazal, kako s CSS sprites narediti meni, ki ima v eni  sliki zajeta vsa stanja elementov menija. Stanje navadnega elementa, stanje elementa, ko gremo z miško čezenj (hover) ter stanje izbranega elementa. Stanje že obiskane povezave se mi ne zdi smiselno, zato bom to stanje izpustil.

Za meni bomo uporabili spodnjo sprites sliko.

meni_css_sprite


Kot lahko vidite je v sliko vključenih 14 različnih slik, kar pomeni, da smo zmanjšali število zahtev iz 14 na 1 in to le pri enem meniju.

HTML in CSS koda:

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">

ul#seznam {
list-style-type:none;
margin:0;
padding:0;
}

#seznam li {
float:left;
height: 48px;
}

#seznam li a {
display:block;
height: 48px;
text-decoration: none;
background: url('meni_css_sprite.png');
}

.lRob, .dRob{width: 22px; background: url('meni_css_sprite.png');}
    .lRob{ background-position: 0 0;}
    .dRob{ background-position: -379px 0;}
       
#seznam li.domov a{ width: 78px; background-position: -22px 0;}
    #seznam li.domov a:hover{ background-position: -22px -98px;}
    #seznam li.domov a.izbran{ background-position: -22px -49;}
   
#seznam li.oNas a{ width: 83px;    background-position: -100px 0;}
    #seznam li.oNas a:hover{ background-position: -100px -98px;}
    #seznam li.oNas a.izbran{ background-position: -100px -49;}
   
#seznam li.ponudba a{ width: 98px; background-position: -183px 0;}
    #seznam li.ponudba a:hover{ background-position: -183px -98px;}
    #seznam li.ponudba a.izbran{ background-position: -183px -49;}
   
#seznam li.kontakt a{ width: 98px; background-position: -281px 0;}
    #seznam li.kontakt a:hover{ background-position: -281px -98px;}
    #seznam li.kontakt a.izbran{ background-position: -281px -49;}

</style>

</head>
<body>

<ul id="seznam">
  <li class="lRob"></li>
  <li class="domov"><a class="izbran" href="/a.html"></a></li>
  <li class="oNas"><a href="/b.html"></a></li>
  <li class="ponudba"><a href="/c.html"></a></li>
  <li class="kontakt"><a href="/d.html"></a></li>
  <li class="dRob"></li>
</ul>

</body>
</html>
PRIKAZ - CSS sprites


Razlaga kode:

ul#seznam določa izgled celotnega seznama, ki ga bomo mi uporabili, kot vodoravni meni. Padding in Margin sta nastavljena na 0 zato, da je meni pozicioniran v levem zgornjem kotu. Z margin lahko v svoji spletni strani nadzirate odmik celotnega menija (zgoraj, desno, spodaj, levo (npr. margin: 20px 0 12px 3px; ).

#seznam li določa izgled posameznih elementov menija. Ker imajo vsi elementi menija velikost 48px smo tukaj določili velikost za vse elemente. S tem nam ni treba nato ponovno določati višine pri vsakem elementu posebej.
Float: left; je določen zato, da so vsi elementi v eni vrstici oz. da je meni vodoraven. Če bi float: left odstranili bi bil to navpičen meni. Če potrebujete navpičen meni le to odstranite in ga boste dobili. Vse ostalo bo delovalo enako, kot pri vodoravnem meniju.

#seznam li a določa izgled vsake povezave, ki je v meniju (oz. v seznamu #seznam). Ker s tem upravljamo vse povezave je najbolj smotrno, da tukaj nastavimo sliko za ozadje, ki bo vsebovana v vseh elementih menija. Položaja slike za ozadje nam tu še ni potrebno definirati. Sprites slike bomo uporabili kasneje, pri vsaki povezavi posebej.

.lRob in .dRob določata izgled levega in desnega roba menija. Ker robova nista povezavi sem ozadje določil znački <li>. Uporabil sem CSS sprites in s kodo background-position: določil položaj slike za ozadje tako, da se v tistem <li> prikaže le točno določena slika, v mojem primeru v .lRob levi rob in v .dRob desni rob.

#seznam li.domov a določa izgled povezave, ki je v <li> z določenim razredom class="domov". Takoj na začetku določimo širino tega elementa menija (HOME). Če bi imeli vsi elementi menija enako širino bi jo lahko definirali že prej (kot npr. višino).
Ker smo sprites sliko določili vsem povezavam nam tega ni potrebno še enkrat narediti. Tu določimo le še položaj slike za ozadje in sicer za tri stanja. Prvo stanje ( #seznam li.domov a ) je stanje, ko je povezava nedotaknjena. Takrat določimo svetlo sivo slikico z napisom HOME. Izgled povezave, ko greste z miško čez določa hover ( #seznam li.domov a:hover ). Tukaj določimo položaj oranžne slikice z napisom HOME. Zadnji položaj sprites slike določimo za stanje, ko je povezava izbrana. Tukaj se pokaže edina pomanjkljivost tega menija. Za aktivno povezavo moramo določiti poseben razred ( .izbran ). V datoteki domov.html je razred class="izbran" določen le za prvi <li>, v datoteki oNas.html je razred class="izbran" določen le za drugi <li> in tako naprej. Izgled povezave, ko je izbrana stran aktivna določa  #seznam li.domov a.izbran . Tudi tukaj moramo določiti le položaj sprite slike v ozadju, tako, da se prikaže temno siva slikica HOME.


Enaka razlaga, kot za razred domov velja tudi za vse druge postavke menija (oNas, ponudba, kontakt).


Zaključek: Slika sprites je slika, ki vsebuje več slik. Sliko sprites določimo za ozadje nekega HTML elementa (ponavadi a, li ali div), do posameznih slik pa pridemo tako, da določimo poseben položaj sprites slike.

Pri določanju položaja notranjih slik si jaz pomagam s Photoshopom, kjer z Marquee toolom :m: označim odmik slike od zgornjega in desnega roba, nato pa številke le prepišem v CSS in posamezna slika je nemudoma postavljena v pravi položaj. Če poznate kakšno boljšo tehniko jo prosim napišite med komentarji.

CSS sprites tehnika je izredno preprosta, ko dojamete, kaj je potrebno storiti, da pridete do posamezne slike. Pri uporabi vam želim veliko veselja in učinkovitosti, če pa se vam kje zatakne oz. imate kakšno vprašanje nas lahko vprašate na našem CSS forumu.

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.