Heeft u ooit een website bezocht en ontdekt dat een navigatiemenu altijd bovenaan zichtbaar is?

Navigatiemenu's worden in principe zo weergegeven dat ze verdwijnen bij het scrollen over de pagina. De altijd zichtbare navigatiemenu's zweven en zijn dus ongeacht hoe de gebruiker naar beneden scrolt.

In deze zelfstudie laten we u zien hoe u eenvoudig een zwevend menu op uw WordPress-blog kunt maken.

Als je nog geen website of blog op WordPress hebt gemaakt, nodigen we je uit om te raadplegen Hoe installeer je een WordPress-blog in 7 stappen dan, Hoe te vinden, installeren en activeren van een WordPress theme op uw blog

Als het klaar is, laten we dan eens kijken wat ons vandaag zorgen baart.

1-methode: een zwevend menu toevoegen aan WordPress met een plug-in

Deze methode is eenvoudiger en is snel. Als u de navigatiemenu's nog niet hebt ingesteld, kunt u dat leer hoe het te doen.

Het eerste dat u hoeft te doen, is de plug-in installeren en activeren " Sticky Menu (of iets!) Op Scroll ". Als u niet weet hoe u een plug-in moet installeren, moet u kan onze tutorial lezen.

Na activering moet u ' Instellingen »Sticky Menu Om de instellingen van deze plug-in te configureren.

Eerst moet u de CSS-ID's invoeren voor het navigatiemenu dat u wilt laten zweven.

U moet de "inspect" -tool van uw browser gebruiken om de gebruikte CSS te vinden.

Ga naar uw website en beweeg uw muis naar het navigatiemenu. Klik daarna met de rechtermuisknop en selecteer "Inspecteren".

Ga verder door te ontdekken Hoe een WordPress-thema met een gouden potlood aanpassen

Dit verdeelt (standaard) uw browserscherm en u kunt de broncode van uw navigatiemenu zien. U moet een soortgelijke regel vinden:

In dit voorbeeld is de CSS-ID van ons navigatiemenu " Site Navigation .

Ga je gang en voer de CSS-ID van het menu in de plug-in-instellingen in als volgt "# site-navigatie".

De volgende optie op de plug-in-instellingen is om de ruimte tussen de bovenkant van het scherm en het zwevende navigatiemenu in te stellen. U kunt deze instelling gebruiken als uw menu overlapt met een item dat u niet wilt verbergen. Negeer deze instelling anders.

Daarna moet je op het vakje klikken naast de optie: "Check Bar Admin". Hierdoor kan de plug-in wat ruimte toevoegen voor de WordPress-werkbalk die is toegevoegd voor ingelogde gebruikers.

Met de volgende optie op de instellingenpagina kunt u het navigatiemenu verbergen als een gebruiker uw website bezoekt met een kleiner scherm, zoals een mobiel apparaat.

U kunt testen hoe dit menu wordt weergegeven op mobiele apparaten en tablets. Als je het niet leuk vindt, kun je 780px toevoegen aan deze optie.

Ontdek ook Hoe maak je een responsief mobiel menu op WordPress

Vergeet niet op de " Instellingen opslaan Om uw wijzigingen op te slaan.

U kunt nu uw website bezoeken om uw zwevende navigatiemenu in actie te zien.

Methode 2: Handmatig een navigatiemenu toevoegen

Deze methode vereist het toevoegen van aangepaste CSS-code aan uw WordPress theme.

Allereerst moet je " Uiterlijk> Aanpassen Om de WordPress Customizer te starten.

Klik op Aanvullende CSS Voeg in het linkerdeelvenster deze CSS-code toe.

# Site-navigatie {achtergrond: #fff; Hoogte: 60px; z-index: 170; Marge: 0 auto; Border-bottom: 1px solid #dadada; Breedte: 100%; position: fixed; top: 0; left: 0; rechts: 0; Text-align: center; }

Vervangen " # Site Navigation Door de identificatie van uw navigatiemenu en klik op de knop « Enregistrer .

U kunt nu uw website bezoeken om uw zwevende navigatiemenu in actie te zien.

Als uw navigatiemenu normaal verschijnt na de koptekst van de website, kan deze CSS-code de titel van de website en de koptekst overlappen.

Dit kan eenvoudig worden aangepast door een marge toe te voegen aan uw koptekstgebied met behulp van de volgende code:

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

Hier eindigt onze tutorial, nu kunt u een zwevend menu op uw website maken of toevoegen.

Als u op zoek bent naar andere WordPress plugins waarmee u de menu's kunt beheren, hier zijn er enkele: WordPress plugins premie voor deze taak. 

1. Held Menu

Met deze plug-in kunt u in een paar vrij eenvoudige stappen uw eigen aangepaste WordPress-menu maken. Het stelt u met name in staat om eenvoudig en intuïtief een elegant en professioneel WordPress-menu te maken. Van het meest complexe megamenu met veel functies tot het eenvoudigste vervolgkeuzemenu, de WordPress Plugin HeroMenu stelt elk type menu samen en zorgt ervoor dat het binnen enkele minuten operationeel is.

Qua functies biedt het onder andere: perfect functioneel op pc, tablet en smartphone, gemakkelijk te gebruiken, aanpasbare inhoud, aangepaste CSS om uw eigen menustijlen toe te voegen, mega-menuontwerper, ondersteunde browsers: Chrome, Firefox, Safari , Opera, IE9 en meer.

Downloaden | demonstratie | web hosting

2. Slank Menu

Slank Menu is niet alleen een menu-plug-in voor WordPress. Het kan worden gebruikt om op een onbeperkte manier meerdere menuniveaus te creëren, evenals zijbalken met rijke inhoud, meerdere stijlopties en geanimeerde effecten.

Elk menuniveau kan worden aangepast met achtergrondkleuren, afbeeldingen, video's, aangepaste lettertypen en meer. Deze plug-in is volledig responsief en heeft meer dan 45 animaties voor de menu-items.

Downloaden | demonstratie | web hosting

3. 8Graad Vliegmenu

8Graden Fly Menu is een WordPress Plugin premium waarmee u een canvasmenu aan uw website kunt toevoegen, om het een uiterlijk te geven dat uw informatie op een eenvoudige manier benadrukt. Het gebruikt de standaard WordPress-menufunctie om zijn menu's te maken.

U kunt extra elementen toevoegen aan de standaardmenu-items, zoals pictogrammen, menuslogans, een kop met pseudogroepering en een lange beschrijving. Het komt ook met een WYSIWYG-editor om u te helpen uw lange beschrijving op een gebruiksvriendelijke manier te begrijpen.Met deze editor kunt u ook shortcodes gebruiken.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

Als u verder wilt gaan in het maken of aanpassen van de menu's van uw blog of uw website, raden we u ook aan de onderstaande links te raadplegen.

• Hoe u stijl geeft aan uw navigatiemenu's
•  Hoe maak je een titel attribuut in WordPress menu's toe te voegen
• 8 WordPress-plug-ins om een ​​megamenu op uw blog te maken

Conclusie

Alstublieft ! Dat is het voor deze tutorial, ik hoop dat je hiermee een zwevend menu aan je WordPress-blog kunt toevoegen. We nodigen je uit om deel dit artikel met je vrienden op je sociale netwerken.

Als u suggesties of opmerkingen heeft, zijn deze welkom. En als je nieuw bent bij WordPress, raadpleeg dit hulpbron.

...