Problem mit Subkategorien

[xtratz]

Hallo Leute,

habe hier eine Navigation mit Haupt und SUbkategorien.
Funktioniert alles einwandfrei.....die Kategorien sind auch endlos verschachtelbar.

Nur bekomme ich es nicht hin das sich die Subkategorien, welche tiefer sind als die 2te Ebene, auch ein Tick nach rechts rutschen.
Das ganze sollte so sein das alle Subkategorien einfach immer einen Tick nach rechts rutschen, der übersichthalber.

Wisst Ihr was ich meine?
Hat jemand unter umständen einen Tipp?

foreach ($categories as $category) {
	extract($category);
	// now we have $cat_id, $cat_parent_id, $cat_name

	$level = ($cat_parent_id == 0) ? 1 : 2;
    $url   = $_SERVER['PHP_SELF'] . "?c=$cat_id";

	// for second level categories we print extra spaces to give
	// indentation look
	if ($level == 2) {
		$cat_name = '    » ' . $cat_name;
	}

	// assign id="current" for the currently selected category
	// this will highlight the category name
	$listId = '';
	if ($cat_id == $catId) {
		$listId = ' id="current"';
	}

Gruss

 

[Gumbo]

Arbeite am besten mit ungeordneten Listen und formatiere diese anschließend mit CSS.

 

[xtratz]

Danke für den Tipp.
Gibts vielleicht noch ne andere Variante?

Gruss

 

[andreasst]

Ich muss sagen eine Strukturierung mit ul Tag ist und bleibt die professionellste Lösung.
Im Code kann das sinngemäß so aussehen:

<div id="menu">
<ul>
<li><a>Hauptkategorie</a></li>
<ul>
<li><a>Subkategorie 1</a></li>
<ul>
<li><a>3.Ebene menu1</a></li>
</ul>
</ul>
</ul>
</div>

Das Menu div ist nur deswegen verwendet, um das Menu vom restlichen Content der Website abzugrenzen. EIn mögliches CSS wäre Hinweis dieses CSS ist aus meiner Site (mit vielen weiteren CSS angaben) rauskopiert und sieht 3 Ebenen mit jeweils unterschiedlicher Formatierung vor. also sowohl weiter nach links verschoben als auch andere Farbe. Ich will hier nur zeigen, wie auf die einzelnen Ebenen zugegriffen wird und die Formatierung festgelegt werden kann. zB:

#menu ul
{	padding:0; 
	margin:0; 
}

#menu ul li
{	text-indent: 0pt;
	line-height:1.5em; 
}

#menu ul ul li
{	padding-left:10pt;
}

#menu ul ul ul li
{  padding-left:20pt;
}

li
{	list-style:none;
}
#menu ul li a:hover
{
color:#990000;}
#menu ul li a
{
color:#000033; font-weight:bold;}
#menu ul ul li a
{
color:#004433; }

Am saubersten wäre es übrigens das CSS gleich in ein externes File zu packen.
Die Variante <ul> + CSS ist eindeutig am professionellsten.

 

[Gumbo]

Wenn dann bitte doch eine valides Beispiel:

<div id="menu"><ul>
	<li><a>Hauptkategorie</a><ul>
		<li><a>Subkategorie 1</a><ul>
			<li><a>3.Ebene menu1</a></li>
		</ul></li>
	</ul></li>
</ul></div>

Denn das ul-Element darf nicht direktes Kindelement eines anderen ul-Elements sein.