Med antall mobile internettbrukere som overgår stasjonære, er det ingen overraskelse at nettsteddesignere gjør alt de kan for å imøtekomme dem. Å ha en mobilversjon av et nettsted, eller til og med konvertere et nettsted til en mobilapp, har blitt normen. Grunnen til det er enkel: forskjellige sideforhold og forskjellige oppløsninger krever forskjellige visningsmoduser for forskjellige funksjoner, eller helt forskjellige funksjoner. Dette kalles responsiv design: forskjellige versjoner for forskjellige skjermstørrelser. Og en av funksjonene som byr på problemer for designere og brukere av håndholdte enheter er menyen.
Menyer kan være store, kompliserte og tungvinte for mobilbrukere som på grunn av enhetens natur har begrenset skjermplass. Dette er grunnen til at mange premium WordPress-temaer er utstyrt med mobilmenyer. Likevel kan du ha et tema som ser ut og fungerer akkurat slik du vil ha det som rett og slett mangler dette alternativet. Så hvis du ønsker å skjule mobilmenyen eller kanskje erstatte den med en annen, har du oss til å hjelpe deg med det. Dette er hva vi skal snakke om:
Det første vi vil vise deg er hvordan du skjuler en meny eller deler av en meny på mobile enheter ved hjelp av CSS. Dette vil kreve litt koding fra din side, og også bruk av inspeksjonsverktøyet, men det er ingen stor sak uansett.
For å skjule hele menyen, må du finne ut identifikatoren og CSS-klassen til menyen din. Det kan variere fra tema til tema, og det er her inspeksjonsverktøyet kommer godt med. Bare høyreklikk hvor som helst på nettstedet ditt, forutsatt at du ikke har deaktivert høyreklikk, og velg Undersøke fra rullegardinmenyen. Du kan også trykke på F12-knappen.
Nå, etter å ha slått på inspeksjonsverktøyet, kan du bla nedover Elementer fanen for å markere elementene i hovedvisningen. Du kan enkelt finne menyen i skrivebordsversjonen av nettstedet ditt, men det er ikke den du trenger å skjule. I stedet må du endre størrelsen på skjermen for å vise den smalere visningen ved å dra den vertikale kanten av vinduet. Klassen vi ønsker å skjule på mobilversjonen av nettsiden vår heter meny-knapp-beholder. Vær oppmerksom på at på nettstedet ditt kan klassen ha et annet navn.
For å skjule denne spesielle versjonen av menyen fra mobilversjonen av nettstedet, må du legge til noe CSS på nettstedet ditt. Navigere til Utseende/Tilpass fra WordPress-dashbordet og velg Ekstra CSS seksjonen og Mobil versjon av nettstedet. Du kan bytte mellom de forskjellige versjonene av nettstedet ditt i menyen nederst til venstre. Klikk på mobilikonet for å redigere mobilversjonen av nettstedet.
Koden du trenger for å legge inn i Ekstra CSS feltet er:
.menu-button-container {
display:none;
}
Når du har gjort det, kan du se at menyen har forsvunnet fra forhåndsvisningsvinduet. For å lagre endringene dine må du klikke på publisere knappen, og mobilmenyen vil ikke vises i mobilversjonen av nettstedet ditt.
Selvfølgelig må du bytte ut meny-knapp-beholder med klassen din egen mobilmeny.
Men hva om du ikke vil skjule hele menyen? Hvis du bare skjuler et par elementer, blir det kortere og lettere å navigere for besøkende som bruker mobilenheter.
For å skjule et element, må du igjen legge til noe CSS i menyen. Først, naviger til Utseende/menyer fra WordPress-dashbordet, klikk Skjermalternativer i øvre høyre side, og sjekk CSS-klasser.
Nå, si at vi ønsker å skjule Team element fra hovedmenyen vår for mobilbrukere. Ved å klikke på den nå, vil du se at du har aktivert et felt merket CSS-klasser (valgfritt). Her kan du tilordne en klasse til et menyelement. Vi tildeler klassen skjule-på-mobil til Team element og Lagre vår meny.
Du kan navngi klassene dine hva du vil, innenfor disse navnereglene: en klasse må begynne med en bokstav (store eller små bokstaver) og bruke bokstaver, sifre, understreker og bindestreker i resten av navnet.
Dette merker bare Team element i hovedmenyen vår som tilhørende klassen skjule-på-mobil. For faktisk å skjule alle elementene i denne klassen fra mobilversjonen av nettstedet, må vi legge til – du gjettet riktig – noe kode på nettstedet vårt. Navigere til Utseende/Tilpass fra WordPress-dashbordet og velg Ekstra CSS seksjon.
Koden du må legge til i Ekstra CSS feltet er dette:
@media (max-width: 767px){
.hide-on-mobile{
display: none !important;
}
}
Denne koden skjuler alle elementer som tilhører skjule-på-mobil klasse når bredden på nettstedet er 767 piksler eller mindre. Selvfølgelig kan du gjøre dette for ethvert enkelt menyelement, skjule eller vise forskjellige elementer for forskjellige enheter.
Som det er veldig vanlig, hvis et tema ikke fungerer akkurat slik du liker det, kan du supplere det med en plugin. Programtillegget vi skal bruke er WP mobilmeny. Husk imidlertid at det er mange responsive meny-plugins å velge mellom.
Når du har installert og aktivert plugin-en, vil du automatisk bli ført til en skjerm som ber deg om å godta noen ekstra sikkerhetsfunksjoner av samme utvikler. Vi vil hoppe over dem.
Du vil da bli tatt til pluginens konfigurasjonsskjerm. Den første delen opp er Hovedalternativer seksjon. Der må du ganske enkelt slå både venstre og høyre meny av. I Synlighetsinnstillinger lenger ned må du slå på Aktiver bare på mobile enheter veksle til På.
Lenger ned, i Skjul den originale temamenyen seksjonen, må du sørge for at alle menyelementene er merket for å være skjult av plugin-en.
Avhengig av temaet du bruker, kan det hende du må bruke Finn element søk i tilfelle ett av menyelementene dine er ukonvensjonelt navngitt og plugin-en ikke gjenkjenner den. Dette kan variere fra tema til tema, så vi kan ikke være mer spesifikke, men de fleste temaer vil bruke konvensjonelle elementer.
Når det er gjort, Lagre endringer, og besøk nettstedet ditt fra en mobilenhet. Du vil se at menyen ikke vises.
Men hva om du bare vil ha en annen versjon av en meny for mobile enheter? Egentlig er det denne pluginens primære funksjon. I så fall må du lage en meny for mobilversjonen av nettstedet ditt. Vi vil ikke gå inn på detaljene for å lage en ny meny her. Hvis du trenger hjelp til å lage en meny, har vi en full veiledning for å legge til menyer i WordPress. Husk å sjekke Venstre mobilmeny eller Høyre mobilmeny når du lager en mobilmeny.
Vi vil likevel bruke denne plassen til å si at en mobilmeny skal være så begrenset som mulig, helt til det grunnleggende. Vi anbefaler at du kun bruker de grunnleggende navigasjonsalternativene for mobilversjonen av menyen. Mobilbrukerne dine er mer sannsynlig å bruke en søkefelt hvis de er ute etter en bestemt side.
Når du har opprettet og lagret en meny, naviger til Mobilmenyalternativer fra WordPress-dashbordet.
Her, i Hovedalternativer må du velge mobilmenyen for visning. Vi har gitt vårt navn Mobilmeny, men du kan navngi ditt hva du vil. Du kan også veksle for å aktivere venstre og høyre menyer. Husk at du må ha merket av posisjonen for menyvisning på menyopprettingsskjermen.
Neste ned har du Synlighetsalternativer seksjon. Disse styrer forholdene som mobilmenyen vises under. For å vise mobilmenyen din må du gjøre den synlig for mobile enheter.
Neste, i Skjul den originale temamenyen seksjonen, kan du velge hvilke menyelementer som skal skjules fra mobilversjonen. Dette er en effektiv måte å lage en mobilversjon av en meny på, hvis du kjenner deg rundt i strukturen. De vanligste menyelementene er merket for å skjule som standard.
Lenger ned er noen diverse og avanserte alternativer som lar deg tilpasse mobilmenyen ytterligere. Vi går ikke inn på detaljene her, da de ikke er relevante for å vise eller skjule mobilmenyer.
Du må Lagre endringer når du er ferdig med å konfigurere menyen.
Og mobilmenyen vår, med bare det aller grunnleggende, vises i mobilversjonen av nettstedet vårt. Din originale mobilmeny er skjult, og en ny er på plass.
For å konkludere
Som vi har vist, krever det bare litt arbeid å lage, vise og skjule mobilmenyer og lage alternative versjoner av menyer, og det er til og med plugins som kan gjøre mesteparten av jobben for deg. Uansett hvilken type nettside du driver, er sjansen stor for at en stor del av de besøkende bruker mobile enheter. Selv om det kan være for tungvint for deg å lage en hel alternativ versjon av nettstedet ditt, er det ingen problemer å gjøre en liten justering. Da er det ingen grunn til å ikke klare det.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
