Eine zweizeilige Navigation (ohne Dropdown oder sonstiges)

Hallo,

ich möchte eigentlich etwas machen, von dem ich dachte, dass es eigentlich recht einfach gehen müsste. Es scheint sogar so einfach zu sein, dass es in allen Tutorials oder sonstigem direkt übersprungen wird. Ich hätte gern eine zweizeilige horizontale Navigation, wobei die Unterpunkte von der Seite abhängen, auf der ich gerade bin. Meine Links bekomme ich als Liste:

HTML-Code:

---

<ul class="level_1">
            <li class="active submenu first"><strong class="active submenu first" aria-haspopup="true" itemprop="name">Home</strong>
                                <ul class="level_2">
                                        <li class="first"><a href="inktober.html" title="Inktober" class="first" itemprop="url"><span itemprop="name">Inktober</span></a></li>
                                        <li><a href="septemeer.html" title="Septemeer" itemprop="url"><span itemprop="name">Septemeer</span></a></li>
                                        <li><a href="fotografie.html" title="Fotografie" itemprop="url"><span itemprop="name">Fotografie</span></a></li>
                                        <li><a href="comics.html" title="Comics" itemprop="url"><span itemprop="name">Comics</span></a></li>
                                        <li><a href="3d-artworks.html" title="3D Artworks" itemprop="url"><span itemprop="name">3D Artworks</span></a></li>
                                        <li class="last"><a href="animation.html" title="Animation" class="last" itemprop="url"><span itemprop="name">Animation</span></a></li>
                                </ul>
                        </li>
            <li class="sibling"><a href="about.html" title="About" class="sibling" itemprop="url"><span itemprop="name">About</span></a></li>
            <li class="sibling last"><a href="blog.html" title="Blog" class="sibling last" itemprop="url"><span itemprop="name">Blog</span></a></li>
</ul>

---

Es soll jetzt so sein, dass die drei Elemente auf Ebene 1 immer schön verteilt sind und in einer zweiten Zeile dann die Unterpunkte der Home-Seite sind. Es soll also so aussehen, wenn ich auf den Seiten "About" und "Blog" bin:

Code:

---

|          Home        ||          About          ||          Blog        |

---

Das klappt soweit auch. Wenn ich dann auf "Home" bin, soll es so aussehen:

Code:

---

|          Home        ||          About          ||          Blog        |
| Element 1      |      Element 2    |      Element 3      |      Element 4 |

---

Bisher sieht es leider so aus:

Code:

---

|          Home                                        ||  About || Blog |
| Element 1  |  Element 2  | Element 3 | Element 4 |

---

Meine CSS-Fähigkeiten sind echt eingerostet. Mein bisheriger CSS-Code sieht wie folgt aus:

Code:

---

#nav-main ul {
        font-size: 1.2em;
        display: flex;
        justify-content: space-around;
    flex-direction: row;
        padding: 0.4em 1.5em 0.1em 1.5em;
        list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color: #f3f3f3;
}


#nav-main a{
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

---

Irgendwie komme ich nicht auf die richtige Idee und wäre über Hilfe sehr glücklich.

EDIT: Meine Idee aktuell ist, die Unterpunkte auf level_2 per "position:absolute" aus dem Textfluss herauszunehmen. Allerdings mag mir auch das noch nicht so wirklich gelingen.

Gruß
Martin

Hallo Martin,

genau als so eine Liste liefert Contao die Navigation aus :-)

Per CSS kannst du diese Liste nun beliebig gestalten.
Wie du siehst, vergibt Contao bereits etliche Klassen, die das Adressieren der einzelnen Elemente per CSS ermöglicht.

Wenn du auf 'Home' bist, dann siehst du in deinem Beispiel, dass das dazugehörende li die Klasse active hat.
In deinem Fall willst du also, die ul.level_2 nur sehen, wenn das li die Klasse active hat, z.B. so:

Code:

---

.level_1 .submenu ul {
  display: none;
}
.level_1 .active.submenu ul {
  display: block;
}

---

Damit hast du noch immer die Listendarstellung, aber die Unterliste von Home sollte nur erscheinen, wenn du auf Home bist.

Mit weiterem CSS kannst du die Elemente stylen. Aber versuch erstmal den ersten Schritt. Ich vermute, du hast noch nicht viel Erfahrung mit CSS? Dann machen wir das hier einmal Schritt für Schritt.
Allerdings würde ich dir empfehlen, anfangs ein fertiges Theme zu verwenden - es sein denn, du hast Zeit und willst gerne alles 'auf die harte Tour' lernen ;).
Lernen kannst du auch mit einem Theme, indem du das mitgelieferte CSS mit den Dev-Tools des Browsers anschaust (wurde dir ja an anderer Stelle schon empfohlen).

Gruß, folkfreund

Vielen Dank für deine Antwort. Die Liste habe ich so vom Contao Navigationsmodul, da hast du recht. Erfahrung mit CSS habe ich eigentlich auch, allerdings ist es jetzt bestimmt 2-3 Jahre her, dass ich meine aktuelle Webseite (noch komplett ohne CMS) erstellt habe. Ich würde also sagen, dass ich schon mal relativ fit war, dass ich auch die meisten Dinge schon einmal gehört habe und einordnen kann, dass mir die Anwendung aber aktuell schwerfällt.

Nur die passenden Elemente anzuzeigen ist auch kein Problem, das löst Contao für mich. Ich habe da im Navigationsmodul mit dem Start- und Stoplevel gearbeitet, die Seiten werden also schon so generiert, dass nur die passenden Elemente in der Liste vorhanden sind. Die zweite Ebene existiert also aktuell nur auf der Seite, auf der die Elemente auch angezeigt werden sollen.

Ich habe es jetzt auch geschafft, mittels position:absolute die Elemente in .level_2 aus dem Textfluss herauszulösen und somit unterhalb der übergeordneten Elemente anzuzeigen. Allerdings schien es mir dafür notwendig, der Navigation eine feste Höhe zu geben, die dann allerdings dazu führt, dass auf den Seiten "About" und "Blog" auch Platz für die zweite Zeile wäre, auch wenn sie da nicht gebraucht wird.
Ich müsste also die Höhe der gesamten Navigation auch davon abhängig machen, auf welcher Seite ich bin. Deshalb hatte ich die Hoffnung, ohne "position:absolute" auszukommen, da die Höhe sich dann ja automatisch an den Inhalt angepasst hätte.

Ich möchte tatsächlich auf die harte Tour lernen, das ist nämlich genau das Ziel ;). Beruflich bin ich in die "glückliche" Situation gerutscht, die Betreuung einer Webseite zu erben, welche Contao nutzt und im Verlauf einiger Jahre unter Einfluss verschiedener Personen "gewachsen" ist. Da ich aktuell zum Glück ein wenig Zeit habe, habe ich mir daher zum Ziel gesetzt, meine private Homepage auf Contao umzustellen und dabei einfach möglichst viel auszuprobieren. Daher kommen aktuell auch zwei Probleme zusammen, zum einen die eingerosteten CSS-Fähigkeiten, zum anderen das Problem, dass ich bisher wenig Erfahrung mit CMS im Allgemeinen und noch gar keine Erfahrung mit Contao habe.

EDIT: Ich habe deine Möglichkeit gerade einmal ausprobiert, allerdings führt das dazu, dass das Untermenü tatsächlich nur zu sehen ist, wenn ich auf der Home-Seite bin. Wenn ich auf einer der Unterseiten bin, ist das Menü nicht mehr zu sehen. Allerdings müsste ja da dann was von level_2 active sien, das müsste dann ja ähnlich funktionieren.

Gruß
Martin

Zitat:

---

Zitat von MartinL

Nur die passenden Elemente anzuzeigen ist auch kein Problem, das löst Contao für mich. Ich habe da im Navigationsmodul mit dem Start- und Stoplevel gearbeitet, die Seiten werden also schon so generiert, dass nur die passenden Elemente in der Liste vorhanden sind. Die zweite Ebene existiert also aktuell nur auf der Seite, auf der die Elemente auch angezeigt werden sollen.

---

Na, ich dachte, du hast nur auf der Home-Seite Unterseiten, also keine Unterseiten bei About und bei Blog.
Wenn du da testweise auch Unterseiten einfügst (was im allgemeinen Fall ja vorkommen könnte), dann wirst du sehen, ob das durch Contao tatsächlich ausgeblendet wird. Ich weiß es im Moment nicht genau.

Zitat:

---

Zitat von MartinL

Ich habe es jetzt auch geschafft, mittels position:absolute die Elemente in .level_2 aus dem Textfluss herauszulösen und somit unterhalb der übergeordneten Elemente anzuzeigen. Allerdings schien es mir dafür notwendig, der Navigation eine feste Höhe zu geben, die dann allerdings dazu führt, dass auf den Seiten "About" und "Blog" auch Platz für die zweite Zeile wäre, auch wenn sie da nicht gebraucht wird.
Ich müsste also die Höhe der gesamten Navigation auch davon abhängig machen, auf welcher Seite ich bin. Deshalb hatte ich die Hoffnung, ohne "position:absolute" auszukommen, da die Höhe sich dann ja automatisch an den Inhalt angepasst hätte.

---

Es gibt immer viele Möglichkeiten :). Zum Beispiel: du könntest die Hauptnavigation durch Start- und Stoplevel = 1 auf Level 1 begrenzen und eine weitere Navigation mit Start- und Stoplevel = 2 einrichten. Im Layout der Seite fügst du dann beide Navis ein - die erscheinen dann natürlich untereinander. Und wenn es keine Menüpunkte im Level 2 gibt, dann bleibt die Liste leer und verbraucht auch keinen Platz...

Zitat:

---

Zitat von MartinL

Ich möchte tatsächlich auf die harte Tour lernen, das ist nämlich genau das Ziel ;). Beruflich bin ich in die "glückliche" Situation gerutscht, die Betreuung einer Webseite zu erben, welche Contao nutzt und im Verlauf einiger Jahre unter Einfluss verschiedener Personen "gewachsen" ist.

---

Du meinst du machst das beruflich?

Zitat:

---

Zitat von MartinL

Da ich aktuell zum Glück ein wenig Zeit habe, habe ich mir daher zum Ziel gesetzt, meine private Homepage auf Contao umzustellen und dabei einfach möglichst viel auszuprobieren. Daher kommen aktuell auch zwei Probleme zusammen, zum einen die eingerosteten CSS-Fähigkeiten, zum anderen das Problem, dass ich bisher wenig Erfahrung mit CMS im Allgemeinen und noch gar keine Erfahrung mit Contao habe.

---

Das wird sich dann jetzt wohl ändern :)

Zurück zum Thema.
Versuch bitte erstens das mit den Unterseiten unter About oder Blog. Ich bin gespannt...
Und dann kannst du auch das mit den 2 getrennten Navis ausprobieren.

Bis später, folkfreund

Werde ich ausprobieren, allerdings sind da aktuell keine Unterseiten geplant, das wäre also ein theoretischer Versuch. Ich denke aber, dass Contao nur die Elemente generiert, die tatsächlich Unterseiten der aktuellen Seite sind. Ansonsten würde müsste ja eigentlich aktuell auch alles angezeigt werden. Ich teste es aber morgen ;).

Ich mache das auch nicht direkt beruflich, ich bin Lehrer und der bisher für die technische Umsetzung (und Aufbau) der Schulhomepage Verantwortliche hat die Schule gewechselt. Da ich Grundwissen in dem Bereich habe und das eine Aufgabe ist, welche mir durchaus Freude bereitet, wühle ich mich jetzt ins Thema rein.

EDIT: Habs schon getestet, Contao generiert nur die passenden Unterseiten. Also wenn ich zwei Unterseiten zum Blog einfüge und auf den Blog gehe, werden mir im Menü nur diese beiden Unterseiten angezeigt.

EDIT 2: Die Möglichkeit, ein zweites Menü einzubauen funktioniert glaube ich ganz gut. Das ist genau das, was mein zweites Problem ist. Mir ist noch nicht intuitiv bewusst, was an HTML herauskommt, wenn ich ein Modul oder ähnliches einbaue. Jetzt müsste man nur überlegen, ob es vom Design her schöner ist, zwei Listen zu haben, oder ob es schöner ist, eine Liste mit Unterpunkten zu haben. Ich würde fast sagen, eine Liste mit Unterpunkten ist besser, da es die Struktur des Inhalts der Seite besser widerspiegelt. Allerdings ist das aktuell nicht mein vorrangigstes Anliegen ;)

Viele Grüße
Martin

Zitat:

---

Zitat von MartinL

Jetzt müsste man nur überlegen, ob es vom Design her schöner ist, zwei Listen zu haben, oder ob es schöner ist, eine Liste mit Unterpunkten zu haben. Ich würde fast sagen, eine Liste mit Unterpunkten ist besser, da es die Struktur des Inhalts der Seite besser widerspiegelt.

---

Nach dem Stylen per CSS ist's ja keine Liste mehr. Und wenn jetzt die Reihenfolge im HTML-Code stimmt, dann kann's ja weiter gehen.

Ich habe sowas schon oft gemacht. Am einfachsten geht dies, wenn du zwei Navigationen machst, so wie auf https://demo.contao.org/en/content-elements.html. Einfach die Subnavigation dann unter die Mainnavigation setzen. Main auf Stop level 1. Die anderen Settings wie in der Demo.

Möchtest du es mit nur einer Navigation und dann mit CSS, dann sähe das CSS so aus.
Mit Stop level 1 und ohne Hardlimit (nur aktive Submenüs werden gerendert):

PHP-Code:

---

.mainnav ul {
  display: flex;
  justify-content: space-between;
}
.mainnav ul ul {
  position: absolute;
  width: 100%;
  left: 0;
} 


---

Mit Stop level 2 und Hardlimit (alle Menüpunkte werden gerendert bis zu Level 2).

PHP-Code:

---

.mainnav ul {
  display: flex;
  justify-content: space-between;
}
.mainnav ul ul {
  display: none; /* besser die Regel der Klasse .invisible hier benutzen */
  position: absolute;
  width: 100%;
  left: 0;
}
.mainnav .active ul,
.mainnav .trail ul{
  display: flex;
} 


---

Die zweite Lösung hat einen Vorteil für Screenreader (dann aber nicht display:none; verwenden).

Hi,
schau dir mal das Gratis Theme OpenSauce von RockSolid an.
Dort wird genau das verwendet was Du suchst....

Dort wird die einfache Lösung mit 2 Navigationen verwendet.

Vielen Dank für die Hilfe. Ich denke, ich werde erst einmal zwei Navigationen nehmen und mich anderen Stellen widmen. Eventuell komme ich dann später noch einmal auf das Problem zurück.

@folkfreund mit der Überlegung, ob es schöner ist, es in einer Liste oder in zwei Listen zu organisieren, meinte ich diesmal nicht das äußere Erscheinungsbild, sondern die Struktur des Inhalts. HTML dient ja eigentlich nur dazu, den Inhalt anhand seiner Bedeutung zu strukturieren. Wenn ich meine Navigation aber strukturieren möchte, würde ich sie eher als eine Liste mit mehreren Ebenen strukturieren. Das gibt die Bedeutung des Inhalts eher wieder, als zwei voneinander unabhängige Listen.

Gruß
Martin

Zitat:

---

Zitat von MartinL

@folkfreund mit der Überlegung, ob es schöner ist, es in einer Liste oder in zwei Listen zu organisieren, meinte ich diesmal nicht das äußere Erscheinungsbild, sondern die Struktur des Inhalts. HTML dient ja eigentlich nur dazu, den Inhalt anhand seiner Bedeutung zu strukturieren. Wenn ich meine Navigation aber strukturieren möchte, würde ich sie eher als eine Liste mit mehreren Ebenen strukturieren. Das gibt die Bedeutung des Inhalts eher wieder, als zwei voneinander unabhängige Listen.

---

Klar. Semantisches HTML ist ja heutzutage auch eher möglich als früher.
Für den normalen Betrachter der Webseite ist es kein großer Unterschied, wohl aber für Screenreader, die ja nur den Quelltext 'sehen' und nicht die grafische Aufmachung. Darauf hat sich Andreas oben bezogen. Falls dir also Barrierefreiheit wichtig ist...

So, ich habe die Lösung mit einer zweiten Navigation ausprobiert und das klappt zumindest. Daraus hat sich aber wieder eine kleine Frage ergeben. Ich hätte gern einen Rahmen um das komplette Menü, ist es irgendwie einfach möglich, mehrere Module in einem div zusammenzufassen? Ich habe es mit zwei zusätzlichen Modulen gelöst:

Code:

---

Modul 1: Eigener HTML-Code - <div id="navigation">
Modul 2: Navigationsmenü 1
Modul 3: Navigationsmenü 2
Modul 4: Eigener HTML-Code - </div>

---

Das ist zwar eine Lösung, ich frage mich aber, ob es die beste ist.

Viele Grüße
Martin

Erstelle ein Modul Typ HTML, welches du dann als alleiniges Modul für die Navigation im Layout einbinden kannst.

HTML-Code:

---

<div id="navigation" class="mod_custom block">
  {{insert_module::1}}
  {{insert_module::2}}
</div>

---