Verzweigtes Menu in html erstellen

[CHris08156]

Hi!

Ich möchte ein Menu mit Untermehnues erzeugen.

dazu habe ich in php ein array angelegt, welches für jeden menupunkt den angezeugten namen, href und evtl. ein array mit einem untermenu enthält, welches wiederrum ein untermenu enthalten kann, usw.

Also praktisch ein mehrdimensionales, geschachteltes array.

Das auslesen klappt auch ganz gut.

aber ich weiß nicht, wie ich es am sinnvollsten in html darstelle.

momentan sieht es so aus:

css-script:

  div#Menu {

    float: left; width: 15em;

  }

  div#Menu ul {

    float: left; width: 15em;

    margin: 0 0; padding: 0;

  }

  div#Menu li {

    list-style: none;

    margin: 1px; padding: 0.5em;

    background-color: #4A4B4F;

  }


  div#Menu p {

    margin: 0 3em; padding: 0.5em;

  }

html-script

  <div id="Menu">

    <ul>


<li><a href="./index.html">Home & News</a></li>

<li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li>

<li><a href="./tcl-projects.html">Tcl Projekte</a></li>

<p>

<li><a href="./tcl-projects.html">4 Gewinnt</a></li>

<li><a href="./tcl-projects.html">Chess</a></li>

<li><a href="./tcl-projects.html">Screen</a></li>

<li><a href="./tcl-projects.html">Tetris</a></li>

<li><a href="./tcl-projects.html">Space</a></li>

</p>

<li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li>


    </ul>

  </div>

Ich dachte eigentlich, dass durch den tag <p> das untermenu etwas eingerückt wird.

Wird es aber leider nicht. warscheinlich weil ich für <li> ein css-style gesetzt habe.

aber ich wollte auch nicht für jede ebene ein css-style vergeben.

Ich dachte mir, wenn ich in eine neue ebene komme, lege ich einen neuen <p> an und der ist dann automatisch (siehe css-style) etwas eingerückt.

[xmurrix]

Hallo CHris08156,

ein Untermenü sollte innerhalb eines Listenelementes (<li>) untergebracht sein, und auch am besten als eine neue Liste, also:

<div id="Menu">

<ul>

	<li><a href="./index.html">Home & News</a></li>

	<li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li>

	<li><a href="./tcl-projects.html">Tcl Projekte</a></li>

	<li>

		<ul>

			<li><a href="./tcl-projects.html">4 Gewinnt</a></li>

			<li><a href="./tcl-projects.html">Chess</a></li>

			<li><a href="./tcl-projects.html">Screen</a></li>

			<li><a href="./tcl-projects.html">Tetris</a></li>

			<li><a href="./tcl-projects.html">Space</a></li>

		</ul>

	</li>

	<li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li>

</ul>

</div>

Gruß,

xmurrix

[CHris08156]

Das Problem dabei ist, dass durch mein css-style, alle ul-elemente den rand 0 haben.

dass heißt, das neue elemente nicht mehr eingerückt werden.

deshalb wollte ich mit <p> weiter einrücken.

mit <blockquote> funktioniert es (auch ohne neue liste <ul>).

aber dann ist der abstand so groß. Kann man den wiederum etwas kleiner machen?

Ich hab mal ein Bild angehängt, wie es in etwa aussehen soll.

[Aiun]

dann mach für das Sub-UL eine neue CSS-Klasse und mach da einen Rand rein

[CHris08156]

Ich wollte ja nicht für jede Untermenu-ebene einen neuen style machen.

gehts nicht anders.

wie schon geschrieben, ich habs mit <blockquote> fast hinbekommen.

nur wie kann ich da den abstand ändern?

[CHris08156]

Was haltet ihr von folgendem code?

css-script

  .indented

   {

   margin-left: 3em;

   }

html-script

  <div id="Menu">

    <ul>


<li><a href="./index.html">Home & News</a></li>

<li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li>

<li><a href="./tcl-projects.html">Tcl Projekte</a></li>

	<div class="indented">

		<li><a href="./tcl-projects.html">4 Gewinnt</a></li>


		<div class="indented">

			<li><a href="./tcl-projects.html">sub 4 Gewinnt</a></li>

		</div>


	<li><a href="./tcl-projects.html">Chess</a></li>

	<li><a href="./tcl-projects.html">Screen</a></li>

	<li><a href="./tcl-projects.html">Tetris</a></li>

	<li><a href="./tcl-projects.html">Space</a></li>

</div>

<li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li>


    </ul>

  </div>

dadurch bin ich nicht an eine bestimmte menge ebenen gebunden sondern kann teoretisch unendlich viele erzeugen (auch wenn man es bei 3-5 belassen sollte)

und es ist wenig code!

[bmg4ever]

in welchem browser hast du dir das angesehen? Im IE z.b. siehts grauenhaft aus. Das wird nur korrekt dargestellt, wenn du es wie folgt machst:

  <div id="Menu">

    <ul>


<li><a href="./index.html">Home & News</a></li>

<li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li>

<li><a href="./tcl-projects.html">Tcl Projekte</a></li>

	<div class="indented">

                  [B]<ul>[/B]

		<li><a href="./tcl-projects.html">4 Gewinnt</a></li>


		<div class="indented">

                                 [B]<ul>[/B]

			<li><a href="./tcl-projects.html">sub 4 Gewinnt</a></li>

                                 [B]</ul>[/B]

		</div>


	<li><a href="./tcl-projects.html">Chess</a></li>

	<li><a href="./tcl-projects.html">Screen</a></li>

	<li><a href="./tcl-projects.html">Tetris</a></li>

	<li><a href="./tcl-projects.html">Space</a></li>

         [B]</ul>[/B]

</div>

<li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li>


    </ul>

  </div>

dann musst du nur noch die margin etwas justieren.

prinzipiell gehts also, wobei ich nicht ausschließen möchte, dass man das auch mit ohne die div's direkt über ul's hinbekommt, aber sicher bin ich mir da nicht.

[xmurrix]

Also,

so ist's auf jeden Fall nicht richtig (nicht valides HTML/XHTML), eher folgendermaßen:

CSS:

div#Menu .indented{margin-left:3em;}

HTML:

<div id="Menu">

<ul>

	<li><a href="./index.html">Home & News</a></li>

	<li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li>

	<li><a href="./tcl-projects.html">Tcl Projekte</a></li>

	<li>

		<ul class="indented">

			<li><a href="./tcl-projects.html">4 Gewinnt</a></li>

			<li><a href="./tcl-projects.html">Chess</a></li>

			<li><a href="./tcl-projects.html">Screen</a></li>

			<li>

				<ul class="indented">

					<li><a href="./tcl-projects.html">4 Gewinnt</a></li>

					<li><a href="./tcl-projects.html">Chess</a></li>

					<li>

						<ul class="indented">

							<li><a href="./tcl-projects.html">4 Gewinnt</a></li>

							<li><a href="./tcl-projects.html">Chess</a></li>

							<li><a href="./tcl-projects.html">Screen</a></li>

							<li><a href="./tcl-projects.html">Tetris</a></li>

							<li><a href="./tcl-projects.html">Space</a></li>

						</ul>

					</li>

					<li><a href="./tcl-projects.html">Screen</a></li>

					<li><a href="./tcl-projects.html">Tetris</a></li>

					<li><a href="./tcl-projects.html">Space</a></li>

				</ul>

			</li>

			<li><a href="./tcl-projects.html">Tetris</a></li>

			<li><a href="./tcl-projects.html">Space</a></li>

		</ul>

	</li>

	<li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li>

</ul>

</div>