Probleem met responsive menu

  • Hallo,


    Ik heb het volgende probleem met een responsive menu;


    https://i.gyazo.com/3771a9baf8b1ab5c0f3a7f6d26f38ef1.mp4


    1. Die tussenruimte moet er niet zijn, tenzij ofc je hovered op een menu item met inhoud.
    2. In het submenu komt het hoofd menu te staan, het zou mooier zijn als het hoofd menu in zijn eigen blok blijft en de submenu er gewoon onder (dus 2 aparte blokken). Later ga ik deze wat naar rechts padden maar voor nu is het even belangrijker om het werkend te krijgen.



    HTML;


    CSS;



    Voor het gemak heb ik het ook even online gezet, begrijp dat dat makkelijker werken is;
    https://exco-software.org/test/


    Ik hoop dat iemand me kan helpen, mijn kennis van HTML & CSS gaat even net niet zo ver om te zien wat hier fout gaat.


    Alvast bedankt!

  • Guest, wil je besparen op je domeinnamen? (ad)
  • Wat je wilt is volgens mij het volgende:

    Citaat

    Indien er niet gehovered wordt over een item wat een submenu heeft, dient dit submenu geen ruimte in te nemen.

    Hiervoor zul je iets in CSS moeten verzinnen, waarschijnlijk iets waarbij het submenu standaard display: none heeft, en als je hovered display: block.

  • Wat je wilt is volgens mij het volgende:

    Hiervoor zul je iets in CSS moeten verzinnen, waarschijnlijk iets waarbij het submenu standaard display: none heeft, en als je hovered display: block.

    Nee wat ik bedoelde is;




    En als je over test hovered dan wordt het ;



    In het 1e screen is de display gewoon none, maar op één of andere reden reserveert hij de ruimte wel.


    En zoals je in het 2e screen ook ziet, wat mijn 2e probleem is, dat het 2e blok in het 1e blok komt en niet mooi staat.

  • Dat zeg ik dus. Als je niet hovered over een list-item met een submenu moet het submenu gewoon onzichtbaar zijn, dus zoiets:

    CSS
    #navigation-menu-bottom ul li ul.sub-menu { display: none; }


    En als je wel hovered, wel:

    CSS
    #navigation-menu-bottom ul li:hover ul.sub-menu { display: block; }

    Weet niet of dat echt handig is voor een mobiel menu, want als je naar Test2 zweeft dan klapt je menu weer in. Eigenlijk wil je de submenu's handmatig openklikken misschien.


    Weet niet precies wat je met puntje #2 bedoelt en of dit voor de mobiele of niet-mobiele navigatie is. Je zou het inspringen achterwegen kunnen laten (op mobiel is de horizontale ruimte sowieso al beperkt) en kunnen volstaan met een lichtere achtergrondkleur zodat duidelijk is dat dit een sub-onderdeel van een hogergelegen item is? En dus met eerdergenoemde handmatige uitklap-actie zodat je menu niet automatisch weer inklapt, ik denk dat je dan beide problemen hebt opgelost?

  • Dat zeg ik dus. Als je niet hovered over een list-item met een submenu moet het submenu gewoon onzichtbaar zijn, dus zoiets:

    CSS
    #navigation-menu-bottom ul li ul.sub-menu { display: none; }

    En als je wel hovered, wel:

    CSS
    #navigation-menu-bottom ul li:hover ul.sub-menu { display: block; }

    Weet niet of dat echt handig is voor een mobiel menu, want als je naar Test2 zweeft dan klapt je menu weer in. Eigenlijk wil je de submenu's handmatig openklikken misschien.


    Weet niet precies wat je met puntje #2 bedoelt en of dit voor de mobiele of niet-mobiele navigatie is. Je zou het inspringen achterwegen kunnen laten (op mobiel is de horizontale ruimte sowieso al beperkt) en kunnen volstaan met een lichtere achtergrondkleur zodat duidelijk is dat dit een sub-onderdeel van een hogergelegen item is? En dus met eerdergenoemde handmatige uitklap-actie zodat je menu niet automatisch weer inklapt, ik denk dat je dan beide problemen hebt opgelost?


    Ahja op die manier werkt dat inderdaad wel goed, maar het in/uitklappen is volgens mij inderdaad beter. Hoe zou ik dat moeten aanpakken? Zo met pijltjes ofzo.

  • Technisch of visueel?


    Technisch: je zou iets met jQuery kunnen doen, de meeste mobiele devices ondersteunen tegenwoordig wel JavaScript lijkt mij? En het dan zo maken dat alles anders altijd uitgeklapt is zodat je zonder JavaScript in principe ook uit de voeten kunt.


    Visueel: hier kun je natuurlijk zelf helemaal los als je wilt :p. Ik zou simpel beginnen, bijvoorbeeld een lichtere kleur voor subitems. En je zou pijltjes of +/- symbolen kunnen gebruiken voor uitklapbare items, zodat dit op een of andere manier duidelijk is.

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!