Neues Modul: vpNavigation
Verfasst: Do 7. Jul 2005, 23:19
Auf der Suche nach einem Dropdown-Menü, das man schön in Contenido integrieren kann, bin ich auf die Suckerfish Dropdown gekommen:
http://www.htmldog.com/articles/suckerfish/dropdowns/
Der notwendige HTML-Code ist sehr einfach und valide(ungeordnete Liste, je nach Bedarf auch über mehrere Ebenen) und es funktioniert ohne Einsatz von JavaScript, wenn man vom Internet Explorer absieht. Aber für den haben wir dann noch einen Workaround parat.
Dies habe ich dann auch gleich mal als Modul für Contenido umgesetzt. Eine Demo findet sich hier:
http://spielwiese.contenido-tutorials.d ... p?idcat=54
Doch nun zur Umsetzung mit Contenido:
1. Neues Modul erstellen mit diesem Input:
und diesem Output:
2. Das Modul im Layout vorsehen, z.B. durch:
<div id="vpnavigation">CMS_CONTAINER[x]</div>
Dabei ist die ID "vpnavigation" notwendig, um später die einzelnen Ebenen und Menüpunkte per CSS anzusprechen. Das "x" ist durch eine Ziffer zu ersetzen.
3. In den Templates, wo das Modul verwendet werden soll, muss es bei dem entsprechenden Container angegeben werden.
4. In der verwendeten CSS-Datei die notwendigen CSS-Anweisungen anlegen, z.B.:
5. Damit der Spaß auch im Internet Explorer < 7 funktioniert, folgenden JavaScript-Code zwischen den Head-Tags (<head> ... </head>) des entsprechenden Layouts einfügen:
für HTML:
für XHTML:
Viel Spaß damit! Die Informationen zur aktuellen Version und den o.g. Code auch nochmal zum Download gibt es unter:
http://www.contenido-tutorials.de/front ... p?idcat=58
Gruß
Ingo
http://www.htmldog.com/articles/suckerfish/dropdowns/
Der notwendige HTML-Code ist sehr einfach und valide(ungeordnete Liste, je nach Bedarf auch über mehrere Ebenen) und es funktioniert ohne Einsatz von JavaScript, wenn man vom Internet Explorer absieht. Aber für den haben wir dann noch einen Workaround parat.
Dies habe ich dann auch gleich mal als Modul für Contenido umgesetzt. Eine Demo findet sich hier:
http://spielwiese.contenido-tutorials.d ... p?idcat=54
Doch nun zur Umsetzung mit Contenido:
1. Neues Modul erstellen mit diesem Input:
Code: Alles auswählen
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname : vpNavigation 0.2
* Author : Ingo van Peeren
* Copyright : Ingo van Peeren (ingo@van-peeren.de)
* Created : 30-03-2005
* Modified : 16-07-2005
************************************************/
?>
<table cellspacing="0" cellpadding="0" cellpadding="4">
<tr>
<td class="text_medium">Baum wählen:</td>
<td>
<select name="CMS_VAR[0]">
<option value="0">-- kein --</option>
<?php
$sql = "SELECT
A.idcat,
C.name
FROM
".$cfg["tab"]["cat_tree"]." AS A,
".$cfg["tab"]["cat"]." AS B,
".$cfg["tab"]["cat_lang"]." AS C
WHERE
A.idcat = B.idcat AND
B.idcat = C.idcat AND
C.idlang = '".$lang."' AND
B.idclient = '".$client."' AND
C.visible = 1 AND
A.level = '0'
ORDER BY
A.idtree";
$db->query($sql);
while ( $db->next_record() ) {
if ( "CMS_VALUE[0]" == $db->f("idcat") ) {
echo '<option selected="selected" value="'.$db->f("idcat").'">'.$db->f("name").'</option>';
} else {
echo '<option value="'.$db->f("idcat").'">'.$db->f("name").'</option>';
}
}
?>
</select>
</td>
</tr>
</table>
<?php
Code: Alles auswählen
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : vpNavigation 0.2
* Author : Ingo van Peeren
* Copyright : Ingo van Peeren (ingo@van-peeren.de)
* Created : 30-03-2005
* Modified : 16-07-2005
************************************************/
$hauptkategorie = "CMS_VALUE[0]";
$navitems = array();
function nav_feld ($cat) {
global $client, $lang, $cfg, $idcat;
if (!is_object($db)) {
$db = new DB_Contenido;
}
$sql = "SELECT
A.idcat,
B.parentid,
C.name
FROM
".$cfg["tab"]["cat_tree"]." AS A,
".$cfg["tab"]["cat"]." AS B,
".$cfg["tab"]["cat_lang"]." AS C
WHERE
A.idcat = B.idcat AND
B.idcat = C.idcat AND
B.idclient = '$client' AND
C.idlang = '$lang' AND
C.visible = '1' AND
B.parentid = '$cat'
ORDER BY
A.idtree";
$db->query($sql);
while ( $db->next_record() ) {
$aktiv = "";
$sub_feld = nav_feld($db->f("idcat"));
if ($db->f("idcat") == $idcat) $aktiv = "active";
elseif ($sub_feld["activepath"]) $aktiv = "activepath";
$nav_feld[] = array("idcat" => $db->f("idcat"),
"name" => $db->f("name"),
"active" => $aktiv,
"sub" => $sub_feld);
if ($aktiv != "") $activepath = $aktiv;
}
$rv = array("feld" => $nav_feld,
"activepath" => $activepath);
return $rv;
}
function liste ($array, $indent = " ")
{
global $first;
if (is_array($array["feld"])) {
if ($first) {
echo $indent . "<ul id=\"nav\">\n";
$first = 0;
}
else echo $indent . "<ul>\n";
foreach ($array["feld"] as $menupunkt) {
if ($menupunkt["active"] == "active") echo $indent . $indent . "<li id=\"active\">\n";
elseif ($menupunkt["active"] == "activepath") echo $indent . $indent . "<li class=\"activepath\">\n";
else echo $indent . $indent . "<li>\n";
if (is_array($menupunkt["sub"]["feld"])) {
echo $indent . $indent . $indent . "<a class=\"daddy\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n";
liste($menupunkt["sub"], $indent." ");
}
else echo $indent . $indent . $indent . "<a href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n";
echo $indent . $indent . "</li>\n";
}
echo $indent . "</ul>\n";
}
}
/* Create Navigation Array */
$navitems = nav_feld($hauptkategorie);
$first = 1;
liste($navitems);
?>
<div id="vpnavigation">CMS_CONTAINER[x]</div>
Dabei ist die ID "vpnavigation" notwendig, um später die einzelnen Ebenen und Menüpunkte per CSS anzusprechen. Das "x" ist durch eine Ziffer zu ersetzen.
3. In den Templates, wo das Modul verwendet werden soll, muss es bei dem entsprechenden Container angegeben werden.
4. In der verwendeten CSS-Datei die notwendigen CSS-Anweisungen anlegen, z.B.:
Code: Alles auswählen
#vpnavigation, #vpnavigation ul { /* alle Listen */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#vpnavigation a {
display: block;
width: 10em;
}
#vpnavigation li { /* alle Listenelemente */
float: left;
width: 10em;
}
#vpnavigation li ul { /* Listen 2. Ebene */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* durch "left" außerhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}
#vpnavigation li li {
position: relative;
}
#vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */
background: url(../images/rightarrow.gif) center right no-repeat;
}
#vpnavigation li ul ul { /* Listen 3. Ebene und weiter */
margin: -1em 0 0 10em;
}
#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
left: -999em;
}
#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
left: auto;
}
#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
font-style: italic!important;
}
für HTML:
Code: Alles auswählen
<!--[if lt IE 7]>
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<![endif]-->Code: Alles auswählen
<!--[if lt IE 7]>
<script type="text/javascript">
/* <![CDATA[ */
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
/* ]]> */
</script>
<![endif]-->Viel Spaß damit! Die Informationen zur aktuellen Version und den o.g. Code auch nochmal zum Download gibt es unter:
http://www.contenido-tutorials.de/front ... p?idcat=58
Gruß
Ingo
