Ik heb een dropdownmenu waar men tot 3 niveau's ver kan gaan.
Deze wil ik nu ook responsive maken, maar weet niet hoe ik er aan moet beginnen.
De bedoeling is niet dat heel het menu weggaat, en dat er dan nog maar 1 symbooltje is.
Maar dat er 2 items weggaan, en vervangt wordt door het onderdeel "Meer".
Ga je met je muis over "Meer", dan zie je die 2 items.
Wordt je scherm nog kleiner, dan herhaald zich dit proces maar wordt er telkens 1 menu item minder getoont, en komt deze terecht onder het item "Meer".
Hoe kan ik dit het beste doen?
Kan dit enkel met CSS? Of ook met jQuery?
Misschien een handige tutorial voor dit?
Alvast bedankt!
Diov
Aan je post te zien denk ik dat je media queries nog niet kent. Met deze queries kun je een stukje CSS laten activeren INDIEN er aan een bepaalde voorwaarde word gedaan. Ik denk dat onderstaande stukje voor zichzelf spreekt.
<style>
@media only screen and (max-width: 900px), only screen and (max-device-width: 500px) {
.background {background:red !important;}
//zoek op CSS Media Queries voor meer dingen die je ermee kan
}
.background {background:blue;}
</style>
De kleur van alle elementen met de class .background zal worden veranderd op devices met <900px of devices met 'neppe' resoluties al bij 500px (mobieltjes hebben bijvoorbeeld 200 pixels breedte en weergeven de website op 450px. Vandaar dat ik het even nep noem)
De important is om even aan te geven dat het vaak voorkomt dat je in complicaties gaat zitten want al is het een media querie, betekent nog niet dat de media querie meer belangrijk is in css. Soms zul je niet zonder !important kunnen. Je ontdekt gauw genoeg hoe je hiermee kan spelen.
De menu
Persoonlijk maak ik altijd een tweede menu aan voor de mobiele versie. Dit heeft zo zijn redenen. Misschien is dit voor jouw ook handig. Dit hoeft niet meer code te kosten: zelfde elementen indeling, maak er alleen een functie(/static class) van en plaats ze in twee divs: mobile-menu, desktop-menu. Op het moment dat het beeldscherm klein is zal mobile-menu worden weergegeven en anders desktop. Eventueel kun je met mobile-menu nog wel wat spelen dat het in het begin nog aardig op desktop lijkt.
Betreft 'Meer tonen', volgens mij zou je er uit moeten komen als je het nut van de media queries goed kent.
