Stu Nicholls horizontale Navigation

[yui]

Hallo zusammen,

seit einiger Zeit suche ich nun schon eine elegante horizontale Navigation, die ohne JavaScript auskommt. Nun bin ich auf diese gestoßen: http://www.cssplay.co.uk/menus/final_drop.html.

Nun habe ich allerdings ein Verständnisproblem und hoffe, mir hilft jemand auf die Sprünge: Stu verschachtelt seine Ebenen so, der Vollständigkeit halber lasse ich alles stehen:

Code: Alles auswählen

<li><a class="drop" href="../menu/shadow_boxing.html">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html">styled form</a></li>

			<li><a href="../menu/nodots.html">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html">hover/click</a></li>

		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

Im Prinzip muss ich das Modul-Template "navigation_standard.html" so modifizieren, dass es mir mir nicht dieses Ergebnis generiert:

Code: Alles auswählen

<ul>
    
    <li class="navmainStandardLevel_1 active">
        <a href="front_content.php?idcat=2&lang=1" title="Verein" class="navmainStandardLevel_1 active">Verein</a>
    </li>
    
    <li class="navmainStandardLevel_2 first">

        <a href="front_content.php?idcat=17&lang=1" title="Über uns" class="navmainStandardLevel_2 first">Über uns</a>
    </li>

sondern die Klasse navmainStandardLevel_2 noch einmal in einen <ul> Container packt. Nur wie bekomme ich das hin?

Kann mir jemand einen Tipp geben?

Schöne GRüsse
yui

[Neuer Ordner]

Folgendes Modul gibt die benötigte Menüstruktur aus:
http://forum.contenido.org/viewtopic.php?t=21784

Sollte einfach sein das auf Deine Bedürfnisse anzupassen.

[yui]

hi,

ja, das Dinge habe ich auch schon gesehen und das sieht ja auch gut aus: Braucht aber JavaScript und das möchte ich nicht.

Da ich die Navigation nun doch erst mal vertikal umsetzte, kümmere ich mich später darum. Muss ja irgendwie gehen.

Schönes Wochenende
yui

[Neuer Ordner]

Geht auch ohne js.
Wichtig ist ja nur das die Struktur der Listen eingehalten wird, den Rest macht css.

Wenn man nur das Modul nimmt ohne den js kram geht das soweit schon. Muss man nur das Modul ein wenig anpassen wegen den css Klassen.
Habs soweit schon am laufen, fehlen nur noch die Conditional Comments für den IE bis Version 6.

Als Vorlage habe ich folgendes Menü genommen:
http://www.cssplay.co.uk/menus/dd_valid.html

Wenns komplett läuft werd ich den Kram hier mal posten.

[yui]

Ich ignoriere den InternetExplorer <=6: http://www.heise.de/netze/Webmaster-Auf ... ung/133204

[Neuer Ordner]

Habe fertig!

Folgendes Modul installieren, nur das Modul! Unter Mandanteneinstellungen die notwendigen Eintragungen machen.
http://forum.contenido.org/viewtopic.php?t=21784

Danke yodatortenboxer...

Im Modul gibt es die Funktion "function liste", diese und alles was danach kommt ersetzen durch:

Code: Alles auswählen

function liste ($array, $indent = "  ", $subcount = 0) {
        global $last,$first,$Level,$LevelMax;
        if (is_array($array["feld"])) {
            if ($first) {
                echo $indent . "<ul>\n";
                $first = 0;
            }
            else echo $indent . "<ul>\n";
            foreach ($array["feld"] as $menupunkt) {
                if($subcount == 0) {
                    echo $indent . $indent . "<li>\n";
                } elseif($subcount == 1) {
                    echo $indent . $indent . "<li class=\"alone\">\n";
                } else {
                    if($array["feld"][0] == $menupunkt) {
                        echo $indent . $indent . "<li class=\"first\">\n";
                    } elseif($array["feld"][count($array["feld"]) - 1] == $menupunkt) {
                        echo $indent . $indent . "<li class=\"last\">\n";
                    } else {
                        echo $indent . $indent . "<li class=\"middle\">\n";
                    }
                }
                if (is_array($menupunkt["sub"]["feld"])) {
                    echo $indent . $indent . $indent . "<a class=\"hide\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n";
                    echo $indent . $indent . $indent . "<!--[if lte IE 6]>\n" . $indent . $indent . $indent . "<a class=\"sub\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "\n" . $indent . $indent . $indent . "<table><tr><td>\n" . $indent . $indent . $indent . "<![endif]-->\n";
                    liste($menupunkt["sub"], $indent."    ", count($menupunkt["sub"]["feld"]));
                }
                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";
            if($subcount != 0) {
                echo $indent . "<!--[if lte IE 6]>\n" . $indent . "</td></tr></table>\n" . $indent . "</a>\n" . $indent . "<![endif]-->\n";
            }
        }
    }

    /* Create Navigation Array */

    $navitems = nav_feld($hauptkategorie,$MaxLevel); 
    $first = 1;
    $last = (count($navitems["feld"]))-1;
    echo "<div class=\"menu\">\n";
    liste($navitems);
    echo "</div>\n";
    ?>

Danach die css Dateien des folgenden Menüs wie auf der Seite beschrieben ins Layout einbinden und nach belieben anpassen.
http://www.cssplay.co.uk/menus/dd_valid.html

Habe noch die css Klassen "first, middle, last, alone" in die Menüstruktur eingebaut.
Diese könnt Ihr dazu missbrauchen um den ersten, mittlere (ab 3 Menüeinträge), und den letzten Menüpunkt des Drop-Downs anzupassen. Die Klasse "alone" ist für den Fall, dass nur ein Menüpunkt im Dropdown vorhanden ist.

Der Code hat sicherlich noch Optimierungsbedarf, bin für jede Idee dankbar.

Gruß
Neuer Ordner

[yui]

Hallo Neuer Ordner,

vielen Dank für Deine Arbeit! Ich bin momentan jedoch in einem völlig anderen Film, weshalb ich mir sie jetzt nicht genauer ansehen kann. Daher mein qualifiziertes Feedback erst später.

Schönen Sonntag,
yui

[CharlyBrown]

Hallo Neuer Ordner,

das Teil ist mal amtlich der Hammer!!! Danke.

Man kann die Funktion noch ändern, so dass das aktive Listenelement (der obersten Ebene) markiert wird. Erleichtert die oftmals die Orientierung. Wers brauchen kann tauscht einfach die Funktion aus (ohne Gewähr!):

Code: Alles auswählen

function liste ($array, $indent = "  ", $subcount = 0) {
        global $last,$first,$Level,$LevelMax;
        if (is_array($array["feld"])) {
            if ($first) {
                echo $indent . "<ul>\n";
                $first = 0;
            }
            else echo $indent . "<ul>\n";
            foreach ($array["feld"] as $menupunkt) {
                if($subcount == 0) {
                    if (($menupunkt["active"] == "active") or ($menupunkt["active"] == "activepath")) {
                    echo $indent . $indent . "<li class=\"active\">\n";
                    }
                    else {
                        echo $indent . $indent . "<li>\n";
                    }
                } elseif($subcount == 1) {
                    echo $indent . $indent . "<li class=\"alone\">\n";
                } else {
                    if($array["feld"][0] == $menupunkt) {
                        echo $indent . $indent . "<li class=\"first\">\n";
                    } elseif($array["feld"][count($array["feld"]) - 1] == $menupunkt) {
                        echo $indent . $indent . "<li class=\"last\">\n";
                    } else {
                        echo $indent . $indent . "<li class=\"middle\">\n";
                    }
                }
                if (is_array($menupunkt["sub"]["feld"])) {
                echo $indent . $indent . $indent . "<a class=\"hide\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n";
                echo $indent . $indent . $indent . "<!--[if lte IE 6]>\n" . $indent . $indent . $indent . "<a class=\"sub\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "\n" . $indent . $indent . $indent . "<table><tr><td>\n" . $indent . $indent . $indent . "<![endif]-->\n";
                liste($menupunkt["sub"], $indent."    ", count($menupunkt["sub"]["feld"]));
                }
                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";
            if($subcount != 0) {
                echo $indent . "<!--[if lte IE 6]>\n" . $indent . "</td></tr></table>\n" . $indent . "</a>\n" . $indent . "<![endif]-->\n";
            }
        }
    }

    /* Create Navigation Array */

    $navitems = nav_feld($hauptkategorie,$MaxLevel);
    $first = 1;
    $last = (count($navitems["feld"]))-1;
    echo "<div class=\"menu\">\n";
    liste($navitems);
    echo "</div>\n";
    ?>

Gruß

Frank

[Neuer Ordner]

Danke für das Lob und viel Spass mit dem Menü.
Werde Deine Erweiterung bei Gelegenheit mal ausprobieren.

Gruß Neuer Ordner.

[yui]

Danke Frank, das Ding habe ich gesucht.

[sherman]

Hallo Neuer Ordner.

Die Navigation ist klasse, hab sie auch schon seit geraumer Zeit ohne probleme am laufen.
Nur moechte ich jetzt hinter den Hauptmenüpunkten ein &raquo; setzen, aber wenn ich es in den Modulcode einsetze erscheint es hinter jedem Navigationspunkt!

Wo muss ich es im Code hinsetzen, damit es wirklich nur hinter den Hauptpunkten kommt?

Danke.

[Neuer Ordner]

Hi sherman,

sollte so funktionieren:

Code: Alles auswählen

function liste (Array $array, $indent = "  ", $subcount = 0, $leftflag = false) {
	$return = '';
	static $recursion_depth = 0;
	if (is_array($array["feld"])) {
		$return .= $indent . "<ul";
		if($leftflag && $recursion_depth == 2) $return .= ' class="left"';
		$return .= ">\n";
		$innercache = '';
		foreach ($array["feld"] as $menupunkt) {
			if($recursion_depth == 0 && $array["feld"][count($array["feld"]) - 1] == $menupunkt)
				$leftflag = true;
			if($subcount == 0)
				$innercache .= $indent . $indent . "<li>\n";
			 elseif($subcount == 1)
				$innercache .= $indent . $indent . "<li class=\"alone\">\n";
			else
				if($array["feld"][0] == $menupunkt)
					$innercache .= $indent . $indent . "<li class=\"first\">\n";
				elseif($array["feld"][count($array["feld"]) - 1] == $menupunkt)
					$innercache .= $indent . $indent . "<li class=\"last\">\n";
				else
					$innercache .= $indent . $indent . "<li class=\"middle\">\n";
			if (is_array($menupunkt["sub"]["feld"])) {
				$innercache .= $indent . $indent . $indent . "<a class=\"hide\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . " &raquo;</a>\n";
				$innercache .= $indent . $indent . $indent . "<!--[if lte IE 6]>\n" . $indent . $indent . $indent . "<a class=\"sub\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "\n" . $indent . $indent . $indent . "<table><tr><td>\n" . $indent . $indent . $indent . "<![endif]-->\n";
				$recursion_depth++;
				$innercache .= liste($menupunkt["sub"], $indent."    ", count($menupunkt["sub"]["feld"]), $leftflag);
				$recursion_depth--;
				$leftflag = false;
				//einrückung anhand x*recursion_depth
			}
			elseif ($subcount == 0) {
				$innercache .= $indent . $indent . $indent . "<a href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . " &raquo;</a>\n";
			$innercache .= $indent . $indent . "</li>\n";
			}
			else $innercache .= $indent . $indent . $indent . "<a href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n";
			$innercache .= $indent . $indent . "</li>\n";
		}
		$return .= $innercache;
		$return .= $indent . "</ul>\n";
		if($subcount != 0)
			$return .= $indent . "<!--[if lte IE 6]>\n" . $indent . "</td></tr></table>\n" . $indent . "</a>\n" . $indent . "<![endif]-->\n";
	}
	return $return;
}

/* Create Navigation Array */

echo "<div class=\"menu\">\n";
echo liste(nav_feld($hauptkategorie,$MaxLevel));
echo "</div>\n";
?>

Gruß Neuer Ordner