Zum Inhalt springen

Verzweigtes Menu in html erstellen


CHris08156

Empfohlene Beiträge

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

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

Link zu diesem Kommentar
Auf anderen Seiten teilen

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.

post-25835-14430447246272_thumb.jpg

Link zu diesem Kommentar
Auf anderen Seiten teilen

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!

Link zu diesem Kommentar
Auf anderen Seiten teilen

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

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>

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...