Server-Betriebssystem: Linux Ubuntu
Datenbank: 5.5.29 (MySQL)
PHP-Version: 5.3.10
Hallo,
ich habe nun einiges vor mit Contenido und benötige unbedingt eure Hilfe.
Ich möchte gern eine Website realisieren, welche zum einen eine Horizontale Drop Down Navigation beinhalten bei welcher alle Hauptpunkte und dazugehörige Unterpunkte ausgegeben werden.
Geht man nun mit der Maus über einen Hauptpunkt so öffnet sich nach unten ein Bereich mit den Unterpunkten. Es handelt sich also um eine 2 Level Navigation.
Hierfür habe ich derzeit nur folgendes umgesetzt, da ich ausschließlich mit css Arbeiten möchte und für die Drop Down Navigation kein Javascript einsetzen möchte (Barrierefreiheit).
Das ganze ist nicht wirklich sauber, eher quick and dirty und gibt derzeit noch eine dritte ebene aus. Die Problematik ist, dass ich immer auf einen anderen css Status prüfen muss. Ich muss dazu sagen, dass ich nicht der PHP Profi bin und hier die als Grundlage die vpNavigation verwendet habe
Wenn ich das Sauber umgesetzt bekommen würde, dann hätte ich schon mal step 1 meiner Wunschnavigtion erreicht erreicht.
Moduleingabe:
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[500]">
<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[500]" == $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[500]";
if(empty($hauptkategorie)) $hauptkategorie = 1;
$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 = " ") {
$i = 0;
echo $indent."<ul id=\"nav\">\n";
foreach($array['feld'] as $menupunkt) {
$i++;
if(is_array($menupunkt['sub']['feld'])) {
echo $indent.$indent.$indent."<li class=\"top\"><a id=\"citem{$i}\" class=\"";
if($menupunkt['active'] == "activepath" || $menupunkt['active'] == "active") echo "top_link_active";
else echo "top_link";
echo "\" href=\"front_content.php?idcat={$menupunkt['idcat']}\"><span class=\"down\">{$menupunkt['name']}</span></a>\n";
echo $indent.$indent.$indent.$indent."<ul class=\"sub\">\n";
foreach($menupunkt['sub']['feld'] as $submenu) {
$i++;
if(is_array($submenu['sub']['feld'])) {
echo $indent.$indent.$indent.$indent.$indent."<li><a id=\"citem{$i}\" class=\"fly\" href=\"front_content.php?idcat={$submenu['idcat']}\">{$submenu['name']}</a>\n";
echo $indent.$indent.$indent.$indent.$indent.$indent."<ul>\n";
foreach($submenu['sub']['feld'] as $subsubmenu) {
$i++;
echo $indent.$indent.$indent.$indent.$indent.$indent.$indent."<li><a id=\"citem{$i}\" href=\"front_content.php?idcat={$subsubmenu['idcat']}\">{$subsubmenu['name']}</a></li>\n";
}
echo $indent.$indent.$indent.$indent.$indent.$indent."</ul>\n";
echo $indent.$indent.$indent.$indent.$indent."</li>\n";
} else {
echo $indent.$indent.$indent.$indent.$indent."<li><a id=\"citem{$i}\" href=\"front_content.php?idcat={$submenu['idcat']}\">{$submenu['name']}</a></li>\n";
}
}
echo $indent.$indent.$indent.$indent."</ul>\n";
echo $indent.$indent.$indent."</li>\n";
} else {
echo $indent.$indent.$indent."<li class=\"top\"><a id=\"citem{$i}\" class=\"";
if($menupunkt['active'] == "activepath" || $menupunkt['active'] == "active") echo "top_link_active";
else echo "top_link";
echo "\" href=\"front_content.php?idcat={$menupunkt['idcat']}\"><span>{$menupunkt['name']}</span></a></li>\n";
}
}
echo $indent."</ul>\n";
}
/* Create Navigation Array */
$navitems = nav_feld($hauptkategorie);
liste($navitems);
?>
Code: Alles auswählen
<div id="navigation">
<ul id="nav">
<li class="top"><a id="citem1" class="top_link_active" href="/kategorie/artikel.html"><span>Artikel</span></a></li>
<li class="top"><a id="citem2" class="top_link" href="/kategorie1/artikel1.html"><span>Artikel1</span></a></li>
<li class="top"><a id="citem3" class="top_link" href="/kategorie2/artikel2.html"><span class="down">Artikel2</span></a>
<ul class="sub">
<li><a id="citem4" href="/kategorie2/subkategorie1/artikel3.html">Artikel3</a></li>
<li><a id="citem5" href="/kategorie2/subkategorie1/artikel4.html">Artikel4</a></li>
<li><a id="citem6" href="/kategorie2/subkategorie1/artikel5.html">Artikel5</a></li>
<li><a id="citem7" href="/kategorie2/subkategorie1/artikel6.html">Artikel6</a></li>
<li><a id="citem8" href="/kategorie2/subkategorie1/artikel7.html">Artikel7</a></li>
<li><a id="citem9" href="/kategorie2/subkategorie1/artikel8.html">Artikel8</a></li>
</ul>
</li>
<li class="top"><a id="citem10" class="top_link" href="/kategorie3/artikel9.html"><span class="down">Artikel9</span></a>
<ul class="sub">
<li><a id="citem11" href="/kategorie3/subkategorie2/artikel10.html">Artikel10</a></li>
<li><a id="citem12" href="/kategorie3/subkategorie2/artikel11.html">Artikel11</a></li>
<li><a id="citem13" href="/kategorie3/subkategorie2/artikel12.html">Artikel12</a></li>
</ul>
</li>
<!--usw...-->
</ul>
</div>
nun wird es noch ein wenig komplizierter:
Sobald man in der Horizontalen DropDown Navigation einen Punkt der ersten oder zweiten ebene Angeklickt hat soll der entsprechende Artikel aufgerufen werden (ist ja standard) und auf der linken Seite sollen alle Unterpunkte (INKLUSIVE DES DRITTEN LEVELS) des jeweiligen Hauptpunkts erscheinen (Könnte man hierfür eventuell das zweite Modul aus diesem Artikel: http://forum.contenido.org/viewtopic.php?f=60&t=31439 einzeln Verwenden?)
Nun aber das wichtigste: Der Hauptpunkt ist dann in der Horizontalen Navigation aktiv gesetzt also mit css gestylt um sichtbar zu machen, dass man gerade auf Punkt xy ist. Wenn ein Hauptpunkt in der Horizontalen Navigation aktiv ist so soll er Level 2 und 3 nicht mehr als Drop Down ausgeben.
Als Beispiel:
http://www.bundestag.de
Anbei noch eine Skizze meines Vorhabens.
Ich würde mich sehr über eure Hilfe und Unterstützung freuen.
Vielen Dank schon mal an alle.