Zum Inhalt springen

Menü verschachteln

Erstellt am 9. September 2005 · 8 Antworten · letzte Antwort am 9. September 2005

Tags: Frage

dms ·

Hallo, ich möchte gerne ein in Listen verschachteltes Menü erstellen. Das bekomme ich jedoch nur teilweise hin.

Folgendes Setup habe ich hier:

   marks.MENUE = HMENU
   marks.MENUE.1 = TMENU
   marks.MENUE.1 {
      expAll = 1
      NO.allWrap = <li>|</li>
      ACT.allWrap = <li>|</li>
   }

   marks.MENUE.2 = TMENU
   marks.MENUE.2 {
      expAll = 1
      wrap= <ul>|</ul>
      NO.allWrap = <li>|</li>
      ACT.allWrap = <li>|</li>
   }

Daraus erstellt sich dann (in vereinfachter Form) folgendes Konstrukt:

        <li>Link 1</li>
        <ul>
           <li>Link 1.1</li>
           <li>Link 1.2</li>
           <li>Link 1.3</li>
           <li>Link 1.4</li>
        </ul>
        <li>Link 2</li>
        <li>Link 3</li>

Dies ist ja nun kein gültiges HTML. Das verschachtelte <ul>-Element müsste inerhalb des ersten <li>-Elements angeordnet sein. Also so:

        <li>
           Link 1
           <ul>
              <li>Link 1.1</li>
              <li>Link 1.2</li>
              <li>Link 1.3</li>
              <li>Link 1.4</li>
           </ul>
        </li>
        <li>Link 2</li>
        <li>Link 3</li>

Könnte mir vlt. jemand an einem Beispiel kurz zeigen wie sowas zu machen ist?

Liebe Grüsse,

Daniel

ben ·

Du meinst genau andersrum, die LI-Elemente müssen zwischen die UL..
Versuchs mal so:

marks.MENUE = HMENU
marks.MENUE.1 = TMENU
marks.MENUE.1.wrap = <ul>|</ul>
marks.MENUE.1 {
      expAll = 1
      NO.allWrap = <li>|</li>
      ACT.allWrap = <li>|</li>
}

marks.MENUE.2 = TMENU
marks.MENUE.2.wrap = <ul>|</ul>
marks.MENUE.2 {
      expAll = 1
      NO.allWrap = <li>|</li>
      ACT.allWrap = <li>|</li>
}

ps.: habe es nicht getestet, war mal so aus dem Kopf raus..

Grüße,
Ben

dms ·

Hi ben,

danke für die Antwort (mal wieder 😉). Aber so einfach ist es leider nicht. Nach meinem Verständniss hast Du ja jetzt nur ein weiteres <ul> um die erste Menüeben gelegt. Das ist natürlich richtig. Dieses <ul> habe ich bei mir direkt in der Designvorlage. Das hätte ich vielleicht zum besseren Verständniss erwähnen sollen.

Mein Problem ist dass dieses TS kein gültigen HTML-Code erzeugt, da unter einem <ul> nicht direkt wieder ein <ul> kommen kann. Die tieferliegenden Menüebenen müssten inerhalb des <li>-Elements des Hauptpunktes liegen.

So ist die derzeitige Ausgabe, was aber falsch ist:

  <ul>
     <li>Link 1</li>
     <ul>
        <li>Link 1.1</li>
        <li>Link 1.2</li>
        <li>Link 1.3</li>
        <li>Link 1.4</li>
     </ul>
     <li>Link 2</li>
     <li>Link 3</li>
  </ul>

Das schliessende <li>-Element von Link 1 müsste hinter dem untergeordneten <ul>-element stehen.

Ich weis jedoch überhaupt nicht wie ich dies lösen soll.
In einem anderen Thread habe ich eine Antwort zur gleichen Frage gefunden. Jedoch übersteigt die mein Können derzeit gewaltig. 😉

Niki hat da geschrieben dass man mit "option split", CUR, ACT, ACTIVESUB, wrap und wrapItemAndSub arbeiten muss.

wrapItemAndSub hört sich sehr vielversprechend an. Man müsste nur irgendwie abfragen können ob der aktuelle Menüpunkt Unterseiten besitzt.

ben ·

Warum machst du denn in der 2. Ebene überhaupt noch ein UL drum herum?
Wenn du es weglässt, sollte doch die Ausgabe wie folgt aussehen:

<ul>
     <li>Link 1</li>
        <li>Link 1.1</li>
        <li>Link 1.2</li>
        <li>Link 1.3</li>
        <li>Link 1.4</li>
     <li>Link 2</li>
     <li>Link 3</li>
 </ul>

Wenn du also den Code im Setup so einrichtest:

marks.MENUE.2 = TMENU
marks.MENUE.2 {
expAll = 1
NO.allWrap = <li>|</li>
ACT.allWrap = <li>|</li>
}

Hast du das UL weg..
Wenn du nun noch möchtest, dass deine Untermenupunkte weiter eingerückt werden, dann mach doch vor das | einfach noch ein

& n b s p ;

davor. musst natürlich zusammenschreiben, aber wenn ich das hier so mache, dann kannst es nicht mehr lesen, sondern er macht ein leerzeichen draus 🙂

Da ich nicht weiss, wie dein Menu letztendlich aussehen soll, ist es etwas schwer dir zu helfen :o

dms ·

Für's rein optische würde das ausreichen. Aber mir geht es um die Logik dahinter. Mit dieser Variante befinden sich Menü-Unterpunkte an der gleichen Stelle im DOM wie Hauptpunkte. Das macht auch die Gestaltung per CSS ziemlich unmöglich. Natürlich könnte man noch Klassen verteilen etc. aber das ist ja nun nicht so schön.

Wie das Menü im Endeffekt aussehen soll kann ich nicht eindeutig beantworten. Ich suche eigentlich nach einer allgemeingültigen Lösung. Das Design kommt dann ausschliesslich per CSS dazu.

Ein Beispiel ist z.B. hier zu sehen: http://www.seoconsultants.com/css/menus/tutorial/

ben ·

Naja, die Gestaltung per css kannst du trotzdem ganz einfach machen, indem du Klassen vergibst.

Das Menu auf der von dir gezeigten Seite ist glaube ich schon ein gutes Stück aufwendiger.

Hier wirst du um den gebrauch der Begriffe IFSUB etc nicht herum kommen.

dms ·

IFSUB hört sich vom Namen auch interessant an. Laut Referenz ist das ein Menü-Zustand wie NO und ACT.

Nur wie verwendet man diesen Zustand?

Ich habe folgendes in der 2. Ebene versucht:

IFSUB.allWrap = <ul>|</ul>
NO.allWrap = <li>|</li>
ACT.allWrap = <li>|</li>

Doch das hatte keine Auswirkungen.

ben ·

Kenne mich damit auch nicht so gut aus..
Müsste von nun an genauso suchen und probieren wie du auch.. sorry :o
Evtl kann dir hier jmd helfen, der schonmal so ein Menu gebastelt hat