Avatar billede Oscar.Skov Mester
03. februar 2019 - 17:44 Der er 6 kommentarer

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.

Håber nogen kan være behjælpelige!

Mvh
Oscar
Avatar billede olsensweb.dk Ekspert
03. februar 2019 - 18:21 #1
>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 ??

ref https://www.google.com/search?q=wp+responsiv+menu&oq=wp+responsiv+menu
https://da.wordpress.org/plugins/wp-responsive-menu/
https://da.wordpress.org/plugins/responsive-menu/

ellers er der sikkert en over i cms gruppen der har forslag til plugins/responsive-menu/
https://www.computerworld.dk/eksperten/spm/internet-og-onlineloesninger/cms-systemer
Avatar billede keysersoze Guru
03. februar 2019 - 18:46 #2
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.
Avatar billede Oscar.Skov Mester
03. februar 2019 - 21:48 #3
Hej, tak for jeres svar.

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.
Avatar billede keysersoze Guru
04. februar 2019 - 00:10 #4
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.
Avatar billede Slater Ekspert
04. februar 2019 - 09:15 #5
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.
Avatar billede keysersoze Guru
04. februar 2019 - 10:01 #6
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.
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester