Har du nogensinde været på et websted og fundet ud af, at en navigationsmenu altid er synlig øverst?

I princippet vises navigationsmenuer på en sådan måde, at de forsvinder, når du ruller på siden. De altid synlige navigationsmenuer flyder og er så uanset hvordan brugeren ruller nedad.

I denne tutorial vil vi vise dig, hvordan du nemt opretter en flydende menu på din WordPress-blog.

Hvis du endnu ikke har oprettet et websted eller en blog på WordPress, inviterer vi dig til at konsultere Sådan installeres en WordPress-blog i 7 trin, Hvordan at finde, installere og aktivere et WordPress tema på din blog

Hvis det er gjort, lad os komme ind på, hvad der vedrører os i dag.

1-metode: Sådan tilføjes en flydende menu på WordPress ved hjælp af et plugin

Denne metode er lettere og er hurtig. Hvis du ikke har konfigureret navigationsmenuerne endnu, kan du gøre det lære at gøre det.

Det første du skal gøre er at installere og aktivere plugin " Sticky menu (eller noget!) Vi Rul ". Hvis du ikke ved, hvordan du installerer et plugin, du kan læse vores vejledning.

Efter aktivering skal du besøge " Indstillinger »Sticky Menu Sådan konfigureres indstillingerne for dette plugin.

Først skal du indtaste CSS-id'erne i navigationsmenuen, som du vil lade flyde.

Du skal bruge din browsers "inspiceringsværktøj" til at finde den anvendte CSS.

Gå til dit websted, og flyt musen til navigationsmenuen. Derefter skal du højreklikke og vælge "Inspekter".

Gå videre ved at opdage Sådan tilpasses en WordPress tema med Yellow Pencil

Dette deler (som standard) din browserskærm, og du kan se kildekoden til din navigationsmenu. Du skal finde en linje, der ligner denne:

I dette eksempel er CSS ID for vores navigationsmenu " site Navigation '.

Gå videre og indtast menuens CSS ID i plugin-indstillingerne som følger “# site-navigation”.

Den næste mulighed for plugin-indstillinger er at indstille mellemrummet mellem toppen af ​​skærmen og den flydende navigationsmenu. Du kan bruge denne indstilling, hvis din menu overlapper med et element, som du ikke vil skjule. Ellers skal du ignorere denne indstilling.

Derefter skal du klikke på feltet lige ved siden af ​​indstillingen: "Check Bar Admin". Dette gør det muligt for pluginet at tilføje noget plads til WordPress-værktøjslinjen, som tilføjes for loggede brugere.

Den næste mulighed på indstillingssiden giver dig mulighed for at skjule navigationsmenuen, hvis en bruger besøger dit websted ved hjælp af en mindre skærm, f.eks. En mobilenhed.

Du kan teste, hvordan denne menu vises på mobile enheder og tablets. Hvis du ikke kan lide det, kan du tilføje 780 pixel på denne mulighed.

Opdag også Sådan oprettes en lydhør menu til mobil WordPress

Glem ikke at klikke på " Gem indstillinger For at gemme dine ændringer.

Du kan nu besøge dit websted for at se din flydende navigationsmenu i aktion.

Metode 2: Sådan tilføjes en navigationsmenu manuelt

Denne metode kræver tilføjelse af tilpasset CSS-kode til din WordPress tema.

Først og fremmest skal du besøge " Udseende> Tilpas At starte WordPress Customizer.

Klik på Yderligere CSS I venstre rude skal du tilføje denne CSS-kode.

# Site navigation {baggrund: #fff; højde: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px fast #dadada; bredde: 100%; holdning: fast; top: 0; venstre: 0; højre: 0; text-align: center; }

Erstat " # Site Navigation Ved at identificere din navigationsmenu og klikke på knappen « Tilmeld '.

Du kan nu besøge dit websted for at se din flydende navigationsmenu i aktion.

Hvis din navigationsmenu normalt vises efter webstedsoverskriften, kan denne CSS-kode overlappe hjemmesidens titel og overskrift.

Dette kan let justeres ved at tilføje en margen i dit headerområde ved hjælp af følgende kode:

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

Her slutter vores tutorial, nu vil du være i stand til at oprette eller tilføje en flydende menu på dit websted.

Hvis du leder efter andre WordPress plugins som giver dig mulighed for at administrere menuerne, her er nogle WordPress plugins præmie dedikeret til denne opgave. 

1. Menu Hero

Dette plugin giver dig mulighed for at oprette din egen brugerdefinerede WordPress-menu i et par ret nemme trin. Det giver dig især mulighed for nemt og intuitivt at skabe en elegant og professionel WordPress-menu. Fra den mest komplekse funktionsrige megamenu til den enkleste rullemenu, den WordPress plugin HeroMenu opretter enhver form for menu og får den til at køre på få minutter.

Med hensyn til funktioner tilbyder den blandt andet: perfekt funktionel på pc, tablet og smartphone, let at bruge, tilpasses indhold, brugerdefineret CSS for at tilføje dine egne menustyper, mega-menudesigner, understøttede browsere: Chrome, Firefox, Safari , Opera, IE9 og mere.

Downloade | demo | Web-hosting

2. Slick Menu

Slick Menu er ikke kun et menu-plugin til WordPress. Det kan bruges til at oprette flere menuniveauer på en ubegrænset måde såvel som sidebjælker med rigt indhold, flere stilindstillinger og animerede effekter.

Hvert menuniveau kan tilpasses med baggrundsfarver, billeder, videoer, brugerdefinerede skrifttyper og mere. Dette plugin er fuldstændig lydhør og har over 45 animationer til menupunkterne.

Downloade | demo | Web-hosting

3. 8Degree Fly Menu

8Degree Fly Menu er en WordPress plugin premium som giver dig mulighed for at tilføje en lærredsmenu til din hjemmeside, for at give den et look, der fremhæver dine informationer på en enkel måde. Det bruger standard WordPress-menufunktionen til at oprette sine menuer.

Du vil være i stand til at tilføje yderligere elementer til standardmenupunkterne, såsom ikoner, menusloganer, en pseudogrupperingshoved og en lang beskrivelse. Den leveres også med en WYSIWYG-editor til at hjælpe dig med at forstå din lange beskrivelse på en brugervenlig måde. Med denne editor kan du også bruge kortkoder.

Downloade | demo | Web-hosting

Andre anbefalede ressourcer

Hvis du vil gå videre med at oprette eller tilpasse menuerne på din blog eller dit websted, anbefaler vi dig også at konsultere nedenstående links.

• Sådan giver du stil til dine navigationsmenuer
•  Hvordan at tilføje en titel attribut i WordPress menuer
• 8 WordPress-plugins til at oprette en megamenu på din blog

Konklusion

Her ! Det er det til denne vejledning, jeg håber, det giver dig mulighed for at tilføje en flydende menu på din WordPress-blog. Vi inviterer dig til del denne artikel med dine venner på dine sociale netværk.

Hvis du har nogle forslag eller bemærkninger, er de velkomne. Og hvis du er ny med WordPress, konsulter dette ressource.

...