HTML - vertikales Menu nur mit HTML und CSS (kein JS o. PHP)

[Fightmeyer]

Hallo Leute,

nachdem ich nun google gequält habe und nichts brauchbares fand, frag ich einfach mal in die Runde.

Ich möchte in eine HTML-Seite ein vertikales Navigationsmenu integrieren.

- Das ganze hat maximal 2 Ebenen.
- der Klick auf ein Element der ersten Ebene kann entweder direkt einen Link aufrufen oder bewirken, dass die Elemente der 2. Ebene eingeblendet werden
- die Elemente der 2. Ebene sollen nicht eingerückt dargestellt werden, sondern bündig und direkt unter denen der ersten Ebene

Das ganze soll nach Möglichkeit ohne JS auskommen. Ich habe zwar einige Varianten im Netz gefunden, aber die arbeiteten nur mit einem Hovereffekt, so dass die Elemente der 2. Ebene nur so lange sichtbar waren, wie die Maus über dem Element der 1. Ebene war. Das möchte ich nicht.

Hat jemand von euch ne Idee, wie man das machen kann bzw, ob das überhaupt geht?

[Beowulf]

Ich glaube nicht dass dies funktioniert. Hast du wirklich so viele Menüpunkte, dass diese nicht untereinander in eine Spalte passen? Ich mein, du kannst die ja trotzdem Gruppieren (mit verschachtelten unsortierten Listen, die man mit CSS ja entsprechend formatieren kann).

[sinus]

Hallo Leute,

nachdem ich nun google gequält habe und nichts brauchbares fand, frag ich einfach mal in die Runde.

Ich möchte in eine HTML-Seite ein vertikales Navigationsmenu integrieren.

- Das ganze hat maximal 2 Ebenen.
- der Klick auf ein Element der ersten Ebene kann entweder direkt einen Link aufrufen oder bewirken, dass die Elemente der 2. Ebene eingeblendet werden
- die Elemente der 2. Ebene sollen nicht eingerückt dargestellt werden, sondern bündig und direkt unter denen der ersten Ebene

Das ganze soll nach Möglichkeit ohne JS auskommen. Ich habe zwar einige Varianten im Netz gefunden, aber die arbeiteten nur mit einem Hovereffekt, so dass die Elemente der 2. Ebene nur so lange sichtbar waren, wie die Maus über dem Element der 1. Ebene war. Das möchte ich nicht.

Hat jemand von euch ne Idee, wie man das machen kann bzw, ob das überhaupt geht?

Geht allet! Wie gesagt:
Verschachtelte Listen und per CSS entsprechend formatieren. Bei meiner neuesten Arbeit habe ichs eingerückt dargestellt.

[Fightmeyer]

Geht allet! Wie gesagt:
Verschachtelte Listen und per CSS entsprechend formatieren. Bei meiner neuesten Arbeit habe ichs eingerückt dargestellt.

Ich bin blind. Wo isn da ne entsprechende Navileiste?

Nochmal zu meinem Problem.
Es brauchen auch nicht mehrere Subebenen angezeigt zu werden. Sobald auf ein anderes Element der Ebene 1 geklickt wird, können die anderen Subebenen ruhig wieder ausgeblendet werden, falls das einfacher ist.

Im Grunde würde mir eine kurze Codevorlage mit jeweils einem Haupt- und einem Subelement reichen (und natürlich mit entsprechendem CSS-Geraffel dazu) und den Rest bau ich mir dann selber zusammen bzw. ergänz ich.

[sinus]

Ich bin blind. Wo isn da ne entsprechende Navileiste?

Nich?
http://piano-centrum-leipzig.de/yamahagrand.html

Nochmal zu meinem Problem.
Es brauchen auch nicht mehrere Subebenen angezeigt zu werden. Sobald auf ein anderes Element der Ebene 1 geklickt wird, können die anderen Subebenen ruhig wieder ausgeblendet werden, falls das einfacher ist.

Im Grunde würde mir eine kurze Codevorlage mit jeweils einem Haupt- und einem Subelement reichen (und natürlich mit entsprechendem CSS-Geraffel dazu) und den Rest bau ich mir dann selber zusammen bzw. ergänz ich.

Guckst du im übersichtlichen Quelltext (Navi mit der ID "sub" ausgezeichnet) und dem Pendant im Stylesheet.

[Fightmeyer]

Ahh! Okay. Danke. Das probier ich morgen mal aus.

[Beowulf]

Sorry Sinus, aber das Problem wird hier durch viele verschiedene HTML-Seiten gelöst. Mit PHP ginge das auch recht einfach. Das hat mit einer zentralen CSS-Lösung aber nichts zu tun.

Das Problem ist, dass nur die Pseudoklasse :hover, welche z.B. für Dropdown-Menüs verwendet verwendet wird, für derartige Zwecke brauchbar wäre. Die Pseudoklasse :active gilt nur solange man den Mausknopf auf den Link gedrückt hält. Mit :hover wackelt bei vertikalen Menüs aber alles unkontrollierbar herum, wie Fightmeyer ja schon festgestellt hat.

PS: Sinus, das obere Menü deiner Beispielseite wird im Opera nicht hundertprozentig richtig dargestellt. Der Zubehör-Knopf wird da auf zwei Zeilen aufgeteilt.

Code: Alles auswählen

#navigation li {
  white-space: nowrap;
}

könnte da helfen. Ist halt knifflig, wenn man Listenelemente auf inline umstellt.

PPS: Lieber eine einfache Lösung suchen die auch überall gut funktioniert. So finde ich z.B. am Menü der Adventure-Treff-Startseite nichts auszusetzen, da es maximale Übersicht garantiert.

[Fightmeyer]

@Sinus

Ich hab mir das jetz mal angesehen. Alelrdings trifft es das leider gar nicht. Du hast ja für jeden "Klappzustand" ne eigene HTML. Genau so hab ich das ja bereits. Das ist aber nervig, weil man dann immer zich Seiten anpassen muss, wenn ein Link in der Navigationsleiste hinzukommt.
Bei mir ist die Navileiste ein eigener Frame, der dann den Inhalt eines anderen Frames steuert. Und da soll das mit dem Auf- und zuklappen halt in einer einzigen HTML funktionieren.
Hat dafür jemand ne Idee?

[sinus]

Hm, okay, dann hab ich das falsch verstanden aufgrund mangelnder Information . Mir macht das nichts aus, mit Notepad++ einen Befehl einzugeben, der an den entsprechenden Stellen neue Elemente auf allen Seiten einfügt. Auf PHP verzichte ich gerne, da ich offline gestalte und nicht auf jedem Rechner, an dem ich arbeite PHP-Server installieren möchte. Diese Lösung erscheint mir ein wenig bequemer und freier.

Ebenso verzichte ich schon lange auf Frames, aber das gehört ja auch mittlerweile überall zum guten Ton.


@beowulf: der Zubehör-Knopf wird wirklich aufgeteilt, à la Zube
hör
??? (hab keinen Opera installiert )

Dabei ist in genau diesem Tag kein Freizeichen, der die von dir vorgeschlagene Technik erfordert. ???
Werds aber trotzdem anwenden ... morgen.

[Beowulf]

@Sinus, im Opera siehts so aus:


Grad bei Dingen die inline deklariert sind, und die zwecks Übersicht ja ein Return-Zeichen zwischen den tags haben, wäre ich mir nie so sicher, ob diese nicht doch ganz am Anfang oder Ende umgebrochen werden. Auch hast du ja Knöpfe wie "Service & Leistungen" drin. Ich würde übrigens bei dem "&"-Zeichen das & durch & ersetzen, das ist logischer und zeichensatzunabhängiger.

@Fightmeyer: Meinst du wirklich es ist die ganze Mühe wert? Frames sind zur Seitengestaltung einfach unbrauchbar. Kommt z.B. jemand per Suchmaschine auf eine gewisse Unterseite, dann fehlt auf einmal das Menü. Und ein fehlendes Menü ist auch für eine Suchmaschine hinderlich, da sie sich dann nicht mehr so gut "weiterhangeln" kann. Willst du für irgendein "Wackelmenü" wirklich riskieren, dass deine Seite weniger Besucher bekommt und weniger in Suchmaschinen aufgelistet wird? Da ist es doch wirklich besser, so wie Sinus spezielle Funktionen des Editors zu benutzen oder sich einen Server zu suchen der PHP unterstützt.

[sinus]

Danke für den Bildschirmabdruck. Dieses Verhalten konnte ich bis jetzt so noch nicht beobachten. Normalerweise gilt ja die white-space-Angabe nur für Leerzeichen. Aber man lernt nie aus! Als Webdesigner sollte man schon den Opera installiert haben - mal sehen, das werde ich wohl morgen gleich mal tun. Gibts den inzwischen ohne Werbung?

Was die Kodierung der Sonderzeichen angeht: Das ist bei mir noch "von früher" tief verwurzelt. Da wurden Namen nicht immer unterstützt, weshalb ich mir auch mal eine Test-Tabelle angelegt habe ...

http://ptless.org/txt

Da gibts auch eine kleine Begründung von damals ...

Mit der Zahlenvariante ist man auf jeden Fall auf der sicheren Seite, denn die Interpretation der Namen ist nicht immer gewährleistet. Wer sich näher mit XML befasst, wird dies verstehen. So hat WML zum Beispiel von Haus aus keine benannten Zeichen.

Ist wie bei fast allem halt eine Einstellungs-, Entscheidungs-, Geschmackssache.

[Fightmeyer]

@Fightmeyer: Meinst du wirklich es ist die ganze Mühe wert? Frames sind zur Seitengestaltung einfach unbrauchbar. Kommt z.B. jemand per Suchmaschine auf eine gewisse Unterseite, dann fehlt auf einmal das Menü.

Das wird nicht passieren, da es sich um eine Intranetseite handelt.

Und ein fehlendes Menü ist auch für eine Suchmaschine hinderlich, da sie sich dann nicht mehr so gut "weiterhangeln" kann. Willst du für irgendein "Wackelmenü" wirklich riskieren, dass deine Seite weniger Besucher bekommt und weniger in Suchmaschinen aufgelistet wird? Da ist es doch wirklich besser, so wie Sinus spezielle Funktionen des Editors zu benutzen oder sich einen Server zu suchen der PHP unterstützt.

Der Intranet-IIS unterstützt selbstverständlich PHP, aber ich habe nicht vor jedes mal die komplette Seite neu laden zu lassen, nur weil im Navigationsmenu ein anderer Link angeklickt wurde, der dann im Zweifelsfall noch nicht mal ne neue Seite aufruft, sondern nur ne Subebene in der Navileiste einblenden soll.

[sinus]

Ja, da muss wohl auch JavaScript ran, aber da kann ich nicht helfen.

Hilfreicher wäre es auch, wenn du uns den Code gibst bzw. eine Grafik anfertigst, wie du dir das genau gedacht hast. Bilder sagen mehr als tausend Worte.

[Beowulf]

@sinus: Verstehe. WML scheint da sein eigenes Süppchen zu kochen. Wieder mal ein Zeichen dafür, dass Internethandys zu schnell und halbherzig entwickelt wurden. Ich lese bisher in allen XML-beschreibungen, dass auch dort das & durch & dargestellt wird.

Übrigens: Bei #instrument würde ich background-color: #EEE durch #222 setzen, sonst haben gerade auf folgender Seite die unteren Instrumentmodelle so einen hellgrauen Untergrund, weil dort die Hintergrundgrafik aufhört: http://piano-centrum-leipzig.de/yamahagrand.html

@Fightmeyer: Wie viele Links enthält denn nun das Menü maximal? Was spricht dagegen, alle auf einmal anzuzeigen und zu gruppieren?

[sinus]

@sinus: Verstehe. WML scheint da sein eigenes Süppchen zu kochen. Wieder mal ein Zeichen dafür, dass Internethandys zu schnell und halbherzig entwickelt wurden.

Naja, das war damals. Keine Ahnung, wie's heute aussieht. Hab auch keine Lust für tausend mögliche Anwendergeräte zu gestalten. Da machs ich lieber so abwärtskompatibel wie möglich.

Übrigens: Bei #instrument würde ich background-color: #EEE durch #222 setzen, sonst haben gerade auf folgender Seite die unteren Instrumentmodelle so einen hellgrauen Untergrund, weil dort die Hintergrundgrafik aufhört: http://piano-centrum-leipzig.de/yamahagrand.html

??? Das hört sich ja merkwürdig an. Passiert das wieder unter Opera? Normalerweise passe ich die Hintergrundfarbe natürlich dem entsprechenden Hintergrundbild an, aber da hab ich nach dem Herumexperimentieren mit anderen Bildern/Farben wohl einen Wert vergessen. Vielen Dank für den Hinweis.