Contao-Camp 2024
Ergebnis 1 bis 13 von 13

Thema: Eine zweizeilige Navigation (ohne Dropdown oder sonstiges)

  1. #1
    Contao-Nutzer
    Registriert seit
    28.02.2018.
    Beiträge
    28

    Standard 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
    Geändert von MartinL (03.03.2018 um 19:43 Uhr)

  2. #2
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    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

  3. #3
    Contao-Nutzer
    Registriert seit
    28.02.2018.
    Beiträge
    28

    Standard

    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
    Geändert von MartinL (03.03.2018 um 21:26 Uhr)

  4. #4
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Zitat Zitat von MartinL Beitrag anzeigen
    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 Beitrag anzeigen
    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 Beitrag anzeigen
    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 Beitrag anzeigen
    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

  5. #5
    Contao-Nutzer
    Registriert seit
    28.02.2018.
    Beiträge
    28

    Standard

    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
    Geändert von MartinL (03.03.2018 um 23:00 Uhr)

  6. #6
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Zitat Zitat von MartinL Beitrag anzeigen
    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.

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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 {
      
    displayflex;
      
    justify-contentspace-between;
    }
    .
    mainnav ul ul {
      
    positionabsolute;
      
    width100%;
      
    left0;

    Mit Stop level 2 und Hardlimit (alle Menüpunkte werden gerendert bis zu Level 2).
    PHP-Code:
    .mainnav ul {
      
    displayflex;
      
    justify-contentspace-between;
    }
    .
    mainnav ul ul {
      
    displaynone/* besser die Regel der Klasse .invisible hier benutzen */
      
    positionabsolute;
      
    width100%;
      
    left0;
    }
    .
    mainnav .active ul,
    .
    mainnav .trail ul{
      
    displayflex;

    Die zweite Lösung hat einen Vorteil für Screenreader (dann aber nicht display:none; verwenden).
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Nutzer
    Registriert seit
    24.06.2012.
    Beiträge
    205

    Standard

    Hi,
    schau dir mal das Gratis Theme OpenSauce von RockSolid an.
    Dort wird genau das verwendet was Du suchst....
    Geändert von speedweb (04.03.2018 um 09:37 Uhr)
    Gruß Thomas
    __________________________________________________ ________________________________
    ich habe keine Zeit, darüber nachzudenken, warum ich keine Zeit habe.

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dort wird die einfache Lösung mit 2 Navigationen verwendet.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  10. #10
    Contao-Nutzer
    Registriert seit
    28.02.2018.
    Beiträge
    28

    Standard

    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

  11. #11
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Zitat Zitat von MartinL Beitrag anzeigen
    @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...

  12. #12
    Contao-Nutzer
    Registriert seit
    28.02.2018.
    Beiträge
    28

    Standard

    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

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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>
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •