So erstellen Sie Ihre eigene klebrige Kopfzeile wie MakeUseOf

Werbung

Vor ungefähr einem Monat haben wir MakeUseOf ein neues Oberflächenelement hinzugefügt - eine schwebende Navigations- und Suchleiste. Das Feedback, das wir erhalten haben, ist fast ausschließlich positiv, der interne Suchverkehr ist in die Höhe geschossen, und einige Leser haben gefragt, wie sie einen für ihre eigene Website erstellen können. Deshalb dachte ich, ich würde ihn teilen.

Wir werden jQuery verwenden, um die Leiste am oberen Bildschirmrand zu befestigen - jedoch erst nach einem bestimmten Punkt. Ich mache das alles im Standard-WordPress-Theme - Twenty Eleven, obwohl es natürlich auf jedes Theme oder jede Website angewendet werden kann, deren Änderung Sie hinreichend verstehen.

Der HTML

Öffnen Sie zunächst die Themes header.php und identifizieren Sie die Navigationsleiste, die wir klebrig machen werden. Wie gesagt, der folgende Code gilt für die Standardeinstellung elfundzwanzig; Ihre kann variieren.

Fügen Sie zunächst einen neuen DIV-Container hinzu, der den gesamten NAV-Abschnitt umgibt.

Verschieben wir auch diese Standardsuchleiste hierher. Sie werden feststellen, dass es standardmäßig oben rechts im Thema hinzugefügt wird. finde die Linie php get_search_form (); und fügen Sie es in unseren Navigationsbereich ein. Löschen Sie alle anderen Instanzen in dieser Datei.

Wenn Sie jetzt speichern und aktualisieren, wird das Suchformular nicht in der Navigationsleiste angezeigt, sondern weiterhin oben rechts. Das liegt daran, dass es absolut mit CSS positioniert wurde und wir das alles in einer Sekunde löschen werden.

Das CSS

Öffnen Sie die Hauptdatei style.css und suchen Sie den Abschnitt für das Suchformular:

#branding #searchform {... }

Ersetzen Sie alles, was sich darin befindet (sollte ungefähr vier Zeilen enthalten können, einschließlich einer absoluten Positionierung) durch Folgendes:

#branding #searchform { float: left; Hintergrund: weiß; Rand: 7px; }

Fühlen Sie sich frei, die Farbe oder den Rand anzupassen. Ändern Sie den Schwimmer, wenn Sie möchten, dass er rechts in der Leiste angezeigt wird. In diesem Thema wird die Suche erweitert, wenn der Benutzer darauf klickt. Dies ist nicht Gegenstand dieses Lernprogramms. Sie können jedoch einen ähnlichen Effekt auf unsere MakeUseOf-Suche feststellen.

jQuery

Wenn Sie sich fragen, warum wir dazu jQuery verwenden, ist dies ganz einfach: CSS ist behoben und kann nicht dynamisch angepasst werden. Während wir CSS verwenden könnten, um einen klebrigen Header zu erstellen, müsste es das oberste Element auf der Seite sein. Das Problem, das wir haben, ist, dass unser Menü nicht das oberste Element ist, sodass wir nicht damit beginnen können, dass es klebrig ist. Hier wird die jQuery verwendet. Wir können überprüfen, wann der Benutzer einen bestimmten Punkt überschreitet. dann und nur dann machen Sie es klebrig.

Fügen Sie Ihrem Thema zunächst jQuery hinzu. Ihr Thema hat es möglicherweise bereits geladen. Wenn nicht, keine Sorge. Sie können es entweder in die Warteschlange stellen, indem Sie Ihrer functions.php den folgenden Code hinzufügen:

php. Funktion my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Oder Sie können WordPress einfach ganz umgehen und dies in die Header-Datei einfügen. Fügen Sie irgendwo in Ihrem Kopfbereich einfach diese Zeile hinzu:

Wenn Sie die erste Methode verwenden, wird sie geladen kein Konflikt Dies bedeutet, dass Sie in Ihrem Code "jQuery" verwenden müssen, um auf jQuery-Funktionen zugreifen zu können. Wenn Sie die zweite Methode verwenden, um sie direkt zu Ihrem Header hinzuzufügen, können Sie den Standard-jQuery-Accessor von verwenden $. Ich gehe von der zweiten Methode im folgenden Code aus.

Um einen tatsächlichen jQuery-Code hinzuzufügen, platzieren Sie Folgendes am Ende Ihres header.php - Ich habe meine kurz vor dem platziert

Das Skript muss zunächst herausfinden, wo die Navigationsleiste beginnt, und sich diesen Wert merken. Zweitens hängen wir an das Bildlaufereignis an. Dies bedeutet, dass wir diesen Codeblock jedes Mal ausführen können, wenn der Benutzer die Seite scrollt. Wenn der Code ausgeführt wird, gibt es zwei Möglichkeiten:
1. Wenn das Fenster über die Navigationsleiste gescrollt hat, machen wir es zu einem festen CSS (dies ist der "klebrige" Teil).
2. Wenn der obere Rand des Fensters höher als die ursprüngliche Position der Navigationsleiste ist (dh der Benutzer hat wieder nach oben gescrollt), setzen wir ihn wieder auf die statische Standardposition.

Es gibt zwei Punkte, auf die ich Sie aufmerksam machen möchte:

• Der +288 ist da, um den Fehler zu beheben, eine falsche Position zu bekommen. Ohne sie löst der Balken zu früh seinen klebrigen Zustand aus - entfernen Sie ihn, um zu sehen, was ich meine. Dies ist nicht in allen Themen erforderlich, und Sie können wahrscheinlich eine bessere Lösung finden.
• Bearbeiten Sie die zu lesende Datei style.css in Zeile 550, um das Problem zu beheben, dass die Navigationsleiste die Breite ändert, wenn sie in den Status "Sticky" wechselt 1000px anstatt 100%

Das war's, Ihre Navigationsleiste sollte jetzt schön klebrig sein.

Zusammenfassung:

Der volle Ersatz header.php Code für dieses Tutorial finden Sie unter dieser Pastebin; und der Ersatz style.cssHier. Ich habe gehofft, dass Ihnen dieses kleine Tutorial gefallen hat. Wenn Sie Probleme haben, posten Sie dies in den Kommentaren. Denken Sie jedoch daran, Ihre Website öffentlich zugänglich zu machen, damit ich selbst nachsehen kann. Wenn Sie neu hier sind, schauen Sie sich unbedingt alle anderen an Blogger- und Webentwicklungsartikel.