Nach langer Zeit haben wir nun auch wieder ein kleines Tutorial zur Erstellung einer Webseite.
Dabei möchten wir heute eine Navigation anlegen, die Inhalte mit einem Klick anzeigt, ohne die Webseite neuzuladen.
Wichtig! Diese Vorgehensweise einer Navigation und der Darstellung von Inhalt ist sehr schlecht für Suchmaschinen. Suchmaschinen wie Google, Yahoo! oder Bing indexieren die Seite indem sie Links folgen die sie auf der Seite finden. Da unsere Links aber keine „echten“ Links sind, d. h. nirgendwo hinführen sondern nur den Inhalt austauschen und somit auf JavaScript basieren, werden Suchmaschinen diesen Links nicht folgen. JavaScript wird von den Suchmaschinen nämlich nicht ausgeführt.
Ich habe das Tutorial in zwei Teile geteilt, Teil 1: Erstellen des Grundgerüstes; Teil 2: Programmieren der Logik.
Teil 1: Grundgerüst
Zuerst bauen wir uns eine kleine Navigation und eine Box für den Inhalt.
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Navigation mit JavaScript</title>
<style type="text/css">
.main{
width: 800px;
background-color: #ecf0f1;
margin: 0 auto;
padding: 5px;
}
nav{
background-color: #27ae60;
}
.fn-nav li {
display: inline;
padding: 3px;
margin-left: 5px;
}
.fn-nav li:hover {
background-color: #2ecc71;
}
.fn-nav li a:hover {
text-decoration: none;
}
.fn-nav li a{
text-decoration: none;
color: #34495e;
}
.content {
border-top: 1px dashed #95a5a6;
padding: 5px;
}
</style>
</head>
<body>
<div class="main">
<nav>
<ul class="fn-nav">
<li><a data-site="home" href="#">Home</a></li>
<li><a data-site="termine" href="#">Termine</a></li>
<li><a data-site="infos" href="#">Informationen</a></li>
</ul>
</nav>
<div class="content">
<!-- Hier wird später der Inhalt stehen -->
INHALT
</div>
</div>
<!-- Hier kommt JavaScript hin. -->
</body>
</html>
Die Navigation besteht hierbei aus einer ungeordneten Liste mit unendlich vielen <li></li>-Elementen, die jeweils einen Link enthalten. Damit die Listenpunkte nicht untereinander sind, verwenden wir die CSS-Eigenschaft display: inline; welche die Punkte horizontal anordnet.
Um einen schönen Zoom-Effekt zu haben, wenn man über die Links geht, legen wir einen :hover Status im CSS an, der die Farbe leicht verändert und den Link vergrößert.
Außerdem entfernen wir noch die hässliche blaue Standardfarbe der Links und deren Unterstreichung mit text-decoration: none; und color: #34495e;. Der Box für den Inhalt (.content) geben wir einen gestrichelten, obereren Rand sodass es wie eine Grenze aussieht, die Navigation und Inhalt trennt.
Um allem noch den letzten Schliff zu geben, setzen wir überall noch passende Abstände und Hintergrundfarben.
Teil 1,5: Übergang
Wer sich den Code genau angeschaut hat, dem wird bei den Links vermutlich das seltsame Attribut aufgefallen seien.
<a data-site="home" href="#">Home</a>
HTML5 erlaubt es uns eigene Attribute anzulegen, die wir ganz einfach mit jQuery auslesen können.
Einzige Vorraussetzung ist, das diese Attribute mit data-* beginnen.
Wir werden dieses Attribut data-site benutzen um die Links mit .html-Dateien zu verknüpfen, die dann später in die Box geladen werden. Das heißt, in diesem Attribut steht der Name der .html-Datei die geladen wird.
Beispiel:
Code: <a data-site="home" href="#">Home</a>
Geladene .html-Datei: home.html
Um im Logikteil jQuery benutzen zu können, müssen wir diese Bibliothek aber noch einbinden.
Dazu fügen wir unterdem Kommentar <!– Hier kommt JavaScript hin. –> folgende Zeile ein:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Diese lädt jQuery vom offiziellen Server sodass wir es einfach benutzen können.
Teil 2: Logik
Unser Ziel ist es, bei einem Klick auf einen Link herauszufinden welche Datei damit verknüpft ist und diese laden und dann in der Box anzeigen.
Wir haben also folgende Aufgaben:
- Klick auf Link feststellen.
- Namen der verknüpften Datei herausfinden.
- Die Datei laden.
- Den Inhalt der Box mit dem Inhalt der geladenen Datei ersetzen.
Um dies alles zu verwirklichen brauchen wir folgenden Code. Diese muss einfach nach dem <script... Tag eingefügt werden. Ich habe jede Anweisung im Code kommentiert sodass dieser auch für Anfänger zu verstehen ist.
<script type="text/javascript">
// Erst starten wenn das Dokument fertig geladen ist.
$(document).ready(function(){
// Beim ersten Laden muss eine Seite geladen werden.
$(".content").load("home.html");
// WENN auf einen Link innerhalb von .fn-nav geklickt wurde, DANN führe diese Funktion aus.
$('.fn-nav a').click(function(e){
// Verhindert, dass der Browser die Seite beim Klick auf einen Link neulädt.
e.preventDefault();
// Speichert den Inhalt des Attributes in der Variablen site.
var site = $(this).data('site');
// .html an den Namen anhängen.
site = site + '.html';
// Seite laden und in .content einsetzen.
$(".content").load(site);
});
});
</script>
Achtung! Wenn man dieses Beispiel lokal, auf dem eigenen Rechner mit Google Chrome ausprobiert, so wird es NICHT funktionieren. Das liegt daran das Google Chrome das indirekte Nachladen von lokalen Dateien nicht erlaubt. Zum Testen empfehle ich daher Mozilla Firefox. Wenn das ganze auf einem Server läuft, funktioniert es selbstverständlich auch in Chrome.
Nun sollte alles funktionieren. Ich hoffe ich konnte beim Erstellen einer Navigation helfen. Bei Fragen oder Problemen stehe ich gerne via Kommentar unten zur Verfügung.
Wer nicht selber tippen möchte, kann sich alles einfach oben herunterladen. Oder auch erst die Demo ausprobieren.
