So erstellen Sie Ihre eigene klebrige Kopfleiste wie MakeUseOf

Vor etwa einem Monat haben wir ein neues Oberflächenelement für MakeUseOf eingeführt - eine schwebende Navigations- und Suchleiste. Das Feedback, das wir bekommen haben, ist fast durchweg positiv, der interne Suchverkehr hat enorm zugenommen und einige Leser haben gefragt, wie man eine Website für ihre eigene Website erstellen kann.

Wir werden jQuery verwenden, um die Leiste an den oberen Rand des Bildschirms zu kleben - allerdings erst ab 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, die Sie ausreichend verstehen, wie man es ändert.

Das HTML

Öffnen Sie zunächst die Themes header.php und identifizieren Sie die Navigationsleiste, die wir verkleben möchten. Wie ich sagte, ist der Code unten für die Standardeinstellung von elfundzwanzig; Ihre können variieren.

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

Lassen Sie uns auch die Standardsuchleiste hier verschieben. Sie werden feststellen, dass sie standardmäßig rechts oben im Design hinzugefügt wird. finde die Linie 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 tatsächlich nicht in der Navigationsleiste angezeigt. Es wird immer noch oben rechts angezeigt. Das liegt daran, dass es absolut mit CSS positioniert wurde, und wir werden das alles in einer Sekunde löschen.

Das CSS

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

 #branding #searchform …

Ersetzen Sie das, was sich darin befindet (sollte etwa vier Zeilen enthalten, einschließlich einiger absoluter Positionierung) durch Folgendes:

 #branding #searchform float: left; Hintergrund: weiß; Marge: 7px; 

Fühlen Sie sich frei, um die Farbe oder den Rand anzupassen. Wechseln Sie den Schwimmer, wenn Sie ihn lieber rechts von der Leiste sehen möchten. In diesem Thema wird die Suche so eingestellt, dass sie erweitert wird, wenn der Benutzer darin klickt. Das ist nicht in diesem Tutorial, aber Sie können einen ähnlichen Effekt in unserer MakeUseOf-Suche feststellen.

jQuery

Wenn Sie sich fragen, warum wir jQuery dazu verwenden, ist es einfach: CSS ist fest eingestellt und kann nicht dynamisch angepasst werden. Wir könnten zwar CSS verwenden, um einen Sticky-Header zu erstellen, es müsste jedoch das oberste Element auf der Seite sein. Das Problem, das wir haben, ist, dass unser Menü nicht das oberste Element ist, also können wir nicht damit anfangen, dass es klebrig ist. Hier wird die jQuery verwendet. wir können überprüfen, wann der Benutzer einen bestimmten Punkt passiert. dann und nur dann machen es klebrig.

Beginnen Sie mit dem Hinzufügen von jQuery zu Ihrem Design. Dein Theme hat es vielleicht schon geladen; wenn nicht, keine sorgen. Sie können es entweder in die Warteschlange einreihen, indem Sie folgenden Code zu Ihrer functions.php hinzufügen:

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

Wenn Sie die erste Methode verwenden, wird sie geladen kein Konflikt Modus, was bedeutet, dass Sie verwenden müssen “jQuery” in Ihrem Code, um auf die jQuery-Funktionen zuzugreifen. Wenn Sie die zweite Methode verwenden, um sie direkt Ihrem Header hinzuzufügen, können Sie den standardmäßigen jQuery-Accessor von verwenden $. Ich gehe von der zweiten Methode im folgenden Code aus.

Um einen tatsächlichen jQuery-Code hinzuzufügen, platzieren Sie den folgenden Code am Ende Ihres Codes header.php - Ich habe meine kurz vor die gestellt