Beim Erstellen einer einfachen Webseite kann es oft sinnvoll sein, den Inhalt in ein einzelnes Layout anstatt in mehrere Seiten zu integrieren. Diese einseitigen Websites sind von Vorteil, wenn Sie ein kleines Projekt oder Portfolio haben, für das Online-Präsenz erforderlich ist. Wenn Sie Inhalte in übersichtliche Abschnitte unterteilen, verwenden Besucher möglicherweise eine kleine Navigation, um schnell auf der Seite vorzustoßen.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie mit jQuery eine benutzerdefinierte Navigationsnavigation erstellen können. Es gibt viele alternative Plugins, die diese Funktionen bereitstellen und zudem Zeit sparen. Ich möchte jedoch zeigen, wie wir diesen Effekt nur mit jQuery und dem scrollTo-Plugin für eine optimierte Leistung erzielen können. Schauen Sie sich meine Live-Beispiel-Demo an, um einen Blick auf das zu werfen, was wir machen werden.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst habe ich eine lokale Kopie von jQuery heruntergeladen, um die anderen Skriptdateien beizubehalten. Außerdem benötigen wir eine Kopie des Plugins jQuery.scrollTo, bei dem es sich um eine einzelne .js-Datei handelt. Ich habe zwei alternative Dateien erstellt index.html und styles.css für die Seitenstruktur. Wir können die Hauptinhalte zuerst aufschlüsseln.
Der Inhalt der Überschriften sollte unkompliziert sein. Die Indexdatei verwendet einen HTML5-Doctype zusammen mit dem Stylesheet und den beiden heruntergeladenen JS-Dateien. Natürlich gibt es Alternativen zum Anpassen des Bildlaufeffekts. In dieser Situation ist es jedoch viel einfacher, ein Plugin zu implementieren. In der HTML-Seite können wir sehen, wie die Navigation eingerichtet wird.
Die gesamte Seite ist in einem Wrapper mit der ID enthalten #w. Ein anderes div #Inhalt markiert den inneren Inhalt der Seite. Diese feste Navigation ist im Seiteninhalt meiner Demo enthalten, aber Sie könnten diese theoretisch an eine andere Stelle verschieben, die gut passt. Da das Problem behoben ist, können Sie das Menü immer mit dem Benutzer scrollen, unabhängig von der Platzierung.
Der Kontainer #stickynav wird verwendet, um alle internen Elemente über dem Seiteninhalt zu behalten. Ich verwende die CSS-Eigenschaft z-index zusammen mit internen Floats für alle Listenelemente. Beachten Sie, dass die HREF-Werte alle auf ein Hash-Zeichen zeigen, das sich an einer anderen Stelle auf der Seite befindet. Wir können diesen Wert verwenden, um zu bestimmen, wohin unser Schieberegler gehen soll.
Interner Inhalt
Nach dem Schließen des Navigationsblocks finden wir eine kleine Anzahl von Inhaltsbereichen. Der Abstand zwischen den Inhalten ist sehr groß, nur um zu sehen, wie sich das auf einer typischen Webseite verhält. Jeder Blockcontainer verwendet HTML5
Element zusammen mit einem Klassennamen .Sektion.
Die Klasse wird für doppelte Stile verwendet, die in jedem Inhaltsbereich gefunden werden. Beim Kopieren mehrerer Eigenschaften für jedes Element wird Platz im Stylesheet gespart. Durch das Targeting der Abschnitts-ID können wir eindeutige Hintergründe, Textfarben, Box-Schatten und andere ähnliche Effekte anwenden.
Diese Methode kann beliebig viele interne Inhaltsabschnitte enthalten. Das Navigationsmenü kann jedoch zu breit werden. In diesem Fall kann es auch als feste Navigationsleiste ganz oben platziert werden. Ich habe es im content div beibehalten, damit wir sehen können, wie die Lösung um eine Seitenvorlage herum aufgebaut wird. Lassen Sie uns näher in die CSS-Stile einsteigen.
CSS-Seitendesign
Ich wollte unbedingt zwischen der oberen Leiste und dieser festen Sticky Navigation unterscheiden. Wir hätten die oberste braune Navbar reparieren können, die auch einen Link enthält, aber dies kann einen kleinen Teil des Layouts auffressen. Stattdessen habe ich eine neue ungeordnete Liste erstellt und jeden Link so gestaltet, dass er nebeneinander schwebt, wodurch das Menü enger und kompakter wird.
Blick auf den Container #stickynav Sie werden feststellen, dass sich dies auf die gesamte Seitenbreite erstreckt. Wenn Sie einen transparenten Hintergrund verwenden, ist dies sicherlich nicht wahrnehmbar. Beachten Sie jedoch, dass Sie die Navigation noch erweitern können, um den äußeren Seitenumbruch zu füllen.
Ein weiterer interessanter Teil meines Stylesheets enthält die Formulareingaben und Seitencontainer. Diese Regeln befinden sich alle zusammen mit Typografie-Updates am Ende der Datei. Beachten Sie, wie jeder Kopf auf der Seite zentriert ist, um Platz für diese Navigationselemente zur Verfügung zu stellen. Es ist nicht schwierig, diese Header auf der rechten Seite neu auszurichten, sodass noch mehr Platz für Navigationslinks vorhanden ist.
Ich kann das Kontaktformular nicht überall einreichen, aber ich wollte, dass es ein paar anständige benutzerdefinierte Stile hat. Sicher nichts Besonderes, aber es setzt die Standardschriftarten und -farben zurück. Wenn Sie den zentralen Inhaltsbereich erweitern möchten, können Sie die width: 750px -Eigenschaft an der äußeren Hülle anzeigen. Nichts Ungewöhnliches, aber es ist gut, diese Grundstile zu verstehen.
Reibungsloses Scrollen mit jQuery
Nun ist dieser letzte Codeblock ziemlich einfach, auch wenn Sie Scripting kaum verstehen. Ich habe vor dem Schließen ein neues Tag hinzugefügt welche Ziele sind die festen Ankerankern. Wenn ein Benutzer klickt, ziehen wir den Hashwert heraus und blättern sofort zu diesem Seitenbereich.
Die jQuery .click () -Methode enthält einen Parameter für den Ereignishandler. Mit diesem Parameter wird das Standardverhalten abgebrochen, damit der Browser nicht auf der Seite nach unten springt. Dann wird jQuery scrollTo ausgeführt, wobei auf den aktuellen Linkwert this.hash abgezielt wird.
Der Effekt ist einfach und dennoch praktisch, da Sie das Seitenkonzept sehr schnell implementieren können. Ich bin mir sicher, dass es andere ähnliche Plugins gibt, die mit jQuery scrollTo verwandt sind, und wenn Sie Zeit haben, kann es Spaß machen, Alternativen zu suchen.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Einfachere Websites erfordern kein kompliziertes Menüsystem. Die Verwendung solcher Techniken kann bei der Organisation von Inhalten hilfreich sein. Ich hoffe, dieses Tutorial kann Entwicklern, die ein einfaches Webseiten-Layout erstellen, etwas Gutes tun. jQuery ist sehr erweiterbar und es ist einfach, diese Codebase zu Ihrem eigenen jQuery-Plugin zu erweitern. Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen und zu sehen, ob Sie diesen Effekt in zukünftige Projekte integrieren können.