Weitere Informationen zum Relaunch von Rostock.de
Weitere Informationen zum Relaunch von Rostock.de Weiter zu rostock.de

Hinweis zur Bestellung
Haben Sie Fragen zur Bestellung im Online-Shop? In den "Hilfen für die Bestellung" werden Ihre Fragen beantwortet. Auch der Support hilft Ihnen gerne weiter (Kontaktformular).


Contentpapst- und CP::Shop-Referenzen

Aufklappbare Navigationsmenüs mit Javascript

Ein weiteres Beispiel für die Erstellung eines Navigationsmenüs beschäftigt sich diesmal mit einem Javascript-basierten Navigationsmenü. In diesem Navigationsmenü lassen sich mehrstufige Strukturen abbilden, wie dies in untenstehendem Bild dargestellt ist. Besonders auf Webseites mit umfangreicheren Inhalten ist eine derartige Navigation sinnvoll, um dem Besucher den schnellen Wechsel auch zwischen tief verschachtelten Seiten zu ermöglichen.

In einem ersten Schritt muss in der Hauptvorlage des genutzten Vorlagensets - der Vorlage "main.htm" - an der gewünschten Stelle folgender Quellcode für die Integration des Navigationsmenüs platziert werden:

<div class="navigation"> {cp:container module="navigation" category="0" template="{cp:path}navigation_main.html" template_subnodes="{cp:path}navigation_subnodes.html"} </div>

Dieser Quellcode sorgt dafür, dass die Navigationspunkte unterhalb der Ebene "0" (d.h. die Hauptnavigationspunkte) über die Vorlage "navigation_main.html" bzw. die Vorlage "navigation_subnodes.html" dargestellt werden. Letztere Vorlage kommt dabei immer dann anstelle der Vorlage "navigation_main.html" zum Einsatz, wenn für einen Hauptnavigationspunkt weitere Unterpunkte vorhanden sind. Alle Vorlagen der Navigation werden immer im Vorlagenset platziert.

Die Vorlage "navigation_main.html" stellt einen einzelnen Navigationspunkt dar, allerdings ohne den Aufruf weiterer Unterpunkte:

<a class="navigation_main" href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a><br />

Im Gegensatz dazu beinhaltet "navigation_subnodes.html" den Aufruf dieser Unterpunkte, welche dem Benutzer dann per "onmouseover", d.h. beim Überfahren des Hauptnavigationspunktes per Maus, angezeigt werden:

<a class="navigation_main" onmouseover="show_navigation(this, navigation_extra{cp:navigation:nav_id});" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a><br /> <div class="navigation_extra" id="navigation_extra{cp:navigation:nav_id}" onmouseout="hide_navigation(this);" onmouseover="keep_navigation(this);"> {cp:container module="navigation" category="{cp:navigation:nav_id}" template="{cp:path}navigation_sub.html"} </div>

Der obenstehende Quellcode beinhaltet für die Unterpunkte einen Container-Aufruf. Die Darstellung der Unterpunkt erfolgt über die Vorlage "navigation_sub.html":

<a onmouseover="keep_navigation(navigation_extra{cp:navigation:nav_base});" class="navigation" href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a><br />

Mittels dieser drei Vorlagen wird bereits das komplette Navigationsmenü zusammengesetzt. Jetzt fehlen zur vollständigen Funktionsfähigkeit noch die notwendigen Javascript-Funktionen (welche auch in eine externe Datei ausgelagert werden können):

var active_timer = null;
var active_navigation = null;

function position_left(obj) {
 if (obj.offsetParent == null) {
  return obj.offsetLeft;
 } else {
  return obj.offsetLeft + position_left(obj.offsetParent);
 }
}

function position_top(obj) {
 if (obj.offsetParent == null) {
  return obj.offsetTop;
 } else {
  return obj.offsetTop + position_top(obj.offsetParent);
 }
}

function show_navigation(nav, menu) {
 hide_navigation_total();

 active_navigation = menu;
 menu.style.top = position_top(nav) - 2;
 menu.style.left = position_left(nav) + 190;
 menu.style.visibility = 'visible';
}

function hide_navigation(nav) {
 active_navigation = nav;
 active_timer = window.setTimeout("hide_navigation_total()", 500);
}

function hide_navigation_total() {
 if (active_navigation != null) {
  active_navigation.style.visibility = "hidden";
 }
}

function keep_navigation(menu) {
 window.clearTimeout(active_timer);
 menu.style.visibility = "visible";
}

Und zur Vollendung wird das Navigationsmenü per CSS gestaltet. Durch die Anpassung der CSS-Befehle kann darüberhinaus einfach eine Individualisierung das Navigationsmenüs stattfinden:

<style type="text/css">
<!--

/* Äußerer Rahmen um die Navigation */

div.navigation {
width: 195px;
background-color: #363636;
}

/* Gestaltung der Hauptnavigationspunkte */

a.navigation_main {
padding: 2 6 2 9px;
width: 195px;
height: 21px;
background: #DFE9F2;
text-decoration: none;
cursor: pointer;
color: #32417C;
font-weight: bold;

background-image: url(nav1.gif);
background-repeat: repeat-x;
}

a.navigation_main:hover {
color: #32417C;
text-decoration: none;
}

/* Ausklappender Container */

.navigation_extra {
padding-right: 2px;
padding-left: 2px;
visibility: hidden;
padding-bottom: 2px;
width: 200px;
padding-top: 2px;
position: absolute;
}

/* Gestaltung der Unternavigationspunkte */

a.navigation {
padding-left: 15px;
padding-top: 2px;
height: 21px;
width: 195px;
color: #000000;
text-decoration: none;

background-image: url(nav2.gif);
background-repeat: repeat-x;
}

a.navigation:hover {
color: #000000;
text-decoration: none;
}

//-->
</style>
Bitte geben Sie eine Bewertung ab: nicht lesenswert  -2 -1 0 +1 +2  lesenswert


Weitere Artikel in der Knowledge Base:

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
https://www.sandoba.de/support/knowledge-base/cms/aufklappbare-navigationsmenues-mit-javascript.html