Sehr oft auf Websites mit Große anzahl Bei Inhalten verliert sich der Besucher auf der Seite und um das Navigationsmenü zu finden, muss er ganz nach oben auf der Seite scrollen. Technologien stehen nicht still, Monitorbildschirme und ihre Auflösungen werden immer größer, sodass es auf einer Website jetzt nicht mehr schade ist, beim Scrollen einer Website-Seite 40 Pixel oben für ein festes Menü zuzuweisen. Der Besucher kann jederzeit sehen, in welchem Bereich er sich befindet, und hat schnellen Zugriff auf das Navigationsmenü. Letztendlich erhöht dies die Tiefe des Surfens auf der Website :)
Was ist das Wesentliche an einem festen Navigationsmenü auf einer Website? Unser Menü befindet sich zunächst an seinem gewohnten Platz, irgendwo in der Kopfzeile, in meinem Fall im Abstand von 140px vom oberen Rand. Sobald der Besucher die Seite um dieselben 140 Pixel nach unten scrollt, wird das Menü ganz oben im Fenster fixiert und bleibt dort für den Rest der Zeit, bis der Scroll wieder an die obere Position zurückkehrt.
Ein festes Menü beim Scrollen einer Seite ist im Wesentlichen ein Bedienfeld, das Sie immer dabei haben. Unsere Speisekarte wird einfach sein.
Von der Theorie zur Praxis. Alles ist recht einfach und minimalistisch, die meisten davon sind Stilen gewidmet, die Sie selbst anpassen können. Ich habe ein festes Menü wie im Bild erstellt; beim Scrollen wird die Farbe des Menüs leicht transparent, sodass es nicht schwer wirkt und der Inhalt darunter sichtbar ist.
Unsere Stile. Ich habe ein Menü mit einer Breite von 1180 Pixeln, das sich in der Mitte befindet. Der Header ist 180 Pixel hoch, das Scrollmenü ist darin enthalten und nimmt 40 Pixel ein. Damit ist der Abstand von oben gemeint 140px. Erinnern wir uns an diese Nummer)
#header ( Höhe: 180px; ) #navigation( Hintergrund: #EF0505; Höhe: 40px; Box-Shadow: 0 2px 2px rgba(0, 0, 0, 0.4); Schriftgröße: 16px; Zeilenhöhe: 40px; Position: relativ; oben: 140 Pixel; -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; ) #menu a ( color: #fff; Textdekoration: keine; Schriftfamilie: Verdana; ) #menu>li a:hover( Farbe: #656565; Übergang: Farbe 0,5 Sekunden; )
Und hier sind die wenigen Codezeilen, die den Zauber bewirken.) Wir legen die Bedingungen für das Scrollen der Seite fest, über 140 Pixel oder darunter. Abhängig davon wird die feste Klasse unserem Navigationsmenü zugeordnet. Und mit dieser Klasse machen wir, wie oben erwähnt, das Menü fest und fixieren es oben.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()
Bitte beachten Sie, dass einfache Anführungszeichen im in echo „“ eingeschlossenen Code mit Escapezeichen versehen werden müssen, d. h. Setzen Sie vor jedem einen Backslash (\"), natürlich ohne Klammern.
Im Allgemeinen ist es so gekommen, wie es gekommen ist. Wie Sie dies konkret mit Ihrem Thema verbinden, müssen Sie selbst entscheiden – wenn Sie Zeit haben, macht es sogar Spaß, sich „den Kopf zu zerbrechen“. Danke.
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
WebPoint PRO ist ein responsives WordPress-Theme mit umfangreicher Funktionalität und kompetenter technischer Suchmaschinenoptimierung 
Share42 – ein Skript zum Hinzufügen von Schaltflächen und Lesezeichen für soziale Netzwerke zur Website (es gibt eine schwebende Panel-Option)
Die immer häufiger auf den Seiten von Blogs und anderen Ressourcen zu finden sind. Der Einsatz solcher Navigationsleisten ist durchaus berechtigt. Einer der Hauptgründe für die aktive Nutzung dieser jQuery-Plugins besteht darin, dass das Menü für den Besucher immer griffbereit ist, auch wenn es sich am Ende der Seite befindet. Darüber hinaus nimmt ein festes Menü wenig Platz ein und lenkt nicht vom Hauptinhalt ab. Im Allgemeinen verbessert ein festes Menü die Benutzerfreundlichkeit der Website.
Ich habe eine Sammlung der meiner Meinung nach besten kostenlosen jQuery-Plugins zur Implementierung eines festen Menüs zusammengestellt. Ich habe versucht sicherzustellen, dass jedes der Plugins in irgendeiner Weise einzigartig ist, sodass jedes Plugin aus der Auswahl gezielt in Ihrem Projekt verwendet werden kann. In der Sammlung finden Sie sowohl einfache als auch komplexere Plugins mit Animation usw.
Wenn Sie ein sehr einfaches festes Menü benötigen, etwa wie wir ein Sticky-Panel mit Social-Buttons implementiert haben, können Sie auf jQuery-Plugins verzichten, da das Laden der Seite mit Skripten nicht sehr gut ist, aber wir werden in den folgenden Artikeln darüber sprechen. Abonnieren Sie unseren Kanal oder unsere Seiten, um keine interessanten Materialien zu verpassen.
Also. Hier sind 6 jQuery-Plugins zum Erstellen eines festen Menüs.
