Horizontale Navigation unter Vertikaler Navigation

  • Ich möchte in einer SPA eine Navigation in HTML5 und CSS3 erstellen.

    Ich habe links eine Vertikale Haupt-Navigation mit frist, second, third.

    Wenn ich den Navigationspunkt first aufrufe, dann soll im Content-Bereich rechts eine Seite erscheinen mit Horizontaler Sub-Navigation (1.1, 1.2, 1.3).

    Horizontale Sub-Navigation oben.


    Im folgenden Demo-Code in HTML:


    Hier die CSS-Datei


    Frage: Ist so etwas in einer SPA via HTM & CSS möglich?
    Bin ein ziemlicher Neuling .

  • Frage: Ist so etwas in einer SPA via HTM & CSS möglich?

    Eine SPA funktioniert so, dass man

    1. auf der Aktuellen Seite Bleibt und nur den Content austauscht. (Dies wird mit JavaScript umgesetzt)
    2. Der komplette Content sich auf einer sehr langen Seite befindet, und man sich scrollend durch die Webseite bewegt. (Das geht mit reinem HTML/CSS)

    HTML bietet dir nur die Möglichkeit mit Hilfe von Ankern auf eine weitere (Web)-Seite zu verlinken, oder auf der Aktuellen Seite hin und her zu springen.

    Wenn du also das Ganze mit reinem HTML/CSS umsetzen möchtest, bleiben dir nur diese Möglichkeiten.


    Du könntest zB eine lange Seite gestalten, auf der Jeder Abschnitt seine eigene horizontale Navigation enthällt und auf der du mit der Hauptnavigation an den Jeweiligen Abschnitt springst.


    Wie hast du dir denn vorgestellt wie was beim Navigieren passieren soll?



    Wenn du alle Freiheit haben möchtest, benötigst du allerdings JavaScript.

  • Danke für die Info.

    Für alle die ein lauffähiges Demo-Projekt mit HTML, CSS und JavaScript wollen:


    HTML als Datei index.html


    CSS als Datei style.css

  • Immerhin positiv, dass Du in Eigeninitiative eine Lösung gefunden hast :-)


    Allerdings ist dieses Verfahren nicht besonders elegant und vor allem nicht änderungsfreundlich, denn jedes Mal, wenn Du im horizontalen Menü etwas hinzu fügst, musst Du auch eine weitere Funktion hinzu fügen und die vorhandenen ändern.

    Besser nur eine Funktion verwenden und die Menüpunkte in einer Schleife abarbeiten:

    HTML
    1. <ul class=vertical">
    2. <li><a href="#erste" onclick="showHorizontal('erste')">first</a></li>
    3. <li><a href="#zweite" onclick="showHorizontal('zweite')">second</a></li>
    4. <li><a href="#dritte" onclick="showHorizontal('dritte')">third</a></li>
    5. </ul>
    JavaScript
    1. const horizontals = document.querySelectorAll('.horizontal');
    2. function showHorizontal(id) {
    3. horizontals.forEach(item => {
    4. if (item.id == id) {
    5. item.style.display = 'block';
    6. } else {
    7. item.style.display = 'none';
    8. }
    9. });
    10. }

    So brauchst Du nur das HTML zu ändern, das Javascript ist universell.

  • Vielen Dank für all die Rückmeldungen.


    Ich habe die Beiträge eingebaut.

    Jetzt habe ich jedoch das Problem, dass das onclick-Ereignis nicht funktioniert.

    Wenn ich auf den Vertikalen Link klicke, dann wird das onclick-Ereignis nicht ausgelöst.


    index.html



    CSS-Datei: style.css



    Javascript: app.js


    Die folgenden 3 Zeilen aus der app.js werden nicht beachtet:

    Code
    1. document.getElementById("first").onclick = showHorizontal("first", "erste");
    2. document.getElementById("second").onclick = showHorizontal("second", "zweite");
    3. document.getElementById("third").onclick = showHorizontal("third", "dritte");

    Hat jemand eine Idee warum diese Zeilen nicht beachtet werden