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.

Videó

Videó

44 hozzászólás

  1. 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!

  2. 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?

    • 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

    • 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

  3. 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!

    • 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.

  4. 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á

  5. 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

  6. 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

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

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

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

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

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

    opera alatt is működik

  9. 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.

  10. 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.

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

      Ez engem is érdekelne…:D

  11. 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?

  12. 2011. október 4. kedd - 17:30

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

  13. 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

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

    Mi a szám címe ami fut?

  15. 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!

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

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

  17. 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

  18. 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!

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

      Negatív margin.

  19. 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

  20. 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!

    • 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.

    • 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!

  21. 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

  22. 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!

    • 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.

    • 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.

    • 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();

      “”

  23. 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

  24. 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

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

    Jó videó! Köszi.

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

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

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

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

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

    KÖSZÖNÖM 🙂

  28. 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

  29. 2011. február 12. szombat - 21:50

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

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 :)...