Camping_RIDER: Problem mit Menü (bzgl. "position: fixed")

Beitrag lesen

Aloha ;)

Eigentlich muss in jedem dieser Elemente, im Defintionsbereich, eine kleine IF-PHP-Schleife stehen.

Für die erste Untermenüebene:

if ($menu!="aktiv") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

Für die zweite Untermenüebene entsprechend:

if ($menu!="aktiv2") {echo "class=\"aufgeklappt\"";} else {echo "class=\"zugeklappt\""}

Im CSS werden dann entsprechend die beiden Klassen

.aufgeklappt {display: block;}

und

.zugeklappt {display: none;}

definiert.

Das nur so als erste Idee... bin ich auf dem richtigen Weg damit?

Ja und Nein. Die if-Abfrage ist richtig, die Geschichte mit den Klassen nicht. Bedenke: ob auf- oder zugeklappt entscheidet keine Klasse, sondern der Status der Radiobuttons.

Du hast also die folgende Struktur in php:

echo '<ul>';  
  
echo '<li><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"';  
  
if ( $menu == "aktiv") {  
    echo " checked";  
}  
  
echo '><label for="navi_1_1">+/-</label>&nbsp;<a href="...">Linktext</a>';  
  
echo '<ul>'  
  
...  
  
echo '</ul></li>';  
  
...  
  
echo '</ul>';  

navi_1 weil Untermenü, navi_2 wäre Unter-Untermenü...

CSS:

.hackbox {display:none;}  
  
ul ul { display:none; }  
  
.hackbox:checked ~ ul { display:block; }  

Du erhältst: Alle ul, die in einer ul stehen, sind ausgeblendet. Alle ul, die neben einer angewählten .hackbox stehen, sind eingeblendet. Das Anwählen der .hackbox erfolgt über das Anklicken des Labels, die Radiobuttons selbst sind unsichtbar.

In einer verbesserten Version kannst du diese Label statt mit langweiligem +/- mit einem div versehen, das ein Hintergrundbild per CSS bekommt: Je nachdem, ob das Submenü offen oder geschlossen ist, ein Bild mit nem + oder eins mit nem -.

Noch eins - mach dir Gedanken über Effizienz. Die Navi aus einzelnen php-Segmenten zusammenbauen zu lassen, die du alle in Handaebeit schreibst, ist nicht sinnvoll. Bilde stattdessen besser deine Navigationsstruktur in einem multidimensionalen Array ab und lass deine Navigation daraus in einem Zusammenspiel aus rekursiven Funktionen und Schleifen erstellen. Wenn du das nicht eh schon machst und den Code hier nur eingestampft hast ;)

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[