Share
Sie haben sie also auf den Websites anderer gesehen und möchten wissen, wie Sie auch eine haben können? Das Scrolling-Navigationsmenü, das auf vielen Websites angezeigt wird, lässt sich sehr einfach in WordPress replizieren. Helfen Sie Ihren Lesern, lassen Sie sie von jedem Punkt der Seite aus auf das Menü klicken. Hier ist wie…
Als Erstes benötigen Sie ein Menü, um es auf der Seite anzuzeigen. Erstellen wir eine neue mit dem Namen 'Topnavigation'. Hier ist der grundlegendste Code zum Einrichten dieses Menüs in Ihrem Functions.php Datei:
Accentsconagua
register_nav_menus (array ('topnavigation' => __ ('Top Navigation', 'IHR THEMENNAME GEHT HIER'))); Wenn Sie schon eine haben register_nav_menus Funktion einrichten, 'hinzufügenTopnavigation'Menüzeile zu dieser Funktion.
Gehen Sie in Ihr Dashboard und öffnen Sie die Registerkarte "Menüs". Erstellen Sie ein neues Menü und weisen Sie es dem Bereich zu, den Sie gerade als "Top Navigation" bezeichnet haben. Dann füllen Sie das Menü mit Seiten. Ich habe mich gerade für ein Zuhause, einen Store, ein Event und ein Blog entschieden - Sie verwenden, was Sie möchten.
Sie müssen Ihr Menü ganz oben in Ihrem Körper aufrufen header.php Datei. Es ist sehr wichtig, dass Sie dieses Menü in einen Wrapper packen div Ihrer Wahl. Ich habe eine gewählt div namens Topnavigation. Wir müssen alles in dieser Hinsicht machen div bewegen Sie sich später mit der Seite. Dies ist der einfachste Weg, dies zu tun.
Verwenden Sie den folgenden Code in header.php:
'Topnavigation')); ?>
Das sollte Ihnen etwas geben, das auf Ihrer Seite so aussieht:
Natürlich wird Ihr Thema anders sein. Meins ist nur ein grundlegender Unterstrich, der mit einem einfachen Raster von Get Skeleton installiert wird.
Danach können wir mit dem Styling beginnen. Damit wir sehen können, was wir tun, fügen wir zunächst ein wenig CSS hinzu, um ihm eine Hintergrundfarbe zu geben. Wir möchten, dass die Breite 100% beträgt, sodass sie nicht sonderbar aussieht, wenn wir sie sofort scrollen lassen.
Verwenden Sie den folgenden Code in style.css oder wie auch immer Ihr Stylesheet heißt:
#Topnavigation Breite: 100%; Hintergrundfarbe: # 999;
Aktualisieren Sie Ihre Seite und Sie werden Folgendes sehen:
Jetzt möchten wir sicherstellen, dass unsere Links in die Mitte der grauen Leiste gehen. Wir erstellen also ein Navigationselement um das Navigationsmenü:
Dann müssen wir dem neuen Navi einen Stil geben. Das können wir so machen:
#topnavigation nav width: 940px; // Die Breite Ihres Container-Divs unterscheidet sich möglicherweise von margin: 0 auto; #topnavigation li display: inline; Polsterung: 10px; Marge: 20px 0;
Durch diese beiden Dinge sieht das Navigationsmenü auf Ihrer Seite folgendermaßen aus:
Schließlich sind wir bereit, es zu scrollen. Am besten befestigen Sie es am oberen Rand des Fensters und lassen es dann über allen anderen Elementen auf der Seite schweben.
Aktualisieren Sie Ihre #Topnavigation Stil so aussehen:
#Topnavigation Breite: 100%; Hintergrundfarbe: # 999; Position: feststehend; // klebe es oben im Fenster z-index: 1; // Lass es über allen anderen Elementen schweben. Height: 50px; // Gibt uns einen Bezugspunkt für die letzte Sache
Wenn Sie Ihr Fenster jedoch neu laden, werden Sie feststellen, dass aufgrund der schwebenden Navigation alle anderen Inhalte darunter liegen.
Um dies zu umgehen, fügen Sie einen oberen Rand des Containers hinzu div mit allem anderen drin. In meiner Vorlage das div wird genannt #Seite. Also füge ich dies meiner CSS-Datei hinzu:
#page padding-top: 60px; // Die Höhe meines Topnavigation div plus ein wenig zusätzliche Polsterung für visuelles Vergnügen
Das wird dich verlassen:
Danach können Sie die Navigation nach Herzenslust gestalten!
