HTML + CSS image sprite menü

Szerző:   |   2011-02-17

Már megint egy menü. Viszont most egy olyan módszer amiről még nem volt szó a blogon. Meg lehetne oldani úgy is, hogy egyetlen képet használunk a menühöz, pl. úgy, hogy egymás alá tesszük a menu.png és a menu_on.png-t egyetlen képbe. Ilyenkor viszont használunk kellene a függőleges pozíció eltolást is.

Videó

Videó

32 hozzászólás

  1. 2013. június 13. csütörtök - 15:11

    Köszi, hogy feltöltötted cyrex! Én például nem is tudtam, hogy létezik a hover atribútum a css-ben.

  2. 2012. június 9. szombat - 00:00

    Üdv Cyrex!
    Először is nagyon szépen köszönöm a tutorial-okat.
    Az lenne a kérdésem, hogy van-e valami hátránya annak, hogyha nem “sprite-osan” csinálom a menüt, hanem pl.felvágom photoshoppba a menüt külön képekre, és beleteszem divekbe. Tehát nem 1-1 kép lesz, hanem 4-4.

    • 2012. június 12. kedd - 19:31

      A betöltődési ideje gyorsabb elvileg, ha sprite-ot használsz, mert akkor csak 1 képet kell letöltenie és azt jeleníti meg mindenhol. Egyébként én sem vagyok oda a sprite-okért.

    • 2012. augusztus 31. péntek - 12:53

      Tényleg gyorsabb spriteosan, főleg ha egy képben van a hover is. Mert amikor letölti a menü képét, akkor már a hovert is letöltötte, így nem kell rögtön akkor letöltenie amikor fölé viszed az egeret és nem lesz villódzás. 🙂

  3. 2012. május 9. szerda - 12:29

    Lenne egy problémám. Nem rendez középre semmit :/ Pl. itt a fejlécem css-e:

    div.fejlec
    {
    margin: 10px auto;
    border:solid #000000;
    position:fixed;
    background-image:url(header.jpg);
    height: 250px;
    width: 850px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    • 2012. július 3. kedd - 20:35

      Szerintem a “radius”-oknál elég csak egyszer odaírni a 10 pixelt, próbáld úgy. 😉

    • 2012. július 3. kedd - 21:35

      Ez tele van hibával. Minek neked fix pozíció? Border megadása és a border-radius is hibás és a background-image-hez sem ártana egy aposztróf vagy idézőjel.

  4. 2012. április 3. kedd - 18:38

    Hello Cyrex!
    Egy kérdést… Olyat szeretnék megcsinálni hogy kicsi dobozok egymás mellet 3 és ebből 2 sor. Azt nem tudom hogy ezt mivel csináljam meg úgy csináljam meg mintha táblázat lenne vagy úgy hogy a dobozokat elmentem photoshopból, majd beszúrogatom külön divekben ? Válaszodat előre is köszönöm :D. Am a videóid nagyon jók az új oldal nagyon szép, csak így tovább 😀
    Donát

  5. 2012. március 18. vasárnap - 00:21

    Helló!
    Azt szeretném megkérdezni hogy a videóit közül te melyik fajtát javaslod a legjobban.
    Válaszodat előre is kösz.Amugy tök jók a videóid

  6. 2011. július 19. kedd - 22:50

    Nekem valamiért nem működik a background-image parancs így néz ki:
    background-image: url(‘menu.png’);
    A css kódot tudja olvasni tehát ne az eléréssel van gond és a menu kép is ott van ahova irányítva van.

  7. 2011. március 7. hétfő - 21:18

    esetleg meg tudnád mondani a cég nevét?…érdekelne…

  8. 2011. március 7. hétfő - 21:16

    esetleg meg tudnád mondani a cég nevét?…érdekelne…

    • 2011. március 7. hétfő - 21:19

      Persze, nem titok, csak nem szoktam nyomatni a blogon, mert ez független a cégtől. 🙂
      Axio Kft.
      http://www.axio.hu

  9. 2011. március 5. szombat - 02:30

    Köszönjük az eddigi munkáidat +
    RESPECT CYREX!

  10. 2011. február 26. szombat - 12:30

    Cyrex tényleg sztem sokat segítesz mindenkinek, de egy szép fórumot is indíthatnál, mert sok ember látogatja ezt a weblapot + 1 -2 szót css hiányom van 😀 meg pl.: még mindig forrásokat hiányolom, h nincs példa csak a videóban 😀 és soha nem tom mit hibázok el 🙁 😉 meg like gomb?

    • 2011. február 26. szombat - 12:52

      Like gomb ott van a címsor alatt. A forráskódokat majd szép lassan felpakolom, itt már meg is van:
      http://www.cyrex.hu/2011/01/14/tutorial-php-egyszeru-oldalfelepites/

      Persze, csinálhatnék fórumot, csak ki válaszolna ott a kérdésekre? Nekem így is rengeteg időm rámegy a blogra, nem tudok még egy fórumot is állandóan moderálgatni. Ráadásul sokan azt gondolják, hogy ingyen dolgozom és küldözgetik nekem, hogy ezt meg azt csináljam meg nekik. Fogok írni rövidesen egy FAQ-t, ott ki is fogok térni ezekre.

      Új videó biztos nem lesz még 1 hétig, mert van egy csomó munkám és közben még költözködöm is. Utána valószínűleg fotosop vonalon fogok erősíteni. Majd márciusban minden kiderül :mrgreen:

    • 2011. február 26. szombat - 12:56

      azért az egyszerű oldalfelépítésnél is én kértem 😛 xD
      magyar fotoshop cs3kell? vagy nem tudnál olyat használni?

    • 2012. május 11. péntek - 21:48

      Nem lenne muszáj egyedül moderálnod.
      Biztos vannak hozzád hasonló sokat tudó kockák 😀
      pl. meglehetne úgy, hogy van Moderátor, Adminisztrátor, Gobális Adminisztrátor stb. És vagy csinálnál egy “felvételt” és aki önként jelentkezik, “leteszteled” mennyit tud és adsz egy moderátort neki. Majd idővel és hozzászólás számláló alapján lehet fejlődni.
      Na? 😀

    • 2012. május 12. szombat - 22:28

      Nem tudom mennyire lenne értelme fórumot indítani magyar nyelven. Ha nekem kell valami, beírom a gugliba angolul és első 5 találat között ott a válasz. De, ha ragaszkodtok hozzá, belőhetek valami fórum motort az oldalra. Csak aztán legyen aki használja.

    • 2012. május 14. hétfő - 21:36

      Személy szerint én hülyeségnek tartom a fórum ötletét.
      A lényegesebb dolgok itt is megtalálhatóak. (hozzászólás lehetősége, kategóriák. Stb)

      Üdv: Ps

    • 2012. május 15. kedd - 10:23

      Sziasztok én is támogatom a fórum ötletet,biztos sokan használnánk.

    • 2012. május 21. hétfő - 18:26

      a fórum ötletet én is támogatom! Én ajánlom a simplemachinesforumot (SMF), segítenék bekonfigolni 😀

  11. 2011. február 26. szombat - 11:42

    Szia!
    Az lenne a kérdésem bár nem tudom értesz-e hozzá!? Hogy esetleg egy olyan videót teszel fel amiben a .htaccess programozást mutatod be!
    Előre is köszi!

  12. 2011. február 25. péntek - 18:23

    Sziasztok. Elöször is köszi az összes videót. Rengeteget tanultam belőle. Aminek ez lett az eredménye:
    rcon.clans.hu/host/index.html

  13. 2011. február 23. szerda - 20:11

    új videó mikorra várhtaó? 😀 ha szabad megtudnom

  14. 2011. február 23. szerda - 16:32

    nem tudod milyen jókor jött pont ez a sprite-os menü 😀

  15. 2011. február 18. péntek - 15:55

    igen énis azért csináltam mert lassú ingyenes szolgáltatótól van a web oldal és így valamivé gyorsabb de ki egészítenélek még akkor is érdemes ilyet csinálni ha menü gombjai bonyolult mintázatura szeretnéd vagy egy kis fényképre szeretnéd vagy nálam a rendes menü az egy 120×30 es a hover 180×30 és így mozog is a menü kicsiből nagyba de már ezt is meg lehet csinálni cssel

  16. 2011. február 18. péntek - 15:29

    Nagyon jó a videó 😀 .

    Nem tudnál olyan videót csinálni amiben feltöltő script-et csinálsz ???

  17. 2011. február 18. péntek - 09:56

    Ez jó!!

  18. 2011. február 18. péntek - 09:08

    Nagyon jóóó!!! 😀

  19. 2011. február 17. csütörtök - 23:59

    ááá én anno egy hétig szenvedtem az ilyen menü összevariálásával csak én még a hover-t is egy képbe helyeztem el

  20. 2011. február 17. csütörtök - 21:07

    áháá 😀 újabb cyrex csemege 😀

Hozzászólás mégsem

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Sehogy, a fürdő nem felel meg a szabványoknak. Ott csak annyi történt, hogy a mosógép konnektorához új vezetéket húztam. A világítás és a borotvához h...

  • A villanyszerelés örömei panelben

    Az EPH-t hogyan oldaotta meg? A fürdöben szeretném megcsinálni, de valahogy nem világos mit is kellene tenni....

  • A villanyszerelés örömei panelben

    Sokat segitettel egy abszolut hozzanemertonek! Koszonom...

  • Névjegykártya tervezés Illustratorban

    Nem, mert megmondod, hogy kétoldalas nyomtatást kérsz. A nyomda nem csinál semmit amíg minden pontosan le nincs egyeztetve....

  • Névjegykártya tervezés Illustratorban

    Szia! Ha csinálok 2 ardboardot, egyikre a kártya elejét, a másikra a hátulját csinálom meg, és elmentem őket egy nyomdakész kétoldalas PDF-be, azt tud...

  • A villanyszerelés örömei panelben

    Mi is panelben szeretnénk az elektromos hálózatot cserélni, felújítani. Sokat segítettél, köszönjük. Üdv. József...

  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...