Ik heb een hamburgermenu binnen html/css opgenomen. Het gaat om dit menu: https://codepen.io/alvarotrigo/pen/PoJGObg
Ik heb de html van het menu direct na de <body> gestart.
In de css heb ik de css van het menu binnen het @media only screen and (max-width: 768px) opgenomen.
Met wat extra html/css heb ik het zo dat er niks zichtbaar is op de desktop.
Als ik echter naar de mobiele versie ga op mijn telefoon (of browser verkleinen) dan zie ik het menu, maar eronder een enorm stuk lege content....pas daaronder start de content. Ik maak vrijwel alleen gebruik van {display: none;}.....dat werkt bij de rest vd de mobiele site prima (om bepaalde stukken weg te laten die op de mobiele site niet relevant zijn). Het lijkt er nu op dat door het implementeren van het menu de site ineens rekening houdt met de hoogte van al die weggelaten blokken. Of het is wat anders, maar ik zie niks dat conflicteerd. De css van het mobiele menu heb ik namelijk ietwat aangepast zodat het niet conflicteerd met mijn eigen css. Hieronder de code van het mobiele menu:
Code:<input type="checkbox" class="toggler"> <div class="hamburger"><div></div></div> <div class="menu"> <div> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div>Heeft iemand een suggestie waar het misschien mis gaat? De site in kwestie: shorturl.at/gTY26Code:.toggler{ /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING : */ z-index:2; height: 50px; width: 50px; position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; } .hamburger{ position: absolute; top: 0; left: 0; height: 40px; width: 40px; padding: 0.6rem; /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */ display: flex; align-items: center; justify-content: center; } /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */ .hamburger > div{ position: relative; top: 0; left: 0; background: white; height: 2px; width: 60%; transition: all 0.4s ease; } /* CREATING THE TOP AND BOTTOM LINES : TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */ .hamburger > div::before, .hamburger > div::after{ content: ''; position: absolute; top: -10px; background: white; width: 100%; height: 2px; transition: all 0.4s ease; } .hamburger > div::after{ top: 10px; } /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE : */ .toggler:checked + .hamburger > div{ background: rgba(0,0,0,0); } .toggler:checked + .hamburger > div::before{ top: 0; transform: rotate(45deg); background: black; } /* AND ROTATING THE TOP AND BOTTOM LINES : */ .toggler:checked + .hamburger > div::after{ top: 0; transform: rotate(135deg); background: black; } /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT : */ .menu{ background: white; width: 0%; height: 100vh; /* APPLYING TRANSITION TO THE MENU : */ transition: all 0.4s ease; } /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT : */ .toggler:checked ~ .menu{ width: 30%; } /* STYLING THE LIST : */ .menu > div > ul{ display: flex; flex-direction: column; position: fixed; top: 70px; padding-left: 10px; /* HIDDEN INITIALLY : */ visibility: hidden; } .menu > div > ul > li{ list-style: none; padding: 0.5rem; } .menu > div > ul > li > a{ color: black; text-decoration: none; font-size: 2rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE : */ .toggler:checked ~ .menu > div > ul{ transition: visibility 0.4s ease; transition-delay: 0.1s; visibility: visible; } .toggler:checked ~ .menu > div > ul > li > a:hover{ color: orange; }
- Issue mbt mobile menu
-
23-01-2023, 12:13 #1Particulier
- Berichten
- 295
- Lid sinds
- 17 Jaar
Issue mbt mobile menu
-
23-01-2023, 12:26 #2
- Berichten
- 9
- Lid sinds
- 14 Jaar
Re: Issue mbt mobile menu
Hi,
Je "position: fixed;" moet je verplaatsen van je "ul" naar je div ".menu". Dan is het opgelost :-)
-
23-01-2023, 14:27 #3Particulier
- Berichten
- 295
- Lid sinds
- 17 Jaar
Re: Issue mbt mobile menu
Nu ziet het menu er in grote lijnen goed uit. Maar toen ik het menu er voor het eerst in plaatste (zonder het in de desktop te verbergen), zag de hamburger er goed uit. Dwz 3 lijntjes en een zwart kruisje bij geactiveerd. Vreemd genoeg is nu het kruisje verdwenen en staat het menu helemaal bovenaan (en waar het 1e menuitem staat zit nog wel de functie van het kruisje, namelijk sluiten mobiel menu). Toevallig nog meer goeie tips?
-
23-01-2023, 15:42 #4
- Berichten
- 9
- Lid sinds
- 14 Jaar
Re: Issue mbt mobile menu
Als je de ".hamburger" een z-index: 1; geeft is deze weer zichtbaar. Als je het menu een padding-top: 50px; o.i.d. geeft, staat deze weer netjes onder het kruisje.
Boven de witte menu container zit een witruimte door je ".header", kun je simpel oplossen door je menu een margin-top: -5px; te geven.
Hopelijk is alles nu netjes voor je!
-
23-01-2023, 16:54 #5
- Berichten
- 463
- Lid sinds
- 13 Jaar
Re: Issue mbt mobile menu
Ik kan de website niet bekijken dus ik kan je ook niet echt helpen. Zoals bekend werken de links van shorturl maar heel kort;-)
Je probleem zit in height;-) En niet in fixed. De oplossingen van Kimberly zullen misschien werken maar vergeet niet dat de demo niet op een echte website wordt gebruikt en daar zit het verschil.
Succes...
-
23-01-2023, 18:03 #6Particulier
- Berichten
- 295
- Lid sinds
- 17 Jaar
Re: Issue mbt mobile menu
Als je de ".hamburger" een z-index: 1; geeft is deze weer zichtbaar. Als je het menu een padding-top: 50px; o.i.d. geeft, staat deze weer netjes onder het kruisje.
Boven de witte menu container zit een witruimte door je ".header", kun je simpel oplossen door je menu een margin-top: -5px; te geven.
Hopelijk is alles nu netjes voor je!
Ik kan de website niet bekijken dus ik kan je ook niet echt helpen. Zoals bekend werken de links van shorturl maar heel kort;-)
Je probleem zit in height;-) En niet in fixed. De oplossingen van Kimberly zullen misschien werken maar vergeet niet dat de demo niet op een echte website wordt gebruikt en daar zit het verschil.
Succes...
Nu jaren verder en op de achtergrond werk ik al ruime tijd aan een WP versie. Maar dat betekent een paar duizend pagina's handmatig omzetten (eigen keuze) en daarom op het html/css deel soms wat simpele/snelle oplossingen zoals dit mobiele menu. Tijd om harder te werken aan de migratie :).
-
23-01-2023, 18:54 #7
- Berichten
- 463
- Lid sinds
- 13 Jaar
Re: Issue mbt mobile menu
Ik werk sinds 2010 met WordPress en nooit problemen gehad met sidebars en advertenties. Mijn eerste website was direct een custom theme omdat WP zo makkelijk is. Per pagina aparte advertenties of wat dan is en was geen enkel probleem.
Puur html/css is wel veel veiliger en sneller natuurlijk maar klanten willen hier niet meer voor betalen omdat het erg duur is.
Gelukkig werkt het nu en heb je mijn hulp niet nodig.
Succes...
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic