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 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...