Mérei Tamás webdesigner

Tutorial: HTML + CSS menü készítés almenükkel

Szerző:   |   2011-02-12

Megpróbálkoztam egy almenüs menüt készíteni tisztán CSS-el, javascript nélkül. A videóhoz nem készültem elő, úgyhogy van benne egy nagy adag bénázás, de az eredmény működőképesnek tűnik. Ha valaki megcsinálja és teszteli Opera alatt, majd számoljon be az eredményről.

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

46 hozzászólás

  1. Vuska
    2013. szeptember 3. kedd - 14:56

    Kedves Tamás!

    A segítségedet szeretném kérni, de nem a hozzászólások oldalon. Tüzetesen átnéztem a honlapod, de sehol nem találtam kapcsolati lehetőséget, ahol email-ben írhatnék. Megadnád a címed, mert gondolom ha elvállalsz valami munkát azt nem itt beszélik meg Veled.
    Köszönöm előre is.

    • cyrex
      2013. szeptember 3. kedd - 15:24

      Használd a kapcsolatfelvételi űrlapot ezen az oldalon: webedit.hu

  2. Juhász Ferenc
    2013. augusztus 14. szerda - 10:39

    Helló!
    Köszönöm a bemutatót!
    Nagyon hasznos beállításokat tanultam, mindenképp reklámozni fogom ezt a zsír oldalt a webdesigner ismerőseim körében.
    Szerintem a jquery-nél jobb a fenti css megoldásod, mert a jquery beállításokat bonyolultabb megváltoztatni és egy kész oldalhoz formázni.
    Ráadásul IE 10, IE9-ben is dalolva megy!

  3. Andi
    2012. július 23. hétfő - 12:15

    Ui…. bocsi.. újabb kérdés… hogy lehet azt megcsinálni, hogy a fejléc a menü és az alatta lévő (szövegdoboznak hívom 😉 ) mindig egymás alatt legyenek, minden felbontásban?

    • Andi
      2012. július 23. hétfő - 12:29

      és a legördülő almenükre sem lehet rámenni a többi böngészőben :S

    • fegya
      2012. augusztus 27. hétfő - 16:15

      Kedves Cyrex, ezt én is megkérdezném:

      hogy lehet azt megcsinálni, hogy a főmenü és az alatta lévő, hovernél felugró almenü mindig egymás alatt legyenek? azaz kihúzni mind a kettőt az oldal szélességére

  4. Andi
    2012. július 23. hétfő - 11:44

    Szia! Köszi a videókat! A segítségeddel kicsit fel tudtam dobni az ovink honlapját… viszont a menüm firefoxban szépséges… más böngészőkben használhatatlan. Gondolom a menü háttér színe miatt… Hogy lehet egységesíteni, hogy a többi böngészőben is működjön? Tudnál nekem segíteni? Előre is köszönöm!

    • cyrex
      2012. július 23. hétfő - 14:00

      JS nélkül elég nehéz crossbrowser legördülőmenüt készíteni. Van itt az oldalon jQuery-s verzió, használd azt, az működik minden böngésző alatt. A Te oldaladnál össze-vissza van pozicionálva minden. Nem értem a menü miért van a kód alján, és a szöveges tartalmat, meg még egy csomó dobozt miért kell abszolút pozicionálni? Én újraépíteném az egész struktúrát meg a CSS-t is újraírnám.

  5. horvéth róbert
    2012. július 10. kedd - 12:08

    Az én internet expolerem alatt alapból nem működik a hover efektus, kivéve akkor amikor a teg – re teszem rá

  6. xplore
    2012. április 11. szerda - 21:10

    Üdv CYREX!
    Nagyon tetszett a videód és lenne vele kapcsolatosan egy kérdésem.A különböző almenüpontokon belül hogyan lehet tartalmat linkelni.Pl. rákattintok a “Magunkról” almenüre és kiírja a tartalmat.Ezt hogyan kell csinálni?
    előre is köszi a segítséget

  7. copy112x
    2012. április 10. kedd - 18:44

    Üdv CYREX!
    nagyon tetszett a videód és lenne azzal kapcsolatban egy kérdésem.A menün belül pl. terméknél hogyan lehetne azt megoldani hogy ha rákattintok az ahoz fűződő tartalamom jelenjen meg.pl szöveg,képek.
    előre is köszi a segítséget

    • cyrex
      2012. május 7. hétfő - 21:44

      Csinálsz neki külön oldalakat és belinkeled.

  8. darkvisitor
    2012. január 27. péntek - 12:01

    vilaguralom.pokol.hu itt megnézhetitek de IE -ben nem jó

  9. darkvisitor
    2012. január 27. péntek - 12:00

    opera alatt is működik

  10. lalee
    2011. október 20. csütörtök - 22:31

    Elnézést nem vízszintesre gondoltam, mivel abban van megvalósítva, hanem függőlegesre.

  11. lalee
    2011. október 20. csütörtök - 22:23

    Szia!
    Az lenne a kérdésem, hogy ezt az almenüs témát, hogyan lehetne vízszintes almenüként megcsinálni?
    Válaszodat köszönöm.

    • Botessz
      2012. január 22. vasárnap - 20:31

      Ez engem is érdekelne…:D

  12. shalimar
    2011. október 4. kedd - 19:54

    hy! tudsz nekem abban segíteni?…most nem sikerült értelmeznem…azt szeretném, hogy legyen a sima menügomb az 1-es kép…mikor feléviszem a 2-es, és mikor rákattintok, a 3-as…valamint mikor benne vagyok a menüpontban, akkor a gomb a 3-as képet mutassa…ezt hogy lehet?

  13. crashneed
    2011. október 4. kedd - 17:30

    Ha 1 ilyennel kész vagyok akkor hogy tudom használhatóvá tenni? (pl.:Mlap)

  14. maxcane
    2011. szeptember 29. csütörtök - 13:08

    Szia!
    Le a kalappal !!!
    Nagyszerű amit alkottál, és köszönöm !
    Elmondva sokkal érthetőbb mint leírva, nagyon jól magyarázol !
    Max

  15. Tony
    2011. szeptember 26. hétfő - 11:58

    Mi a szám címe ami fut?

  16. kohapi
    2011. augusztus 1. hétfő - 21:22

    Hello! Azt szeretném kérdezni, hogy hogyan lehet megoldani: egy táblázat két oszloppal, és mindkét oszlopban külön internet oldal jelenjen meg kattintásra, de ne navigáljon el másik oldalra. Előre is köszi!

  17. Takasi98
    2011. március 20. vasárnap - 16:57

    áá mán nem kell megvan anélkül is

  18. Takasi98
    2011. március 19. szombat - 17:29

    Hello én csináltam egy weboldalt van kb 10 html fájl de én új menüt akarok csinálni bele, de rengeteg munka lenne ezért csináltam egy ojan megoldást hogy az oldalt el 2 osztotam az oldalt 1 rész ez egy kisebb rész ide a menu.htm hozza be a másikban a kezdolap.html, de van egy kis gond ha a menuben rámegyek a pl kezdölapra akkor az elsö részbe nyissa meg (ahun a menunek kéne lennie) , meg lehet e azt ugy csinálni hogy a kezdolap.htm helyére nyiljon meg ????????? Köszi a választ

  19. Weffar
    2011. március 10. csütörtök - 18:41

    Hello!
    Hogyan kell megoldani azt, hogy az almenü ne az adott főmenü alatt kezdődjön, hanem a container szélességével megegyezően kezdődjön, vagyis az almenü el legyen tolva balra!

    • cyrex
      2012. február 11. szombat - 23:06

      Negatív margin.

  20. Fr4nk
    2011. március 1. kedd - 13:11

    Szervusz Nagyon köszönöm a segítséget nagyon jó videókat csináltál:) csak így tovább

  21. Sunny
    2011. február 26. szombat - 17:27

    Szia!

    Hogyan tudom elérni, hogy a content tartalma IE alatt is oda kerüljön, ahol most Firefoxban látszik? IE-ben jelenleg a divek egymáshoz képest jó helyen vannak csak globálisan az egész jóval lejjebb és kijjebb esnek

    Válaszodat köszönöm!

    • cyrex
      2011. február 27. vasárnap - 07:59

      Nem értem a kérdést. Ha a videót követed akkor elvileg IE alatt sem lehet gond.

    • Sunny
      2011. február 27. vasárnap - 09:22

      az rendben van nálam viszont picit más a szitu itt megnézheted: http://www.sunny3032.fw.hu CSS Conditional Comment-ek megoldást jelenthetnek a problémára? Tudnál abban segíteni, hogy hogyan kell használni a commenteket?

      Válaszodat köszönöm!

  22. Sunny
    2011. február 25. péntek - 14:05

    Üdv Cyrex!
    Az szeretném kérdezni, hogy hogyan lehet megoldani azt, hogy a lenyíló menü lenyíláskor ne lógjon rá a tartalomra? Nem az zavar, hogy a menü block típusú, hanem azt szeretném megvalósítani, hogy le tudjon nyílni, ha alatta a content részben van tartalom. Most látni rajta, hogy amint a lenyíló menü eléri az alatta lévő tartalom határát fölcsukódik
    Egy másik kérdés, hogyha ez megvalósul és a menü rendesen rányílik a tartalomra hová tegyek háttérszínt, hogy a menük betűi ne keveredjenek a tartalom soraival?
    Köszönöm a válaszod

  23. Sunny
    2011. február 20. vasárnap - 19:25

    Kíváncsi volnék a véleményedre:
    Mi okozhatja azt, hogy amikor az egeret a főmenüre viszem és lenyílik a menü csak az első két almenüpontig tudom húzni az egeret, amint lejjebb húzom a menü visszazáródik. Nem értem, hogy hol hibáztam, annál is inkább mivel ezt csak két lenyíló menünél játsza el a 3. jól működik illetve a jelenség csak Firefoxban áll fönn, IE-ben az összes menü kivételesen 🙂 jól működik.
    Köszönöm a segítséged!

    • Sunny
      2011. február 20. vasárnap - 19:30

      elnézést meg is van a válasz elhelyeztem egy javascript naptárat és valamiért ez a script zavarja de nem tudom hogyan helyezzem el hogy ne befolyásolják egymást.

    • cyrex
      2011. február 20. vasárnap - 19:57

      Melyik naptár? SCAL? Mert azzal már már meggyűlt a bajunk párszor, bár nekünk IE alatt voltak vele bajok.

    • Sunny
      2011. február 20. vasárnap - 20:19

      Nem ez csak egy egyszerű kivág-beilleszt kiirja a dátumot és a névnapot.Most kínomban azt csináltam, hogy ahelyett, hogy a content fölső sarkában iratnám ki eltettem az egyik oldalsó boxon belülre, így viszont nem tudom érvényesíteni rajta a css tulajdonságokat.

      “”

      kiir();

      “”

  24. Sunny
    2011. február 15. kedd - 23:09

    Üdvözlet!
    Pusztán a kíváncsi természetem miatt illetve mert ez az elvárás felém, lekövettem a menükészítésnél alkalmazott logikád nincs is vele semmi gond tök világos minden. De Én szeretnék egy olyan mozzanatot csinálni, amikor egy ilyen almenünek van további almenüje. Tovább mentem a Te logikádon, vagyis a szóban forgó almenüt tegek közé tetem, ennek az almenüit, pedig -ek közé, de nem rejtette el őket ahogy a többi almenünél. Ezekre a legbelsőbb tegekre hogyan hivatkozok?Alább fől vázoltam a szóban forgó kódrészletet tehát az “almenü2”-re nem tudom hogyan kell hivatkozni
    Válaszodat Köszönöm!

    főmenü

    almenü1
    almenü1
    almenü1

    almenü1

    almenü2
    almenü2
    almenü2

  25. PePe
    2011. február 15. kedd - 18:27

    ÜDV! Szerintem még lehetne valami videó az AJAX -ra valami apro példácska, hogy aki elszeretne kezdeni valami komolyabb weboldalt programozni legyen alapja erre is

  26. Menyus
    2011. február 14. hétfő - 14:47

    Jó videó! Köszi.

  27. Sunny
    2011. február 14. hétfő - 13:44

    Hálás köszönet !
    Remek videó, nagy segítséget jelent!

    • cyrex
      2011. február 14. hétfő - 13:46

      Lesz majd jobb almenüs videó is ezt most csak próbaképpen csináltam.

  28. Brien
    2011. február 13. vasárnap - 22:16

    KÖSZÖNÖM 🙂

  29. SPiLeR
    2011. február 13. vasárnap - 11:10

    egyébként van egy ötletem: mégpedig az hogy a videó elején mondtad hogy te erre jquery szoktál alkalmazni és mondjuk megcsinálhatnád azt is és így lenne ilyen összehasonlítási mód hogy melyik jobb stb. 😀 ha esetlge lenne hozzá kedved

  30. SPiLeR
    2011. február 12. szombat - 21:50

    na erre voltam már én is kiváncsi egy ideje

Hozzászólás

Legújabb hozzászólások