aufklappendes Menu, dasauch aufgeklappt bleibt

[M.Dietz]

Hi,

ich habe da ein Projekt übernommen, beidem per php aus einem Template ein Menu als Teil der Webseite erzeugt wird (PHP deshalb, weil je nach Sprachauswahl Texte ersetzt werden). Da diese Menüliste sehr lang wird, soll sie nach Kategorien sortiert sein, bis auf die Hauptkategorien alles verborgen sein und die entsprechende Kategorie nur aufgeklappt werden, wenn des benötigt wird.

Durch ein bisschen googeln habe ich was gefunden, das die Unterliste per css aufpoppen oder verbergen kann:

<style type="text/css">
div#sideMenu {
	padding:0.8em;
	width: 40em;
	}
	
div#sidemenu div{
	clear: left;
}
ul#menubar{
	margin:0; padding:0;
	text-align: left;
}

ul#menubar li{
	list-style: none;
}

ul#menubar li ul{
	display:none;
}

ul#menubar li:hover > ul {
	display:block;
	position:relative;
	top:0;
	left:10;
}
</style>

<div id="sideMenu">
<ul id="menubar">       
<li id="normal_operation">{MENU_HEADER_NORMAL_OPERATION}
<ul>
<li><div>&nbsp;&nbsp;&nbsp;<div class="{CLASS_PAGE_SAMPLE}"><a href="sample.php">{MENU_SAMPLE}</a></div></div></li>
<li><div>&nbsp;&nbsp;&nbsp;<div class="{CLASS_PAGE_BOOKS}"><a href="books.php">{MENU_BOOKS}</a></div></div></li>
</ul>
</li>
...

Um es gleich dazu zu sagen: Ich habe keinen blassen Schimmer von CSS, daher kann ich nur vermuten, dass so Notationen wie ul#menubar li ul das Element identifizieren, dass unterhalb der unordered list "menubar" in einem list item wieder eine unordered list definieren, und dass das :hover bedeutet, dass an dem list item ein mouse hover festgestellt wurde.

Gut, soweit klappt es auch, Maus über den kategorienamen, das Menu klappt auf und man kann auf den entsprechenden Link klicken, aber beim Laden der neuen Seite wird das menu wieder im Urzustand (d.h. alle Kategorien eingeklappt) dargestellt. Es wäre schön, wenn aber die Kategorie, zu der die gewählte Webseite gehört, ausgeklappt würde. Ist das ziemlich einfach möglich, oder muss man hier dann einen sehr großen Umweg machen?

Vielleicht reicht es ja auch aus, mir einfach die Stichworte zu nennen, nach denen ich googeln kann, denn mir fällt nicht ein, mit welchen Stichworten ich eine Suche nach "HTML dynamisch Menu" noch weiter eingrenzen kann, ohne mich durch weitere 1000 Seiten klicken zu müssen, die alle nur das aufpoppen beschreiben und die verschiedenen Style-Auswahlen

Danke erstmal
Martin Dietz

[Falk Prüfer]

Hallo,

prinzipiell ist es recht einfach. Du mußt lediglich im PHP das "gerade aktuelle" Menü mit einem class-Attribut versehen (z.B. current). Im CSS kannst du dann einen entsprechenden Selektor hinzufügen, der dieses genauso behandelt wie beim Überfahren mit der Maus.

[highlight=css]
...
ul#menubar li:hover > ul,
ul#menubar li.current > ul {
display:block;
position:relative;
top:0;
left:10;
}
...
[/highlight]

Gruß Falk

[M.Dietz]

Wenn ich das richtig verstanden habe, müsste ich den li-Eintrag "normal_operation" mit einem class-Attribut versorgen.

Die derzeitige Menu.php (Das Skript, das aus dem Menu-Template den HTML-Code macht, der in die Seite integriert wird) identifiziert zur Zeit den aktuellen Menüeinrag über eine in der php-Seite angegebene ID und setzt im entsprechenden div-Eintrag im Menü das CLASS-Attribut entweder auf "archivelink" oder auf "activearchivelink".
Die entsprechende Struktur sieht dann hinterher also so aus:

[highlight=xml]
<div id="sideMenu">
<ul id="menubar">
<li id="normal_operation">Normal mode operation
<ul>
<li><div>&nbsp;&nbsp;&nbsp;<div class="archivelink"><a href="sample.php">Show reading sample</a></div></div></li>
<li><div>&nbsp;&nbsp;&nbsp;<div class="activearchivelink"><a href="books.php">Show available books</a></div></div></li>
</ul>
</li>
<li id="member_operation">Ordering and profile
<ul>
<li><div>&nbsp;&nbsp;&nbsp;<div class="archivelink"><a href="profile.php">Edit profile</a></div></div></li>
<li><div>&nbsp;&nbsp;&nbsp;<div class="archivelink"><a href="ordering.php">View last orders</a></div></div></li>
</ul>
</li>
...
</ul></div>
[/highlight]

Kann ich das CLASS-Attribut des im tieferen <li> liegenden divs auch nutzen, oder muss ich beim Erzeugen des Eintrags für die Menükategorie das Template solange auslesen, bis ich entweder auf den nächtsen {MENU_HEADER_...}-Eintrag stoße oder die ID gefunden habe, um damit festzustellen, ob das aktuelle Menü das aktive ist? Ich kann natürlich der entsprechenden Seite auch mitgeben, zu welchem Menu sie gehört und dementsprchend den li-Eintrag der Menükategorie mit einem CLASS-Attrribut versehen, dann müsste ich aber das immer wieder umändern, wenn umstrukturiert wird. Und außerdem (ist zwar noch nicht angedacht kann aber auch noch kommen) kann je nach Anwendungsfall die Menüstruktur ganz anders aussehen, so dass z.B. derselbe Menüeintrag bei Standardkunden oder bei Premiumkunden in unterschiedlichen Menükategorien liegen kann.

Oder anders ausgedrückt: kann ich per CSS auch ein Element anhand der CLASS-Eigenschaften eines seiner Kinder formatieren?

Gruß
Martin

[Falk Prüfer]

...Oder anders ausgedrückt: kann ich per CSS auch ein Element anhand der CLASS-Eigenschaften eines seiner Kinder formatieren?

Einfache, kurze Antwort: Nein!

Gruß Falk