Har du någonsin varit på en webbplats och upptäckt att en navigeringsmeny alltid syns högst upp?

I princip visas navigationsmenyer på ett sådant sätt att de försvinner när du rullar på sidan. De alltid synliga navigeringsmenyerna flyter och är så oavsett hur användaren rullar nedåt.Hur man skapar wordpress flytande meny 1

I den här tutorialen visar vi dig hur du enkelt kan skapa en flytande meny på din WordPress-blogg.

Om du inte har skapat en webbplats eller blogg på WordPress, inbjuder vi dig att konsultera Hur man installerar en Wordpress-blogg 7 steg sedan, Hur man hittar, installera och aktivera en Wordpress tema på din blogg

Om det är gjort, låt oss ta reda på vad som berör oss idag.

1-metod: Hur man lägger till en flytande meny på WordPress med hjälp av ett plugin

Denna metod är enklare och är snabb. Om du inte har ställt in navigationsmenyerna ännu kan du göra det lära sig hur man gör det.

Sticky meny wordpress plugin

Det första du behöver göra är att installera och aktivera plugin " Sticky Menu (eller något!) Vi Bläddra ". Om du inte vet hur du installerar ett plugin, du kan läsa vår handledning.

Efter aktiveringen måste du besöka " Inställningar »Sticky Menu För att konfigurera inställningarna för detta plugin.

Sticky meny wordpress plugin

Först måste du ange CSS-ID: n för navigeringsmenyn som du vill låta flyta.

Du måste använda din webbläsares "inspektera" verktyg för att hitta den CSS som används.

Gå till din webbplats och flytta musen till navigationsmenyn. Efter det måste du högerklicka och välja "Inspektera".

Gå längre genom att upptäcka Hur man anpassar en Wordpress tema med Yellow Pencil

Inspektera en tutorial wordpress-kod

Detta delar (som standard) din webbläsarskärm och du kan se källkoden för din navigationsmeny. Du måste hitta en linje som liknar den här:

I det här exemplet är CSS-ID för vår navigationsmeny " site Navigation ".

Fortsätt och skriv in menyens CSS-ID i plugininställningarna enligt följande "# site-navigation".

Nästa alternativ för plugininställningar är att ställa in utrymmet mellan skärmens överkant och den flytande navigationsmenyn. Du kan använda den här inställningen om din meny överlappar ett objekt som du inte vill dölja. I annat fall ska du ignorera den här inställningen.

Därefter måste du klicka på rutan bredvid alternativet: "Kontrollera fältadministratör". Detta gör det möjligt för pluginet att lägga till lite utrymme för WordPress-verktygsfältet som läggs till för inloggade användare.

Nästa alternativ på inställningssidan låter dig dölja navigeringsmenyn om en användare besöker din webbplats med en mindre skärm, till exempel en mobil enhet.

Du kan testa hur den här menyn visas på mobila enheter och surfplattor. Om du inte gillar det kan du lägga till 780 pixlar på det här alternativet.

Upptäck också Hur man skapar en lyhörd meny för mobil Wordpress

Glöm inte att klicka på " Spara inställningar För att spara dina ändringar.

Du kan nu besöka din webbplats för att se din flytande navigationsmeny i aktion.

Wordpress flottörmeny

Metod 2: Hur man lägger till en navigeringsmeny manuellt

Denna metod kräver att du lägger till anpassad CSS-kod till ditt WordPress-tema.

Först och främst måste du besöka " Utseende> Anpassa För att starta WordPress Customizer.

Ytterligare css wordpress anpassare

Klicka på Ytterligare CSS Lägg till den här CSS-koden i den vänstra rutan.

# Site navigation {background: #fff; höjd: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px fast #dadada; bredd: 100%; läget: fast; top: 0; vänster: 0; höger: 0; text-align: center; }

Ersätt " # Site Navigation Genom identifieraren för din navigationsmeny och klicka på knappen « Enregistrer ".

Du kan nu besöka din webbplats för att se din flytande navigationsmeny i aktion.

Om din navigeringsmeny normalt visas efter webbplatsens rubrik kan den här CSS-koden överlappa webbplatsens titel och rubriken.

Detta kan enkelt justeras genom att lägga till en marginal i rubrikområdet med följande kod:

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

Här slutar vår handledning, nu kan du skapa eller lägga till en flytande meny på din webbplats.

Om du letar efter andra WordPress-plugins som gör att du kan hantera menyer, här är några premium WordPress-plugins som är dedikerade till den här uppgiften. 

1. Meny hjälte

Detta plugin låter dig skapa din egen personliga WordPress-meny i några enkla steg. Det gör att du enkelt och intuitivt kan skapa en elegant och professionell WordPress-meny. Från den mest komplexa mega-menyn full av funktioner, till den enklaste menyn med rullgardinsmenyn, WordPress-plugin HeroMenu ställer in alla typer av menyer och går igång på några minuter.

Hjälten meny responsiv wordpress mega meny plugin

När det gäller funktioner erbjuder den bland annat: perfekt funktionell på PC, surfplatta och smartphone, lättanvänd, anpassningsbart innehåll, anpassad CSS för att lägga till dina egna menyformat, mega-menydesigner, webbläsare som stöds: Chrome, Firefox, Safari , Opera, IE9 och mer.

Ladda ner | demo | webbhotell

2. Slick Menu

Slick Menu är inte bara ett menyplugin för WordPress. Den kan användas för att skapa obegränsade menynivåer, samt sidofält med rikt innehåll, flera stylingalternativ och animerade effekter.

Slick meny responsiv wordpress vertikal meny

Varje menynivå kan anpassas med bakgrundsfärger, bilder, videor, anpassade teckensnitt och mer. Detta plugin är helt lyhört och har över 45 animationer för menyalternativen.

Ladda ner | demo | webbhotell

3. 8Degree Fly Meny

8Degree Fly Menu är ett premium WordPress-plugin som låter dig lägga till en canvas-meny på din webbplats för att ge den en titt som lyfter fram och enkelt din information. Den använder standard WordPress-menyfunktionen för att skapa sina menyer.

8degree fly meny svarar på menyn plugin för wordpress

Du kommer att kunna lägga till ytterligare element i standardmenyalternativen, till exempel ikoner, menyslagor, en pseudogrupprubrik och en lång beskrivning. Det kommer också med en WYSIWYG-redigerare som hjälper dig att ta tag i din långa beskrivning på ett användarvänligt sätt. Med denna redigerare kan du också använda kortkoder.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Om du vill gå vidare med att skapa eller anpassa menyerna på din blogg eller din webbplats föreslår vi också att du konsulterar länkarna nedan.

Slutsats

Här! Det är det för den här självstudien, jag hoppas att du kan lägga till en flytande meny på din WordPress-blogg. Vi inbjuder dig att dela den här artikeln med dina vänner på dina sociala nätverk.

Om du har några förslag eller kommentarer är de välkomna. Och om du är ny inom WordPress, konsultera detta resurs.

.  

6 aktier
del2
tweet
Enregistrer4