HTML + CSS image sprite menü

Szerző: Mérei Tamás   |   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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "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éken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....