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).


Landesverkehrswacht Mecklenburg-Vorpommern setzt auf Contentpapst

Horizontale Drop-Down-Navigation in Contentpapst

Neben der im Artikel "Aufklappbare Navigationsmenüs mit Javascript" beschriebenen vertikalen Drop-Down-Navigation kann mit Hilfe der Navigationscontainer auch eine horizontale Drop-Down-Navigation wie auf www.sandoba.de realisiert werden. In diesem Artikel wird ein möglicher Weg der Realisierung beschrieben.

Über das Navigationsmodul legen Sie im Administrationsbereich zuerst Ihre Navigation in einer 2-dimensionalen Struktur (d.h. mit Haupt- und Unternavigationspunkten) an. Geben Sie dort jedem Navigationspunkt den gewünschten Titel und die passende URL. Wenn Sie mehrere Navigationen auf der Seite einsetzen möchten, dann legen Sie alle Hauptpunkte unterhalb eines Navigationspunktes an, den Sie z.B. "Hauptnavigation oben" nennen.

Sobald die Navigationpunkte fertig angelegt wurden, kann die Arbeit mit den Containern und Vorlagen beginnen. Zuerst müssen Sie sich entscheiden, an welcher Stelle der Seite die Navigation eingeblendet werden soll. In der Regel ist dies eine Position innerhalb der Vorlage "main.htm" Ihres Vorlagensets (d.h. die Vorlage "/themes/[NAME DES VORLAGENSETS]/main.htm").

Dort setzen Sie dann den folgenden Containeraufruf ein:

<div class="navigation">{cp:container module="navigation" category="0" template="{cp:path}dropdown_main.html" template_subnodes="{cp:path}dropdown_subnodes.html" cache="3600"} </div>

Wenn Sie alle Navigationspunkte wie oben beschrieben unterhalb eines anderen Navigationspunktes angeordnet haben, dann ersetzen Sie im Parameter "category" zunächst noch den Wert "0" durch die ID dieses Navigationspunktes, damit auch die richtige Ebene der Navigation dargestellt wird.

Im nächsten Schritt werden jetzt die im Containeraufruf angegebenen Vorlagen angelegt, die später die Hauptnavigationspunkte darstellen, also die Navigationspunkte, welche immer sichtbar sind. Über die Vorlage "dropdown_main.html" werden nur die Hauptnavigationspunkte ohne eigene Unterpunkte dargestellt. Dort setzen Sie den folgenden Inhalt ein (den HTML-Code können Sie nach dem Ende dieses Artikels natürlich frei nach den eigenen Wünschen anpassen):

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

Und in die Vorlage "dropdown_subnodes.html" kommt der folgende Inhalt:

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

Diese Vorlage beinhaltet den neben dem normalen Link für den Hauptnavigationspunkt auch noch ein Javascript-Event sowie einen <div>-Layer mit einem Containeraufruf für die Unterpunkte. Sobald diese Navigation fertiggestellt wurde, wird beim Überfahren des Hauptnavigationspunktes stets ein Javascript-Event ausgelöst, mit welchem der <div>-Layer sichtbar gemacht wird. Und sobald der Mauszeiger vom Hauptnavigationspunkt oder dem <div>-Layer verschwindet, ist auch der <div>-Layer nicht mehr sichtbar.

Nun müssen noch die Unterpunkte über die oben angegebene Vorlage "dropdown_sub.html" dargestellt werden:

<?php if ('{cp:navigation:last}' == '1') { ?>
 <a onmouseover="keep_navigation('navigation_extra{cp:navigation:nav_base}');" class="navigation" style="background-image: none" href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">» {cp:navigation:nav_title}</a><br />
<?php } else { ?>
 <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 />
<?php } ?>

Damit die Javascript-Events auch ausgelöst werden können, wird im Kopfbereich der Vorlage "main.htm" ein Verweis auf die neu anzulegende Datei "navigation.js" eingefügt. In diese Datei kommt folgender Inhalt:

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 = document.getElementById(menu);
 active_navigation.style.top = (position_top(nav) + 26) + 'px';
 active_navigation.style.left = position_left(nav) + 'px';
 active_navigation.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);
 this_menu = document.getElementById(menu);
 this_menu.style.visibility = "visible";
}

Zuletzt müssen noch einige CSS-Befehle in die vom Vorlagenset standardmäßig eingebundene CSS-Datei "standard.css" integriert werden, damit die einzelnen Navigationspunkte auch den eigenen Wünschen gemäß angezeigt werden können. Diese CSS-Befehle können frei angepasst werden, wenn Sie andere Farben, Schriftarten o.ä. benötigen.

/* Gestaltung der Hauptnavigationspunkte */

a.navigation_main {
 text-decoration: none;
 cursor: pointer;
 color: #000000;

 background-image: url('images/background_image.gif');
 background-repeat: repeat-x;
 height: 22px;
 padding-top: 5px;
 padding-left: 11px;
 padding-right: 8px;
}

a.navigation_main:hover, a.navigation_main:visited, a.navigation_main:active, a.navigation_main:link {
 color: #FFFFFF;
 text-decoration: none;
}

/* Ausklappender Container */

.navigation_extra {
 padding-right: 2px;
 padding-left: 0px;
 padding-top: 4px;
 padding-bottom: 2px;
 visibility: hidden;
 width: 145px;
 position: absolute;
 text-align: left;
 background: #E5E4E2;
 border: 1px solid #AEADA4;
 filter: alpha(opacity: 90);
 color: #000000;
 text-transform: none;
}

.navigation_extra a:hover, .navigation_extra a:active, .navigation_extra a:visited, .navigation_extra a:link {
 color: #000000 !important;
 text-decoration: none !important;
 font-size: 10px !important;
 font-weight: normal !important;
}


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/horizontale-drop-down-navigation-in-contentpapst.html