textbasierte Navigationsleiste

[Gunnar]

Hallo,

ich möchte nur eine einfache Menüleiste mit beliebig vielen Untermenüs erstellen, wie im Explorer ohne Grafik, sondern nur Text.
Etwa so:

Hauptmenü1

Untermenü1
 Untermenü2

Unteruntermenü1

Hauptmenü2

Untermenü

Hauptmenü3

Wie sollte ich vorgehen ?
Danke für Eure Hilfe !

Gruss
Gunnar

[Danny]

Hi Gunnar,

ich mache das meistens so, wobei die Punkte dann später durch Links ersetzt werden :

<span id="menu-1">
 <ul class="root">
  <li>Punkt 1</li>
  <ul class="lev-1">
   <li>Punkt 1.1</li>
   <ul class="lev-2">
    <li>Punkt 1.1.1</li>
    <li>Punkt 1.1.2</li>
    <li>Punkt 1.1.3</li>
   </ul>
   <li>Punkt 1.2</li>
   <ul class="lev-2">
    <li>Punkt 1.2.1</li>
    <li>Punkt 1.2.2</li>
   </ul>
   <li>Punkt 1.3</li>
   <ul class="lev-2">
    <li>Punkt 1.3.1</li>
   </ul>
  </ul>
 </ul>
</span>

[Jeena Paradies]

Hallo,

http://selfhtml.teamone.de/html/text/listen.htm#definition
Ich würde es mit verschachtelten Definitionslisten machen.

Grüße
<img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

[at]

Hallo.

Ich würde es mit verschachtelten Definitionslisten machen.

Kannst du dies kurz begründen und die Vorgehensweise erläutern. Bei Definitionslisten enthält ja jeder Listenpunkt zwei Teile, von denen ich im konkreten Fall aber nur einen genutzt sehe.
MfG, at

[at]

Hallo.

Kannst du dies kurz begründen und die Vorgehensweise erläutern. Bei Definitionslisten enthält ja jeder Listenpunkt zwei Teile, von denen ich im konkreten Fall aber nur einen genutzt sehe.

Ich habe gerade in einem anderen Beitrag gelesen, wie auch du dir wahrscheinlich deine Lösung vorstellst. Damit ziehe ich meinen Antrag auf Erläuterung zurück ;-)
Allerdings war ich nicht von einer Nummerierung ausgegangen, sondern von einer begrifflichen Unterordnung. Aber dies wird der Fragesteller sicher selbst am besten wissen.
MfG, at

[Jeena Paradies]

Hallo,

Ich habe gerade in einem anderen Beitrag gelesen, wie auch du dir wahrscheinlich deine Lösung vorstellst. Damit ziehe ich meinen Antrag auf Erläuterung zurück ;-)

Genau so habe ich es auch gedacht, und falls er mit dem Link nicht klar gekommen wäre, hätte ich ihm warscheinlich nicht ganz so ausfühlich geantwortet, aber so ungefär wie in dem Beitrag oben.

Grüße
<img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

[Thomas Luethi]

Hallo,

Der Vorschlag mit den verschachtelten Listen ist gut,
besonders, wenn man mehr als 2 Hierarchie-Ebenen hat.

Aber:

<span id="menu-1">
<ul class="root">
<!-- u.s.w. -->
</ul>
</span>

ist nicht valide.

SPAN ist ein Inline-Element, UL ist ein Block-Level-Element.
SPAN darf deshalb keine UL enthalten.
Wenn schon ein DIV statt ein SPAN.

Und auch die Verschachtelung der UL- und LI-Elemente ist falsch.
<ul> darf nicht direkt <ul> enthalten, sondern nur <li>.

---

Ein DIV ist allerdings meist gar nicht notwendig.
Es ist ein alter Anfaenger-Aberglaube, dass man CSS
nur in Verbindung mit DIVs und SPANs verwenden koenne.

Auch die Klassennamen in all den Unterlisten sind voellig ueberfluessig.

Es reicht, der aeussersten Liste eine Klasse oder ID zu geben,
und fuer die Unterlisten den Selektor via Verschachtelung zu definieren:
HTML:
<ul class="menue">
  <li>Punkt 1
    <ul>
        <li>Punkt 1.1</li>
        <li>Punkt 1.2</li>
    </ul>
  </li>
  <li>Punkt 2</li>
  <!-- u.s.w. -->
</ul>

CSS:
ul.menue { ... }
ul.menue ul { ... }
ul.menue ul ul { ...}
Siehe: http://selfhtml.teamone.de/css/formate/zentrale.htm
insbesondere den Abschnitt:
http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente

Gruesse,

Thomas

[Danny]

Danke für Deine Hinweise und Tipps, werde mich mal damit beschäftigen!

Der Code stammt aus einem Hack, an dem ich gerade arbeite. Das span brauche ich, um die tatsächlichen Maße, z.B. Breite (in Pixeln) der Struktur zu ermitteln, daher auch span wg. inline-Element... Das ist für ein Experiment, daher auch die class, bzw. id's. Die Struktur soll, wenn JS an ist und auf DOM zugegriffen werden kann, dynamisch umgeformt werden um daraus ein voll dynamisches Ausklapp-Menü zu erstellen. Bisher ist das allerdings rein theoretisch, es ist sind noch eine Menge Probleme zu lösen ;)

MfG

[Leo]

Hallo Danny!
An deiner stelle würd ichs so machen:

<html>
<head>
  <title>Text des Titels</title>
</head>
<body>
  <dl>
     <dt>1</dt>
     <dd>Punkt 1</dd>
       <dl>
          <dt>1.2</dt>
          <dd>Unterpunkt 1</dd>
          </dl>
          <dt>2</dt>
     <dd>Punkt 2</dd>
        <dl>
           <dt>2.1</dt>
           <dd>Unterpunkt 1</dd>
           <dt>2.2</dt>
           <dd>Unterpunkt 2</dd>
        </dl>
  </dl>
</body>
</html>

Gruß,
Leo

[Leo]

Hallo,
wenn ich dich richtig verstehe, wills du eine Auflistung haben:

<html>
 <head>
  <title>Liste</title>
 </head>
 <body>

<ol>
   <li><a href="hauptmenu1">Hauptmenü 1</a></li>
     <ol>
       <li><a href="untermenu1">Untermenü 1</a></li>

<!-- weitere Listenelemente  -->

</ol>
   <li><a href="hauptmenu2">Heuptmenü 2</a></li>

<!-- weitere Listenelemente  -->
  </ol>

</body>
</html>

<ol> gibt eine "ordered List" an. Das ist eine Liste mit Zahlen:
1. Hauptmenü 1
  1. Untermenü 2
  2. Untermenü 2
2. Hauptmenü 2
usw.
Stattdessen kanst du auch <ul> schreiben, eine Bulletlist. Dabei erscheinen statt Zahlen Kügelchen vor dem Wort (bullets).
<li> bedeutet Listenelement. Das ist dann einer der Punkte (oder Unterpunkte) der Liste.

<ol>
<li><a href="hauptmenu1">Hauptmenü 1</a></li>
<li><a href="hauptmenu2">Hauptmenü 2</a></li>
</ol>
gibt also an:

1. Hauptmenü 1
2. Hauptmenü 2

weiterführender Verweis:
http://selfhtml.teamone.de/html/text/listen.htm

Ich hoffe es hilft weiter,
Leo