Tutorial Hintergrundbild Navigation mit jQuery

Skripte von: tympanus.net

Tutorial vom 22.09.2015

Dieses Tutorial ist nur für fortgeschrittene Benutzer zu empfehlen.

Bitte ladet Euch am Download-Button von tympanus.net die Beispiele mit den Skripten herunter.

Entpackt die ZIP Datei. Ihr erhaltet einige HTML-Seiten als Beispiele, die Ihr alle mal starten solltet, sowie die Verzeichnisse:

  • css
  • images
  • js

Ich beschreibe hier den Einbau in NOF 2015 (Update 1), hier publiziert “Nach Site-Struktur”, von dem Beispiel der Datei “example5.html”.

Für dieses Beispiel benötigt Ihr im

  • Verzeichnis css - die Datei sbimenu.css
     
  • Verzeichnis images - Eure Bilder - bitte erstellt Eure Bilder - hier 3 Bilder (1.jpg, 2.jpg und 3.jpg), zunächst in genau den Abmaßen der Beispielbilder.  Ihr könnt Eure Bilder nach dem Test auch in jeder anderen Größe erstellen, wie z.B. auch Panorama-Bilder. Es müssen nur alle Bilder gleich groß sein.
    • sowie das eigene Startbild “default.jpg” und das Bild “pattern.png” für den Hintergrund der Navi, sowie den Pfeil “triangle.png” für die Navi.
       
  • Verzeichnis js - die Dateien:
    • jquery-1.6.1.min.js (ich habe hier auf diese Datei extern nach “googleapis” verlinkt)
    • jquery.bgImageMenu.js
    • jquery.easing.1.3.js

Kopiert diese 3 Verzeichnisse in das Verzeichnis, in dem auch die Seite liegt, auf der Ihr diese Bild-Navigation einbauen wollt. Hier ist das meine Startseite. Ich habe also diese Verzeichnisse, mit den relevanten Dateien in mein Stammverzeichnis lokal und mit dem FTP-Programm entfernt auf den Server kopiert.

Öffnet die Beispielseite (hier example5.html) mit einem Editor und kopiert Euch die notwendigen Skripte, wie unten gezeigt, heraus.

Fügt nun die Verlinkung zu der CSS Datei in der HTML vom Layout ein. Achtet dabei auf die korrekte, relative Pfadangabe zur CSS-Datei.

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

<link rel="stylesheet" type="text/css" href="css/sbimenu.css" />

Fügt in die HTML vom Layout am “Ende des Haupttextes” (body) ebenfalls die Verlinkungen zu den jQuery-Dateien und das Skript selbst ein. Guckt Euch die möglichen Parameter für die unterschiedlichen Animationen in der JavaScript-Funktion unten auf der Seite von tympanus.net an.

Weiter unten zeige ich die JavaScrip-Funktion, bei der ich lediglich die Parameter der Animation für mein Beispiel 2 etwas geändert habe.

Achtung: hier habe ich die Verlinkung von NOF zur Datei “navbars.js” erneut eingefügt, da sich diese jQuery-Datei von NOF nicht vor den jQuery-Dateien vom Skript befinden darf, da sonst die NOF-Navigation nicht mehr angezeigt werden würde.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>

<script type="text/javascript">
    $(function() {
        $('#sbi_container').bgImageMenu({
            defaultBg: 'images/default.jpg',
            border: 1,
            type: {
                mode: 'seqHorizontalSlide',
                speed: 250,
                easing: 'jswing',
                seqfactor: 100
            }
        });
    });
</script>

<script type="text/javascript" src="./navbars.js"></script>

 

JavaScript-Funktion für mein Beispiel 2 auf einer Unterseite. Achtet hier auch auf die geänderten, relativen Pfadangaben zum Stammverzeichnis ../

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.bgImageMenu.js"></script>

<script type="text/javascript">
    $(function() {
        $('#sbi_container').bgImageMenu({
            defaultBg: '../images/default.jpg',
            menuSpeed: 300,
            type: {
                mode: 'verticalSlide',
                speed: 800,
                easing: 'jswing',
                seqfactor: 500
            }
        });
    });
</script>

<script type="text/javascript" src="../navbars.js"></script>

Zieht Euch nun ein Textfeld, an der Stelle wo das Skript erscheinen soll, auf Eurer Seite für die Anzeige des Skriptes auf und fügt den Code unten in den HTML-Code Editor des Textfeldes ein.

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

Ändert die Labels und die <li> Tags mit den Links, anstelle des # Zeichens, nach Euren Bedürfnissen in relative oder absolute Links ab. Die Label-Buttons habe ich hier nicht verlinkt, auch an diesem # Zeichen (Link zur Seite nach oben) könnt Ihr natürlich einen Link zu einer anderen Seite einsetzen.

        <div class="content">
            <div id="sbi_container" class="sbi_container">

                <div class="sbi_panel" data-bg="images/1.jpg">
                    <a href="#" class="sbi_label">Unter Wasser</a>
                    <div class="sbi_content">
                        <ul>
                            <li><a href="./Tutorial/tutorial.html">Zu meinem Tutorial</a></li>
                            <li><a href="http://www.nof-schule.de/forum/" target="_blank">Fragen im Forum bitte</a></li>
                            <li><a href="#">Subitem</a></li>

                        </ul>
                    </div>
                </div>

                <div class="sbi_panel" data-bg="images/2.jpg">
                    <a href="#" class="sbi_label">Fisch</a>
                    <div class="sbi_content">
                        <ul>
                            <li><a href="./Tutorial/tutorial.html">Zu meinem Tutorial</a></li>
                            <li><a href="#">Subitem</a></li>
                            <li><a href="#">Subitem</a></li>

                        </ul>
                    </div>
                </div>

                <div class="sbi_panel" data-bg="images/3.jpg">
                    <a href="#" class="sbi_label">Qualle</a>
                    <div class="sbi_content">
                        <ul>
                            <li><a href="./Tutorial/tutorial.html">Zu meinem Tutorial</a></li>
                            <li><a href="#">Subitem</a></li>
                            <li><a href="#">Subitem</a></li>

                        </ul>
                    </div>
                </div>

            </div>
        </div>

... natürlich könnt Ihr oben noch weitere Links und auch weitere Panel-Segmente hinzufügen - also von <div> bis </div>, so wie ich in meinem Beispiel 2 ein 4. Bild hinzugefügt habe. Die Breite der Panel-Segmente wird automatisch von der jQuery-Datei angepasst.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik