2-Spaltiges-Hauptmenü.. Geht das?

[pyretta]

Hallo,

ich habe mich gefragt, ob ich ein Split-Menü mit dem normalen Navigationsmenü-Modul erstellen kann, das in 2 Spalten dargestellt wird, ab der 2. Ebene.

Also in etwa so wie in diesem Beispiel (hier für Joomla): http://demo.rockettheme.com/?template=nebulae


Das ganze soll später in etwa so aufgebaut werden:


Menüpunkt 1 | Menüpunkt 2 | Menüpunkt 3 | Menüpunkt 4


[ Headerbild ]


Menüpunkt 1 - Spalte 1 | Menüpunkt 1 - Spalte 2


[ Content ]


[ Footer ]


Also kein Dropdown-Menü. Ein Split-Menü - ein Teil horizontal (1. Ebene) und ein Teil vertikal in 2 Spalten (ab 2. Ebene).

Ich hoffe ich hab es ausreichend beschrieben

Geht sowas? Wenn ja, wie?
Oder muss ich da hardcodet ran?
Bzw. 2 "Individuelle Navigationen" erstellen und diese nebeneinander stellen?

Wäre cool wenn Ihr mir da einen Tipp geben könntet.
Vielen Dank im Voraus.

Liebe Grüße
pyretta

[Bandyt]

Du musst hier mit 2 Navigationselementen arbeiten.

Das Erste, dass nur Level 1 anzeigt.
Das Zeite zeigt dann ab Level 2 an.

[pyretta]

Hallo Bandyt,

vielen Dank für deine Antwort.

Sowas in der Art hatte ich mir schon gedacht, nur wie bekomme ich den 2. Teil in zwei Spalten gepresst?
Das ist für mich momentan noch unklar.

Hardcoded bzw. mit 2 individuellen Menüs wärs ja kein Problem... nur eben sehr aufwendig. Also ein normales Navigationsmenü horizontal und 2 individuelle Menüs für die vertikale Zweispaltigkeit. Also im Prinzip 3 Menüs

Aber genau das wollte ich nach Möglichkeit vermeiden. Vorallem weil ich ja, wenn weitere Menüpunkte hinzukommen das händisch jedes mal anpassen müsste. Wäre doof.


Hatte mich im ersten Post glaube ich etwas unklar ausgedrückt...

Die Beispielseite zeigt ein horizontales Dropdown-Menü (http://demo.rockettheme.com/?template=nebulae).
Wenn man mit der Maus über den Menüpunkt "Extensions" fährt klappt sich ein zweispaltiges untermenü auf.
Und genau DAS will ich auch nur eben als separates Menü - vertikal.

[trilobit]

Hallo,

die Nebeneinander-Anordnung des Submenüs bekommst du über CSS hin, einfach den <li>s ein float: left; geben und den Container, in dem sie liegen, eine feste Breite (nach Möglichkeit 2x <li>-Breite, geht aber auch mehr). Dann werden die Navi-Items mals so grundsätzlich immer abwechselnd links-rechts-links-rechts-... angeordnet (mir ist bewußt, dass in dem Beispiel von dir die Navigationen anders aufgebaut sind).

In Contao werden verschachtelte Menüs etwa so "ausgespuckt":

<ul class="level_1">
  <li><a href="...">Navi-Punkt 1</a></li>
  <li>
    <a href="...">Navi-Punkt 2</a>
    <ul class="level_2">
      <li><a href="...">Navi-Punkt 2-1</a></li>
      <li><a href="...">Navi-Punkt 2-2</a></li>
      <li><a href="...">Navi-Punkt 2-3</a></li>
    </ul>
  </li>
  <li><a href="...">Navi-Punkt 3</a></li>
</ul>

Wie du siehst bekommen die Listen, die aus deinen Seiten erstellt werden, die Klassen "level_X". Darüber kannst du sie nun ansprechen, indem du z.B. folgendes CSS darauf packst:

ul.level_1 li {
  foat: left;
}

ul.level_2 {
  display: block;
  width: 200px; /* 2x Breite der li's */
}

ul.level_2 li {
  float: left;
  width: 100px;
}

Das ist nur aus dem Stehgreif, wahrscheinlich muss das ganze noch etwas angepasst und geschliffen werden, aber die Grundidee ist klar, oder?
Sollte dann etwa so aussehen:
████
████ ████
████ ████
████ ████
████ ████

Cheerio,
Alex

[pyretta]

Hey, super Danke trilobit!

Das klingt sehr plausibel, ich werde das gleich ausprobieren.