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.
I den här tutorialen visar vi dig hur du enkelt kan skapa en flytande meny på din WordPress-blogg.
Om du ännu inte har skapat en webbplats eller en blogg på WordPress, inbjuder vi dig att konsultera Hur man installerar en WordPress-blogg i 7 steg då, 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.
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.
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
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.
Metod 2: Hur man lägger till en navigeringsmeny manuellt
Denna metod kräver att du lägger till anpassad CSS-kod till din Wordpress tema.
Först och främst måste du besöka " Utseende> Anpassa För att starta WordPress Customizer.
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 låter dig hantera menyerna, här är några Wordpress plugins premie tillägnad denna uppgift.
1. Meny hjälte
Detta plugin låter dig skapa din egen anpassade WordPress-meny i några ganska enkla steg. I synnerhet låter det dig enkelt och intuitivt skapa en elegant och professionell WordPress-meny. Från den mest komplexa funktionsrika megamenyn till den enklaste rullgardinsmenyn, den Wordpress plugin HeroMenu ställer in alla typer av menyer och går igång på några minuter.
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.
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 en Wordpress plugin premium som låter dig lägga till en canvasmeny på din webbplats, för att ge den ett utseende som framhäver din information på ett enkelt sätt. Den använder standardmenyfunktionen i WordPress för att skapa sina menyer.
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.
- Hur man lägger stil till ditt navigeringsmenyer
- Hur man lägger till en titel attribut i Wordpress menyer
- 8 WordPress-plugins för att skapa en megamenu på din blogg
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.
.
Hej!
Först och främst tack för den här guiden som gör jobbet perfekt!
Men oavsett hur hårt jag sökte på nätet kunde jag inte hitta svaret på min fråga:
Hur gör jag det, när den flytande menyn har skapats (i CSS eller med tillägget, vad som helst), så att mina sektioner visas efter menyn och inte bakom menyn?
Det är särskilt irriterande i mitt fall eftersom det är en sida och objekten i min meny hänvisar därför till sidorna på sidorna, som varje gång går bakom min meny ...
talar det till dig?
Tack på förhand!
Jag undrade om det var möjligt att göra innehållsförteckningen på en sida "klibbig" ...
Hej!
Aldrig testad än. Jag kan inte svara dig.
hello; Hej
Jag försökte med ett nedladdat tema (wallstreet) men medan jag följde dina instruktioner ändras ingenting ... Jag vet inte vad som saknas ...
Jag gillar det och jag önskar att jag kunde använda det ...
tack
raul
hej,
Försök att inaktivera alla andra WordPress-plugins och titta på skärmen nästa.
Tack för din handledning, enkelt så hej allt är att veta!
Hej!
Glad att jag var hjälpsam.