Ein sehr verbreiteter Trend ist heutzutage die Verwendung einer festen Navigation, die schrumpft und weniger aufdringlich wird, wenn der Benutzer auf der Seite nach unten blättert. In diesem Tutorial werde ich Ihnen zeigen, wie Sie dies mit der ZURBs Foundation Top Bar, einigen benutzerdefinierten sass und jQuery, erreichen können. Um das Ganze abzurunden, fügen wir einige Medienabfragen hinzu, um unser Menü ansprechbar zu machen. Lass uns anfangen!

Bedarf

Sie benötigen ein paar Dinge, um dieses Tutorial in den Griff zu bekommen:

• Grundverständnis der Foundation Topbar
• Grundverständnis von Foundation und The Grid System
• Kenntnisse in der Arbeit mit Sass und Compass
• Ein wenig Erfahrung in der Verwendung von jQuery für die Behandlung von Ereignissen
  

Fertig machen

Zunächst werden wir unsere Arbeitsumgebung einrichten. Wenn Sie nicht wissen, wie dies mit Compass und Sass geschieht, lesen Sie den Abschnitt "Erste Schritte" im Abschnitt "Erstellen einer oberen Leiste außerhalb der Canvas-Navigation mit Foundation 5".

Erstellen Sie Ihr neues Foundation-Projekt und verwenden Sie es Kompassuhr um Ihr Projekt zu kompilieren. Wir schaffen unsere eigenen style.scss im scss-Ordner für unsere Anpassungen und allgemeines Styling. Mit diesem Setup tauchen wir in die allgemeine HTML-Struktur ein, los geht's!

Einrichten der HTML-Struktur

Schritt 1: Allgemeine Markup

Nachdem Sie ein neues Foundation-Projekt gestartet haben, gehen Sie zur index.html Datei und fangen Sie damit an, den gesamten Inhalt zwischen den body-Tags zu entfernen, mit Ausnahme der Skripts direkt vor dem schließenden body-Tag. Fügen Sie dann die folgende Zeile zu Ihrem hinzu , unsere importieren style.css.

Als Nächstes fügen wir einige Markierungen hinzu, wie die Kopfzeile, einen Hauptabschnitt und die Fußzeile. Außerdem fügen wir Dummy-Inhalte hinzu, um unsere Seite etwas zu füllen.

 
    
  
  
 
 
 
Ausgezeichnete Foundation Top Bar
 
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Fugiat, explicabo architecto bei praesentium modi soluta alias veniam voluptate magca obcaecati facilitiesis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam vermutung numquam doloribus libero tempora sed ani. Dies ist die beste Lösung für diese Erkrankung, aber es ist nicht wichtig, ob es sich dabei um ein Problem handelt. Officiis, Ducimus, voluptate doloremque nihil rerum folluntur obcaecati fugiat quitem qui nulla differentio labores quasi temporia evena tempore aliquam pariatur aliquam pariquam quarzdam aspernatur quis maiores minus quas culpa reprehenderit idiure opti Ausnahmen, Deleniti, Expedita Quod animi harum ist ein besonderes Mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Diese Option ist nicht erforderlich, diese Option zu aktualisieren oder zu aktualisieren, wenn Sie sich in der Nähe befinden, wenn Sie sich in der Nähe dieser Einstellung befinden, wenn Sie sich vor dem Ziel entscheiden, sich vor dem Ziel zu verlassen, wenn Sie sich vor dem Ziel befinden, diese Option zur Verfügung stehen oder wenn Sie sich vor einem bestimmten Datum befinden optio similique iure.
 
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Fugiat, explicabo architecto bei praesentium modi soluta alias veniam voluptate magca obcaecati facilitiesis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam vermutung numquam doloribus libero tempora sed ani. Dies ist die beste Lösung für diese Erkrankung, aber es ist nicht wichtig, ob es sich dabei um ein Problem handelt. Officiis, Ducimus, voluptate doloremque nihil rerum folluntur obcaecati fugiat quitem qui nulla differentio labores quasi temporia evena tempore aliquam pariatur aliquam pariquam quarzdam aspernatur quis maiores minus quas culpa reprehenderit idiure opti Ausnahmen, Deleniti, Expedita Quod animi harum ist ein besonderes Mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Diese Option ist nicht erforderlich, diese Option zu aktualisieren oder zu aktualisieren, wenn Sie sich in der Nähe befinden, wenn Sie sich in der Nähe dieser Einstellung befinden, wenn Sie sich vor dem Ziel entscheiden, sich vor dem Ziel zu verlassen, wenn Sie sich vor dem Ziel befinden, diese Option zur Verfügung stehen oder wenn Sie sich vor einem bestimmten Datum befinden optio similique iure.
 
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Fugiat, explicabo architecto bei praesentium modi soluta alias veniam voluptate magca obcaecati facilitiesis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam vermutung numquam doloribus libero tempora sed ani. Dies ist die beste Lösung für diese Erkrankung, aber es ist nicht wichtig, ob es sich dabei um ein Problem handelt. Officiis, Ducimus, voluptate doloremque nihil rerum folluntur obcaecati fugiat quitem qui nulla differentio labores quasi temporia evena tempore aliquam pariatur aliquam pariquam quarzdam aspernatur quis maiores minus quas culpa reprehenderit idiure opti Ausnahmen, Deleniti, Expedita Quod animi harum ist ein besonderes Mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Diese Option ist nicht erforderlich, diese Option zu aktualisieren oder zu aktualisieren, wenn Sie sich in der Nähe befinden, wenn Sie sich in der Nähe dieser Einstellung befinden, wenn Sie sich vor dem Ziel entscheiden, sich vor dem Ziel zu verlassen, wenn Sie sich vor dem Ziel befinden, diese Option zur Verfügung stehen oder wenn Sie sich vor einem bestimmten Datum befinden optio similique iure.
 
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Fugiat, explicabo architecto bei praesentium modi soluta alias veniam voluptate magca obcaecati facilitiesis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam vermutung numquam doloribus libero tempora sed ani. Dies ist die beste Lösung für diese Erkrankung, aber es ist nicht wichtig, ob es sich dabei um ein Problem handelt. Officiis, Ducimus, voluptate doloremque nihil rerum folluntur obcaecati fugiat quitem qui nulla differentio labores quasi temporia evena tempore aliquam pariatur aliquam pariquam quarzdam aspernatur quis maiores minus quas culpa reprehenderit idiure opti Ausnahmen, Deleniti, Expedita Quod animi harum ist ein besonderes Mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Diese Option ist nicht erforderlich, diese Option zu aktualisieren oder zu aktualisieren, wenn Sie sich in der Nähe befinden, wenn Sie sich in der Nähe dieser Einstellung befinden, wenn Sie sich vor dem Ziel entscheiden, sich vor dem Ziel zu verlassen, wenn Sie sich vor dem Ziel befinden, diese Option zur Verfügung stehen oder wenn Sie sich vor einem bestimmten Datum befinden optio similique iure.
 
 
 
   
 
 
 
© Copyright 2014
 
 
 
 

Hier haben wir eine Kopfzeile erstellt, einschließlich der