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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...