Tutorial Animated Border Menu - von tympanus.net - Funktioniert nicht in alten Browsern wie dem IE8

Demo auf: tympanus.net

am 01.09.2014

Bitte ladet Euch zunächst die Beispiel-Skripte von tympanus.net herunter und entpackt die ZIP-Datei. Ihr erhaltet ein Verzeichnis:

  • AnimatedBorderMenus

In diesem Verzeichnis findet Ihr 6 Startseiten (index) mit unterschiedlichen Beispielen. Ich habe hier, in etwas abgeänderter Form, das Beispiel 3 eingebaut. Es wird in meinem Tutorial hier also eine gewisse Kenntnis von CSS vorausgesetzt. Auf meiner Startseite habe ich einen schwarzen, deckenden Rahmen und auf dieser Seite einen blauen Rahmen mit 90% Deckkraft.

Zunächst solltet Ihr wissen, dass alle diese Beispielseiten responsiv programmiert sind und daher auch z.B. auf mobilen Geräten funktionieren. Das ist mit NOF so nicht möglich, da NOF immer feste Layout-Breiten in seiner CSS voreingestellt hat.

Ich habe hier folgende Dateien verwendet, die Ihr Euch auch hier downloaden könnt > rechte Maustaste > Seite speichern unter

Die CSS-Dateien habe ich in ein Verzeichnis

  • css

kopiert und in die JavaScript Dateien in ein Verzeichnis

  • js

Weiterhin kopiert Ihr Euch, samt Inhalt, auch das Verzeichnis

  • fonts

Diese Verzeichnisse mit den dazugehörigen Dateien kopiert Ihr dann in das Verzeichnis “Lokale Publizierung” Eures Projektes, um das schon lokal testen zu können und natürlich mit dem FTP-Programm auf den Server in das Stammverzeichnis (Root) Eures Projektes.

Zunächst setzt Ihr die Links auf Eure CSS-Dateien “Zwischen Head Tags” in die HTML Eurer Seite. Achtet dabei wie immer auf die relative Pfadangabe zu dem Verzeichnis mit den CSS-Dateien (hier im gleichen Verzeichnis). Wie Ihr erkennen könnt, habe ich für diese CSS-Dateien ein Verzeichnis ‘css’ erstellt, indem sich diese drei Dateien befinden.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />

Weiterhin fügt Ihr die Verlinkungen zu den beiden JavaScript Dateien am Ende des Body (Haupttextes) ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes

<script src="js/classie.js"></script>
   <script src="js/borderMenu.js"></script>

Dann habe ich mir zur Anzeige des “Border-Menüs” ein Textfeld an einer beliebigen Stelle meines Layouts aufgezogen und den Code unten eingefügt, der die ID und Class für das “Border-Menü” trägt. Der Code unten gehört in den HTML-Code Editor des Textfeldes.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen

<nav id="bt-menu" class="bt-menu">
   <a href="#" class="bt-menu-trigger" title="Menü"><span>Menu</span></a>
      <ul>
         <li><a href="./Tutorial/tutorial.html" class="bt-icon icon-zoom">Tutorial</a></li>
         <li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" target="_blank" class="bt-icon icon-home">Themen</a></li>
         <li><a href="http://www.nof-tutorials.com/Gastbuch-Webbausteine/" target="_blank" class="bt-icon icon-windows">Gäste</a></li>
         <li><a href="http://www.nof-forum.com/nof-anleitung/" target="_blank" class="bt-icon icon-speaker">Blog</a></li>
         <li><a href="http://www.nof-schule.de/forum/" target="_blank" class="bt-icon icon-star">Forum</a></li>
         <li><a href="https://www.facebook.com/NOF.Tutorials" target="_blank" class="bt-icon icon-facebook">Facebook</a></li>
      </ul>
</nav>

Natürlich müsst Ihr die Links entsprechend an Eure Ziele anpassen. Die Icons, die bei einer Verkleinerung dargestellt werden, werden in der Datei

  • icons.css

definiert. Sucht Euch dort die entsprechende Class, die Ihr als Icon anzeigen lassen wollt.

 

Bei verkleinertem Browser Fenster wechselt dann der Linktext in Symbole (Icons) wie im Screenshot unten als Beispiel zu sehen.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik