Probleem met responsive menu

    • Probleem met responsive menu

      Hallo,

      Ik heb het volgende probleem met een responsive menu;

      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;

      HTML Source Code

      1. <div id="navigation-menu-bottom">
      2. <center><button class="navigation-icon"></button></center>
      3. <ul class="navigation-menu">
      4. <li class="active">Home</li>
      5. <li>Test
      6. <ul class="sub-menu">
      7. <li><a href="#">Adipiscing</a></li>
      8. <li><a href="#">Volutpat</a></li>
      9. <li><a href="#">Ligula Nullam</a></li>
      10. <li><a href="#">Vestibulum</a></li>
      11. </ul>
      12. </li>
      13. <li>Test2</li>
      14. </ul>
      15. </div> <!-- #Navigation-bottom -->
      Laat alles zien

      CSS;

      CSS Source Code

      1. #navigation-menu-bottom {
      2. float: right;
      3. padding: 7px 10px;
      4. height: 50%;
      5. }
      6. #navigation-menu-bottom > ul > li {
      7. float: left;
      8. list-style: none;
      9. padding: 5px 35px 5px 35px;
      10. display: inline-block;
      11. position: relative;
      12. font-size: 19px;
      13. }
      14. #navigation-menu-bottom li:hover .sub-menu {
      15. z-index: 1;
      16. opacity: 1;
      17. }
      18. #navigation-menu-bottom .navigation-icon {
      19. display: none;
      20. }
      21. .sub-menu {
      22. min-width: 250%;
      23. padding: 5px 0px;
      24. position: absolute;
      25. top: 100%;
      26. left: 0px;
      27. z-index: -1;
      28. opacity: 0;
      29. transition: opacity linear 0.15s;
      30. box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
      31. }
      32. .sub-menu li {
      33. display: block;
      34. font-size: 16px;
      35. }
      36. .sub-menu li a {
      37. padding: 10px 30px;
      38. display: block;
      39. text-decoration: none;
      40. }
      41. @media only screen and (max-width: 780px) {
      42. #navigation-menu-bottom > ul {
      43. display: none;
      44. position: absolute;
      45. z-index: 1000;
      46. width: 100%;
      47. padding-left: 0px;
      48. left: 0px;
      49. }
      50. #navigation-menu-bottom button.navigation-icon {
      51. display: block;
      52. }
      53. #navigation-menu-bottom > ul > li {
      54. float: none;
      55. display: list-item;
      56. text-align: left;
      57. }
      58. #navigation-menu-bottom li:hover .sub-menu {
      59. z-index: 0;
      60. opacity: 1;
      61. }
      62. .sub-menu {
      63. position: inherit;
      64. min-width: 100%;
      65. padding: 0px;
      66. }
      67. .sub-menu li a {
      68. display: block;
      69. }
      70. }
      Laat alles zien


      Voor het gemak heb ik het ook even online gezet, begrijp dat dat makkelijker werken is;
      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!
      Met vriendelijke groet,

      Djordy.
    • FangorN wrote:

      Wat je wilt is volgens mij het volgende:
      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.
      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.
      Met vriendelijke groet,

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

      CSS Source Code

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

      En als je wel hovered, wel:

      CSS Source Code

      1. #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?
    • FangorN wrote:

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

      CSS Source Code

      1. #navigation-menu-bottom ul li ul.sub-menu { display: none; }
      En als je wel hovered, wel:

      CSS Source Code

      1. #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.
      Met vriendelijke groet,

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