Har du noen gang vært på et nettsted og funnet ut at en navigasjonsmeny alltid er synlig øverst?

I prinsippet vises navigasjonsmenyer på en slik måte at de forsvinner når du blar på siden. De alltid synlige navigasjonsmenyene flyter og er så uansett hvordan brukeren ruller nedover.

I denne opplæringen vil vi vise deg hvordan du enkelt kan lage en flytende meny på WordPress-bloggen din.

Hvis du ennå ikke har opprettet et nettsted eller en blogg på WordPress, inviterer vi deg til å konsultere Hvordan installere en WordPress-blogg i 7 trinn da, Hvordan finne, installere og aktivere en WordPress tema på bloggen din

Hvis det er gjort, la oss gå inn på det som angår oss i dag.

1-metode: Slik legger du til en flytende meny på WordPress ved hjelp av en plugin

Denne metoden er enklere og er rask. Hvis du ikke har konfigurert navigasjonsmenyene ennå, kan du gjøre det lære å gjøre det.

Det første du trenger å gjøre er å installere og aktivere pluginet " Sticky Meny (eller noe!) Vi Rull ". Hvis du ikke vet hvordan du installerer en plugin, gjør du det kan lese opplæringen vår.

Etter aktivering må du gå til " Innstillinger »Sticky Menu For å konfigurere innstillingene for denne plugin.

Først må du angi CSS-ID-ene til navigasjonsmenyen du vil flyte.

Du må bruke nettleserens "inspiser" -verktøy for å finne CSS som brukes.

Gå til nettstedet ditt og flytt musen til navigasjonsmenyen. Etter det må du høyreklikke og velge "Inspiser".

Gå videre ved å oppdage Hvordan tilpasse en WordPress tema med Yellow Pencil

Dette vil dele (som standard) nettleserskjermen din, og du vil kunne se kildekoden til navigasjonsmenyen. Du må finne en linje som ligner på dette:

I dette eksemplet er CSS-IDen til navigasjonsmenyen vår " Site Navigation '.

Gå videre og skriv inn menyens CSS ID i plugin-innstillingene som følger “# site-navigation”.

Det neste alternativet for plugin-innstillinger er å angi mellomrom mellom toppen av skjermen og den flytende navigasjonsmenyen. Du kan bruke denne innstillingen hvis menyen overlapper med et element du ikke vil skjule. Ellers ignorerer du denne innstillingen.

Etter det må du klikke på ruten ved siden av alternativet: "Sjekk bareadministrator". Dette gjør at pluginet kan legge til litt plass for WordPress-verktøylinjen som legges til for påloggede brukere.

Det neste alternativet på innstillingssiden lar deg skjule navigasjonsmenyen hvis en bruker besøker nettstedet ditt ved hjelp av en mindre skjerm, for eksempel en mobilenhet.

Du kan teste hvordan denne menyen vises på mobile enheter og nettbrett. Hvis du ikke liker det, kan du legge til 780 piksler på dette alternativet.

Oppdag også Hvordan lage en forståelsesfull meny for mobil WordPress

Ikke glem å klikke på " Lagre innstillinger For å lagre endringene.

Du kan nå besøke nettstedet ditt for å se den flytende navigasjonsmenyen i aksjon.

Metode 2: Hvordan legge til en navigasjonsmeny manuelt

Denne metoden krever at du legger til tilpasset CSS-kode til din WordPress tema.

Først og fremst må du besøke " Utseende> Tilpass For å starte WordPress Customizer.

Klikk på Tilleggs CSS Legg til denne CSS-koden i venstre rute.

# Side navigasjon {background: #fff; høyde: 60px; z-indeks: 170; margin: 0 auto; nedre kant: 1px fast #dadada; bredde: 100%; stilling: fast; top: 0; venstre: 0; høyre: 0; tekst-Justering: center; }

Erstatt " # Site Navigation Ved å identifisere navigasjonsmenyen og klikk på knappen « Enregistrer '.

Du kan nå besøke nettstedet ditt for å se den flytende navigasjonsmenyen i aksjon.

Hvis navigasjonsmenyen din normalt vises etter nettstedets overskrift, kan denne CSS-koden overlappe nettstedets tittel og overskriften.

Dette kan enkelt justeres ved å legge til en margin på topptekstområdet ditt ved hjelp av følgende kode:

.site-merking {margin-top: 60px; }

Her slutter opplæringen vår, nå vil du kunne opprette eller legge til en flytende meny på nettstedet ditt.

Hvis du leter etter andre WordPress plugins som lar deg administrere menyene, her er noen WordPress plugins premium dedikert til denne oppgaven. 

1. meny Hero

Dette pluginet lar deg lage din egen tilpassede WordPress-meny i noen få ganske enkle trinn. Spesielt lar den deg enkelt og intuitivt lage en elegant og profesjonell WordPress-meny. Fra den mest komplekse funksjonsrike megamenyen til den enkleste rullegardinmenyen, den WordPress Plugin HeroMenu setter opp alle typer menyer og får den i gang på få minutter.

Når det gjelder funksjoner tilbyr den blant annet: perfekt funksjonell på PC, nettbrett og smarttelefon, enkel å bruke, tilpassbart innhold, tilpasset CSS for å legge til dine egne menystiler, mega-menydesigner, støttede nettlesere: Chrome, Firefox, Safari , Opera, IE9 og mer.

Last ned | dEMO | Webhotell

2. Slick Menu

Slick Menu er ikke bare et menyprogram for WordPress. Den kan brukes til å lage flere menynivåer på en ubegrenset måte, samt sidefelt med rikt innhold, flere stilalternativer og animerte effekter.

Hvert menynivå kan tilpasses med bakgrunnsfarger, bilder, videoer, egendefinerte skrifttyper og mer. Dette pluginet er fullstendig responsivt og har over 45 animasjoner for menyelementene.

Last ned | dEMO | Webhotell

3. 8Degree Fly-meny

8Degree Fly Menu er en WordPress Plugin premium som lar deg legge til en lerretsmeny på nettstedet ditt, for å gi det et utseende som fremhever informasjonen din på en enkel måte. Den bruker standard WordPress-menyfunksjonen for å lage menyene.

Du vil kunne legge til flere elementer i standardmenyelementene, for eksempel ikoner, menyslagord, en pseudogrupperingshode og en lang beskrivelse. Den kommer også med en WYSIWYG-redigerer som hjelper deg å forstå den lange beskrivelsen på en brukervennlig måte. Med denne redigereren kan du også bruke kortkoder.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Hvis du vil gå videre med å lage eller tilpasse menyene til bloggen din eller nettstedet ditt, anbefaler vi deg også å se på lenkene nedenfor.

• Hvordan legge stil til navigasjonsmenyer
•  Hvordan legge til en tittel attributt i WordPress menyer
• 8 WordPress-plugins for å lage en megamenu på bloggen din

konklusjonen

Her! Det er det for denne opplæringen, jeg håper det vil tillate deg å legge til en flytende meny i WordPress-bloggen din. Vi inviterer deg til del denne artikkelen med vennene dine på sosiale nettverk.

Hvis du har noen forslag eller kommentarer, er de velkomne. Og hvis du er ny på WordPress, konsultere dette ressurs.

...