Layout der Hauptnavi mit CSS umstricken...

[sept00]

Guten Tag zusammen,

ich habe das Layout für eine Seite nun (endlich) fertig und möchte das Hauptnavigationsmodul umstricken, so dass es mit dem CSS-basierten Layout konform geht. Statt der üblichen Geschichte mit den Tables und den <td>s mit unterschiedlichem padding baue ich ein Menü folgendermaßen auf:

Code: Alles auswählen

<h1>Menu-Name</h1>
  <ul>
    <li><a href="link1.html">Link-Descr. 1</a></li>
    <li><a href="link2.html">Link-Descr. 1</a></li>
    <li><a href="link3.html">Link-Descr. 1</a>
    <ul>
        <li><a href="link3_1.html">Link-Descr. 3_1</a></li>
        <li><a href="link3_2.html">Link-Descr. 3_2</a></li>
        <li><a href="link3_2.html">Link-Descr. 3_2</a></li>
    </ul></li>
    <li><a href="link4.html">Link-Descr. 1</a></li>
    <li><a href="link5.html">Link-Descr. 1</a></li>
</ul>

Das hat drei Vorteile:
1. Mit den Listen bildet sich die Menühierarchie korrekt ab.
2. Die Menütiefe kann beliebig groß sein, da der Abstand vom linken Rand über das <ul>-Tag geregelt wird.
3. Es geht besser durch Accessability-Richtlinien durch.

Nun spielt aber das Originalmodul der Hauptnavigation dieses Spiel nicht mehr mit, und zwar ab dieser Stelle (ab Zeile 265):

Code: Alles auswählen

echo '<table cellspacing="0" cellpadding="0" border="0">';

foreach ($navitems as $key => $data) {

    /* 1. Navigations Ebene */
    $tpl->reset();
    $tpl->set('d', 'NAME',  $data['name']);
    $tpl->set('d', 'TARGET', $data['target']);
    $tpl->set('d', 'HREF',  $sess->url('front_content.php?idcat='.$data['idcat']));
    $tpl->next();

    if ($idcat == $data['idcat'] || is_array($data['sub'])) {
        $tpl->generate('templates/navfirst_on.html');
    } else {
        $tpl->generate('templates/navfirst_off.html');
    }

    if (is_array($data['sub'])) {

        foreach ($data['sub'] as $key => $data) {

            /* 2. Navigations Ebene */
...

Nun kenne ich mich leider nicht genügend mit PHP aus um folgenden Workflow in dieses Modul zu implementieren:
1. Mit <ul> das Menü anfangen
2. Für jeden Menüpunkt ein und dieselbe Template-Datei laden und manipulieren
3. Beim stossen auf ein Submenü zu Schritt 1
4. Alle geöffneten <ul>s schließen

Zusätzlich (ja, es wird noch schöner) würde ich gerne das Menü überschrieben haben, aber nur einmal ganz oben mit dem Namen des Baums (siehe <h1>Baum-Name</h1>.

Ein paar praktische Hinweise, wie ich es selber lösen könnte würde ich genauso dankbar aufnehmen wie jede Lösung meines Problems.

Gruß und vielen Dank,
Thomas

[stony]

also ich habe hierfür auch ein listing gemacht, in den template ordnern habe ich in der navfirst_on.html und navsfirst_off.html

<li class="navfirst" usw.

und in navsecond_on und off

<li class="navsecond" usw.

reingebastelt.

dann via css. die abstände eingestellt und farbilich angepasst.

dann habe ich im output vom hauptnavigationsmodul alle tabellen und zellen entfernt und <ul> anstellt von <table> gessetzt und den tag dann wieder bei </table> durch </ul> geschlossen.

mit dem namen, des baums, würde ich einfach selber reinschreiben über den output desmoduls, ist warscheinlich die einfachste variante.

aber es gibt ein modul für den pfad wo man sich befindet da kann man sich das sichalich rausziehen.

mfg stony

[sept00]

Zugegeben, so könnte man es machen, allerdings hat man dann nur die vorherige <table>-Methode in CSS umgewandelt. Der Haupt-Vorteil von CSS, die Seite mit Tags strukturieren zu können, geht dabei allerdings verloren, da alle Menüpunkte alle auf einer Ebene sind.

Den im ersten Post genannten Output bekommt man wahrscheinlich nur mit einem rekursiven Aufruf von einer Routine. Keine Ahnung, wie das in Contenido so geht. Vielleicht sollte ich ja erst einmal ein PHP-Buch lesen... ich stehe jedenfalls kurz davor.

Es ist für die Seite relativ wichtig, dass der Output dem ersten Code-Beispiel von meinem ersten Post entweder nahe kommt oder ihm am besten gleicht.

Danke,
Thomas

[stony]

weiß, was du meinst,

diese würde ein großen schritt in richtung barrierefreiheit machen.

habe damit selber zu kämpfen, da ich für ein projekt das staatliche förderung erhällt programiere und somit alle webauftritte so umbasteln muss.

vielleicht kann man in zukunft versuchen bei der erstellung von contenido darauf hinzuarbeiten.

mfg stony

[timo]

vielleicht kann man in zukunft versuchen bei der erstellung von contenido darauf hinzuarbeiten.

verstehe ich nicht ganz; was meinst du damit?

[stony]

naja in zukunft mehr darauf zu achten contenido und seine module so umzustricken das sie der BITV entsprechen (Barrierefreie Informationstechnik-Verordnung) http://www.wob11.de/gesetze/bitv.html

mfg stony

[sept00]

Update meiner PHP-Bemühungen:
Bin nun doch in das Reich der Hypertext-Preprocessing vorgedrungen und sitze an den Hauptnavi-Quelltexten. Rund um Zeile 268 oder so ersetze ich das:

Code: Alles auswählen

...
foreach ($navitems as $key => $data) {

    /* 1. Navigations Ebene */
    $tpl->reset();
    $tpl->set('d', 'NAME',  $data['name']);
...
    if (is_array($data['sub'])) {

        foreach ($data['sub'] as $key => $data) {

            /* 2. Navigations Ebene */
            $tpl->reset();
            $tpl->set('d', 'NAME',  $data['name']);
...

mit folgendem:

Code: Alles auswählen

...
echo '<h1>Menuetitel</h1>' . "\n";
echo '	<ul>' . "\n";

create_menu_entry(0);
...

und ein paar Zeilen oberhalb stecke ich die folgende Funktion rein:

Code: Alles auswählen

function create_menu_entry($depth) {
	global $navitems, $data, $sess;
	if ($depth > 0) {
		echo "	<ul>\n";
		foreach ($data['sub'] as $key => $data) {
			echo '		<li><a href="'. $sess->url('front_content.php?idcat='.$data['idcat']) .'" target="'. $data['target'] .'">'. $data['name'] .'</a>';
			if (is_array($data['sub'])) {
				create_menu_entry($depth+1);
			}
			echo "</li>\n";
			echo "	</ul>\n";
		}
	} else {
		foreach ($navitems as $key => $data) {
			echo '		<li><a href="'. $sess->url('front_content.php?idcat='.$data['idcat']) .'" target="'. $data['target'] .'">'. $data['name'] .'</a>';
   		 	if (is_array($data['sub'])) {
				create_menu_entry($depth+1);
			}
			echo "</li>\n";
		} //foreach
	} // if
}

Ist alles nicht besonders elegant geschrieben, aber funktioniert wenigstens für die Hauptstruktur des Baumes (d.h. Punkt 1, Punkt 2, ...). Sobald ich einen Menüpunkt anklicke, zeigt es zwar den richtigen Seiteninhalt an (d.h. die Links sind richtig gesetzt) aber das Menü wird falsch oder gar nicht wiedergegeben.

Ich finde, es ist so zwar nicht so flexibel, weil die Templates nicht benutzt werden, allerdings viel eleganter von dem erzeugten Markup. Bin gerade in Eile, falls jemand ein paar Tipps für den PHP-Code hat wäre ich sehr froh!!

Gruß,
Thomas

[sept00]

So, ich hoffe diesen Thread liest überhapt noch jemand. Ich habe mittlerweile nennenswerte Fortschritte in meinen Kenntnissen über PHP gemacht und ein wenig gebastelt. Ich brauche mittlerweile nur noch in einer Sache Hilfe, die wäre folgende:

Ich habe den Code der Hauptnavigation nun so weit umgeschrieben, dass das Menü durch eine rekursive Funktion erzeugt wird:

Code: Alles auswählen

function create_menu($depth, $d) {
	global $sess;
	echo "	<ul>\n";
	foreach ($d as $k => $data) {
		echo '		<li><a href="'. $sess->url('front_content.php?idcat='.$data['idcat']) .'" target="'. $data['target'] .'">'. $data['name'] .'</a>';
		//if ((is_array($d['sub'])) && ($depth<20)) {
		if (is_array($data['sub'])) {
			create_menu($depth+1, $data['sub']);
		}
		echo "</li>\n";
	} //foreach
	echo "	</ul>\n";
}

Aufgerufen wird es das erste mal so:

Code: Alles auswählen

...
        $navitems[$db->f("idcat")] = array("idcat"  => $db->f("idcat"),
                                           "name"   => $db->f("name"),
                                           "target" => $target);
}

/* Create Navigation Array */
nav($sel_idcat);

/* Start Output buffer */
ob_start();

echo '<h1>Menuetitel</h1>' . "\n";
create_menu(0, $navitems);            // <------- hier wird sie zum ersten mal aufgerufen
...

Meine Site-Struktur sieht wie folgt aus:

-Punkt 1 (idcat=3)
--Punkt 1.1 (idcat=6)
--Punkt 1.2 (idcat=7)
-Punkt 2 (idcat=8)
(ist halt noch die Install-Einstellung)

Wenn ich nun bei idcat=1 bin (also die Hauptseite) und Punkt 1 auswähle, sollte sich ein Menü wie solches entfalten:

-Punkt 1
--Punkt 1.1
--Punkt 1.2
-Punkt 2

tut es aber nicht. Stattdessen bekomme ich:

-Hauptnavigation
-News
-Hilfsnavigation

nur wenn ich manuell idcat=6 als Parameter an front_content.php schicke gibt er mir das richtige Menü aus.

Was geht?

Weiterhin für jede Hilfe Dankbar...

Gruß,
Thomas