Hvordan skifter jeg fra mobil-menu til desktop-menu på min hjemmeside?
Hej alle Hver gang jeg skal lave en mobil navigation på mine hjemmesider, laver jeg altid to menuer - en mobil-menu og en desktop-menu.
Så bruger jeg bare css til at fjerne den ene menu ved et bestemt antal pixels i bredden.
Det fungerer, men hvordan kan jeg gøre det mere smart? Jeg mener... jeg har en wordpress side, og det ville være lækkert, hvis man kunne lave det sådan, at den selv skiftede til mobilversionen, når der ikke længere var plads til menupunkterne på desktopmenuen. I ved, lige som det fungerer hvis man ellers installerer et tema.
>jeg har en wordpress side, og det ville være lækkert, hvis man kunne lave det sådan, at den selv skiftede til mobilversionen vil det ikke være nemmere at finde et færdigt plugin, end code det fra bunden ??
Tag et kig på de mange framworks, der findes rundt omkring, fx Bootstrap eller Foundation. Her vil du kunne finde gode eksempler på mange af de gængse responsive udfordringer man kan støde ind i.
Grunden til at jeg vælger at lave det selv fra bunden af, er fordi jeg gerne vil lærer det. Derudover så når man skal bruge et bestemt design, så kan man ikke få det i plugins alligevel. Derfor vælger jeg at lave det selv.
Det er også helt fint - jeg skrev heller ikke at du skulle benytte et framework, kun tage inspiration derfra. Ved at gennemgå deres kode kan du let få en ide om hvordan en rigtig responsiv menu opbygges - og når ideen er der er resten bare lidt kode.
Problemet med at kigge i et framework er, at jeg forstår det som om OP allerede gør hvad langt de fleste frameworks gør: at skifte til mobilmenu når sidebredden når under et vist antal px.
Det er klart det mest almindelige at gøre, så jeg er lidt i tvivl om hvad OP ønsker at gøre i stedet. Er det automatisk at læse bredden af desktop-menuen, og hvis der ikke er plads til den på skærmen, så skifte til mobilmenu? Det kan fint lade sig gøre, men jeg kender ikke umiddelbart nogle frameworks der gør det.
Som jeg læser det i spørgsmålet bliver der brugt en simpel show/hide på to forskellige menuer og det er ikke det, der er den almindelige fremgangsmåde i de forskellige frameworks.
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.