Navigation

Die Navigtion ist eines der zentralen Elemente, wenn man sich die Struktur einer Internetseite ansieht. Häufig ist es sogar so, dass das Programmieren der Navigation und das Arbeiten an einer guten Struktur bei den Links, die in der Navigation angezeigt werden, mehr Zeit benötigt, als das Programmieren großer anderer Teile der Internetseite.
Im nun folgenden Beispiel kannst du sehen, wie die Navigationsleiste aufgebaut ist. Anders als der Rest des Frameworks benötigt sie, um auch auf kleineren Geräten (Handy, etc.) zu funktionieren ein wenig Javascript. Im Zusammenspiel von Javascript und CSS lassen sich nämlich wunderbar einfach Inhalte anzeigen und verstecken.
Probiere es einfach aus, indem du dein Browserfenster größer und kleiner machst. Wenn dein Browser eine bestimmte Größe erreicht hat, wird sich die Navigation verändern.

Um die Navigation zu nutzen, schreibst du den Code, den du unter HTML findest in deiner HTML-Datei an die Stelle, an der du die Navigationsleiste haben willst. Anschließend machst du eine Javascript-Datei. Javascript-Dateien erkennst du an der Endung .js, die du in dem Codeeditor deiner Wahl sicher finden wirst.
In diese Datei fügst du nun den Code ein, den du im Beispiel im Tab JS findest. Anschließend verlinkst du deine Javascript- und deine HTML-Datei, indem du am Ende deiner HTML-Datei den folgenden Code schreibst:

<script src="navigation.js"></script>

In meinem Fall geht die HTML-Datei davon aus, dass sich eine Javascript-Datei mit dem Namen "navigation.js" im gleichen Ordner befindet. Solltest du den Speicherort anders gewählt haben, so musst du den angegebenen Pfad verändern.