Start

Einleitung

Hier ist ein Homepage-Template mit einer IFrame-Lösung.
Darauf aufbauend können Sie eine einfache statische Homepage aufbauen.

Das Besondere hierbei ist, dass auf der linken Seite immer der automatisch immer richtige Menüpunkt hervorgehoben wird, egal in welche Seite Sie hineinklicken.
Test 1: Kontakt

Das Ganze klappt nicht nur bei Links auf derselben Ebene, sondern auch in bei beliebig verschachtelten Ebenen. Es wird stets die richtige Struktur aufgeklappt:
Test 2: mein BMW.

Hier handelt es sich um einfache Links auf eine andere Seite. Es müssen keinerlei Javascript-Aufrufe mitgegeben werden. Als Bedingung, dass das Markieren im Menü klappt, ist: die Seite muss im Menü enthalten sein.

Aufbau

Die Hauptseite ist eine index.html, die

• einmal links ein Menü besitzt und
• im Hauptteil einen IFrame, in dem die Inhaltsseiten nachgeladen werden.
  Ein Javascript erkennt die aktuelle Seite im IFrame und markiert bei Änderung durch Setzen von CSS-Anweisungen den korrekten Menüpunkt.

Menü

Das Menü links steckt in der index.html und ist mit einer verschachtelten UL-Liste aufgebaut. Mit Javavascript wird beim Laden einer Seite das richtige Menü aufgeklappt und hervergehoben.
Das Skript wurde getestet mit Firefox, IE, Opera und Safari.
Die optische Einrückung und Hervorhebung der Menüebenen erfolgt mit CMS. Im Beispielpaket hier sind bis zu 3 Ebenen vordefiniert. In der Datei ./css/main.css können Sie die Anpassungen vornehmen.

Content

Die Inhaltsseiten sind einfachste HTML-Dokumente, die mit NVU auch von einem Laien bearbeitet werden können.
In diesem Paket liegen die Content-Dateien alle im Unterverzeichnis "pages". Dateien mit einer logischen Verschachtelung liegen ebenfalls direkt in "pages" und unterscheiden sich zur Eltern-Seite durch "_", z.B.

• Die Seite Hobbys hat den Dateinamen "./pages/hobbys.html"
  
• Die Seite Hobbys -> Autos -> BMW hat den Dateinamen "./pages/hobbys_autos_bmw.html".

Alle Content-Dateien laden die Dateien

• ./css/pages.css
  Farbdefinitionen, die nur die Inhalts-Dateien betreffen.
• ./js/globalfunctions.js
  diese sorgt für das Hervorheben des korrekten Menüpunktes und zeichnet den Footer.
  Passen Sie dort auch die Zeile
  

  var sEmail="info@example.com"; 

  an, um in der Fusszeile eine andere E-Mail einzublenden.
  
  Sie können aber natürlich auch weitere Funktionen in der globalfunctions.js ablegen.

Wenn Sie Dokumente in weiteren Unterordnern verschachteln wollen, dann passen Sie die Pfade zum CSS und zur JS-Datei im Sourcecode durch Voranstellen von "../" an.

Download

Diese Demo-Webseite hat keinerlei Grafiken und ist daher sehr klein.
Download: iframe_template.zip (10 kB)
Weitere Hinweise zur Funktionsweise des Javascripts zum Aufklappen des Menüs finden Sie unter www.axel-hahn.de