Hallo alle zusammen,
ich habe einen HTML-Code, der die Struktur des Akkordeon-Menus evtl. schon erkennen lässt.
Vorne Weg will ich kurz schildern, was mir wichtig ist:
Das Menu hat eine Hauptleiste (class: "MB") darunter können sich Links (class: "TL") oder Menueinträge (class: "MTP") in Form von weiteren Akkordioneinträgen verstecken. In Tags mit der class "MTP" können weitere Links (class: "MTPTL") oder Kategorien (class: "KTP") in Form von weiteren Akkordioneinträgen stecken. Die Zielebene ist in der Kategorie versteckt. Hier werden sich dann ausschließlich Links (class: "KTL") befinden.
Prozedur:
Menu > Klick öffnet das Menu (Ebene 0) mit einer Liste der Klassen "TL" und "MTP".
TL > Klick führt zu einer neuen Seite (Ziel-Link).
MTP > Klick öffnet eine weitere Liste (Ebene 1), die entweder oder sowohl als auch Tags mit den Klassen "MTPL" und oder "KTP" listet.
MTPTL > Klick führt auf eine neue Seite (Ziel-Link).
KTP > Klick öffnet eine Liste (Ebene 3) mit Links, die der Klasse "KTL" angehören.
KTL > KTL ist die Zielebene. Ein Klick führt auf eine neue Seite (Ziel-Link).
Es sind 3 Ebenen.
HTML-Code:
Meinen CSS-Code habe ich in die Tonne geklopft. Er war ziemlich buggy.
Ich benötige hier anscheinend einer Art "How to". Ich komme nicht zurecht mit den Selectoren und den Pseudoklassen in Verbindung mit den dafür vorgesehenen Tags, IDs, Klassen wie auch immer.
Ich erarbeite mir zwar viel selber aber irgend wann, so scheint es, ist es sinnvoller um ein Bsp. zu bitten was sich an oben geschriebenen HTML-Schnipsel orientiert. Ich habe auch schon bei W3C und selfhtml.org alle Einträge dazu durch gelesen. Aber wie man sieht ohne Erfolg. Der Lichtschalter-Effekt fehlt bei mir fast gänzlich.
Wie gesagt, bitte ich um ein Bsp. was sich am oben geschriebenen HTML Orientiert. Ich würde Euch das ewig Danken. Es wäre super wenn es in sofern Dokumentiert wäre, das ich es nachvollziehen kann, was wann und wo passiert.
ich habe einen HTML-Code, der die Struktur des Akkordeon-Menus evtl. schon erkennen lässt.
Vorne Weg will ich kurz schildern, was mir wichtig ist:
Das Menu hat eine Hauptleiste (class: "MB") darunter können sich Links (class: "TL") oder Menueinträge (class: "MTP") in Form von weiteren Akkordioneinträgen verstecken. In Tags mit der class "MTP" können weitere Links (class: "MTPTL") oder Kategorien (class: "KTP") in Form von weiteren Akkordioneinträgen stecken. Die Zielebene ist in der Kategorie versteckt. Hier werden sich dann ausschließlich Links (class: "KTL") befinden.
Prozedur:
Menu > Klick öffnet das Menu (Ebene 0) mit einer Liste der Klassen "TL" und "MTP".
TL > Klick führt zu einer neuen Seite (Ziel-Link).
MTP > Klick öffnet eine weitere Liste (Ebene 1), die entweder oder sowohl als auch Tags mit den Klassen "MTPL" und oder "KTP" listet.
MTPTL > Klick führt auf eine neue Seite (Ziel-Link).
KTP > Klick öffnet eine Liste (Ebene 3) mit Links, die der Klasse "KTL" angehören.
KTL > KTL ist die Zielebene. Ein Klick führt auf eine neue Seite (Ziel-Link).
Es sind 3 Ebenen.
HTML-Code:
HTML:
<nav ID="1" class="nav">
<ul id="2" class="ulMB"> <!--UnordertListe Menu-->
<li id="3" class="liMB"> <!--liMB = Liste Menu-->
<input type="checkbox" name="MB" id="4" class="akkordeon" checked> <!--MB = Menu-->
<label for="4" id="5" class="al"> <!--al = arkordion label-->
<section id="6" class="MB">
Menu <!--Unter desem Punkt sollen sich alle anderen bis zum status checked verstecken-->
</section>
</label>
<ul id="7" class="ulMP"> <!--ulMP = UnordertListe MenuPunkte-->
<li id="8" class="liMP"> <!--liMP = Liste MenuPunkte-->
<a href="#" class="TL"> <!--TL = TargetLink-->
Ziel-Link <!--Ein Ziel-Link der direkt unterhalb der id="6" anzutreffen ist-->
</a>
</li>
<li id="9" class="liMP"> <!--liMP = Liste MenuPunkte-->
<input type="checkbox" name="HMP" id="10" class="akkordeon" checked> <!--HMP = HauptMenuPunkte-->
<label for="9" id="11" class="al"><!--al = akkordeon label-->
<section id="12" class="MTP"> <!--MTP = MenuTargetPunkt-->
Hauptmenupunkt <!--Ist ein weiterer Akkordion-Mechanismuss, der Ziellinks oder weitere Akkordionpunkte (Kategorien) aufnehmen kann.-->
</section>
</label>
<ul id="13" class="ulK"> <!--ulK = UnordertListe Kategorie-->
<li id="14" class="liK"> <!--liK = Liste Kategorie-->
<input type="checkbox" name="K" id="15" class="akkordeon" checked> <!--K = Kategorie-->
<label for="15" id="16" class="al"> <!--al = akkordeon label-->
<span id="17" class="KTP"> <!--KTP = KategorieTargetPunkt-->
Kategorie <!--Ist ein weiterer Akkordion-Mechanismuss, der ausschlislich Ziellinks aufnehmen kann.-->
</span>
</label>
</li>
<ul id="18" class="ulTL"> <!--ulTL = UnordertListe TargetLink-->
<li id="19" class="liTL"> <!--liTL = Liste TargetLink-->
<a href="#" class="KTL"> <!--TL = TargetLink-->
Ziel-Link <!--Ein Ziel_Link direkt unterhalb der id="17" anzutreffen ist-->
</a>
</li>
</ul>
</ul>
<ul id="20" class="ulTL"> <!--ulTL = UnordertListe TargetLink-->
<li id="21" class="liTL"> <!--liTL = Liste TargetLink-->
<a href="#" class="MTL"> <!--MTPTL = MenuTargetPunkt-TargetLink-->
Ziel-Link <!--Ein Ziel-Link direkt unterhalb der id="12" anzutreffen ist-->
</a>
</li>
</ul>
</li>
</ul>
</br>
</li>
</ul>
</nav>Meinen CSS-Code habe ich in die Tonne geklopft. Er war ziemlich buggy.
Ich benötige hier anscheinend einer Art "How to". Ich komme nicht zurecht mit den Selectoren und den Pseudoklassen in Verbindung mit den dafür vorgesehenen Tags, IDs, Klassen wie auch immer.
Ich erarbeite mir zwar viel selber aber irgend wann, so scheint es, ist es sinnvoller um ein Bsp. zu bitten was sich an oben geschriebenen HTML-Schnipsel orientiert. Ich habe auch schon bei W3C und selfhtml.org alle Einträge dazu durch gelesen. Aber wie man sieht ohne Erfolg. Der Lichtschalter-Effekt fehlt bei mir fast gänzlich.
Wie gesagt, bitte ich um ein Bsp. was sich am oben geschriebenen HTML Orientiert. Ich würde Euch das ewig Danken. Es wäre super wenn es in sofern Dokumentiert wäre, das ich es nachvollziehen kann, was wann und wo passiert.
