Horizontale Navigation unter Vertikaler Navigation

haglo · 12. Januar 2021

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:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<aside>
<ul class=vertical">
<li><a href="#erste">first</a></li>
<li><a href="#zweite">second</a></li>
<li><a href="#dritte">third</a></li>
</ul>
</aside>
<article>
<ul id="erste" class="horizontal">
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
</ul>
<ul id="zweite" class="horizontal">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
</article>
</main>
</body>
</html>

Alles anzeigen

Hier die CSS-Datei

Code

*{
font-family: sans-serif;
}
body{
padding: 0px;
margin: 0px;
}
@media screen and (min-width: 50em){
main{
height: 100vh;
display:grid;
grid-template-rows: 1fr 8fr 0.5fr;
grid-template-columns: 1fr 4fr;
grid-template-areas:
"header header"
"aside article"
"footer footer"
}
a{
display:block;
}
}
aside{
grid-area:aside;
background: rgb(26, 196, 34);
}
article{
grid-area: article;
background:rgb(187, 59, 59);
}

Alles anzeigen

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

webkriecher · 12. Januar 2021

Hi,

ich bin auch noch ziemlicher Anfänger, aber ich denke das sollte grundsätzlich schon möglich sein. Kannst du noch deinen CSS Code angeben. Als Übung wärs für mich auch interessant.

Und bei first hast du nen Tippfehler.

haglo · 12. Januar 2021

Anfrage ist korrigiert, siehe oben.

prodev · 12. Januar 2021

Hi!

Bitte verbessere erstmal dein HTML. Du hast bei

Code

<ul class=vertical">

ein " vergessen.

AndreasB · 12. Januar 2021

haglo schrieb:

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

Eine SPA funktioniert so, dass man

auf der Aktuellen Seite Bleibt und nur den Content austauscht. (Dies wird mit JavaScript umgesetzt)
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.

haglo · 13. Januar 2021

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<aside>
<ul class="vertical">
<li><a href="#erste" onclick="hideFirst()">first</a></li>
<li><a href="#zweite" onclick="hideSecond()">second</a></li>
<li><a href="#dritte" onclick="hideThird()">third</a></li>
</ul>
</aside>
<article>
<ul id="erste" class="horizontal">
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
</ul>
<ul id="zweite" class="horizontal">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
<ul id="dritte" class="horizontal">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
</ul>
</article>
</main>
<script>
var firstHorizontal = document.getElementById("erste");
var secondHorizontal = document.getElementById("zweite");
var thirdHorizontal = document.getElementById("dritte");
function hideFirst() {
firstHorizontal.style.display = "block";
secondHorizontal.style.display = "none";
thirdHorizontal.style.display = "none";
}
function hideSecond() {
firstHorizontal.style.display = "none";
secondHorizontal.style.display = "block";
thirdHorizontal.style.display = "none";
}
function hideThird() {
firstHorizontal.style.display = "none";
secondHorizontal.style.display = "none";
thirdHorizontal.style.display = "block";
}
</script>
</body>
</html>

Alles anzeigen

CSS als Datei style.css

Code

*{
font-family: sans-serif;
}
body{
padding: 0px;
margin: 0px;
}
@media screen and (min-width: 50em){
main{
height: 100vh;
display:grid;
grid-template-rows: 1fr 8fr 0.5fr;
grid-template-columns: 1fr 4fr;
grid-template-areas:
"header header"
"aside article"
"footer footer"
}
a{
display:block;
}
}
aside{
grid-area:aside;
background: rgb(26, 196, 34);
}
article{
grid-area: article;
background:rgb(187, 59, 59);
}
#zweite {
display: none;
}
#dritte {
display: none;
}
.horizontal li {
float: left;
width: 50px;
}

Alles anzeigen

Sempervivum · 13. Januar 2021

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

<ul class=vertical">
<li><a href="#erste" onclick="showHorizontal('erste')">first</a></li>
<li><a href="#zweite" onclick="showHorizontal('zweite')">second</a></li>
<li><a href="#dritte" onclick="showHorizontal('dritte')">third</a></li>
</ul>

JavaScript

const horizontals = document.querySelectorAll('.horizontal');
function showHorizontal(id) {
horizontals.forEach(item => {
if (item.id == id) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
}

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

AndreasB · 13. Januar 2021

haglo schau' dir mal das an: https://codepen.io/Mr_Beer/pen/mdrzQjX
Vielleicht hilft dir das bei der Dynamischen Konfiguration deines Menüs.

Wenn du eine SPA anstrebst,

hast allerdings noch ein Problem mit dem Routing.

es sollte so funktionieren, dass man die Seiten nicht nur über die Navigation, sondern auch über eine Änderung der URL erreichen kann.

haglo · 15. Januar 2021

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Page App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<aside>
<ul class="nav_vertical">
<li id="first"><a href="#erste"><span class="material-icons">photo_library</span></a></li>
<li id="second"><a href="#zweite"><span class="material-icons">photo_library</span></a></li>
<li id="third"><a href="#dritte"><span class="material-icons">question_answer</span></a></li>
</ul>
</aside>
<section>
<ul id="erste" class="nav_horizontal">
<li class="link-top"><a href="#1.1">1.1</a></li>
<li class="link-top"><a href="#1.2">1.2</a></li>
<li class="link-top"><a href="#1.3">1.3</a></li>
</ul>
<ul id="zweite" class="nav_horizontal">
<li class="link-top"><a href="#2.1">2.1</a></li>
<li class="link-top"><a href="#2.2">2.2</a></li>
<li class="link-top"><a href="#2.3">2.3</a></li>
</ul>
<ul id="dritte" class="nav_horizontal">
<li class="link-top"><a href="#3.1">3.1</a></li>
<li class="link-top"><a href="#3.2">3.2</a></li>
<li class="link-top"><a href="#3.3">3.3</a></li>
</ul>
</section>
<article>
<p>Content</p>
</article>
<script src="app.js" type="module"></script>
</body>
</html>

Alles anzeigen

CSS-Datei: style.css

Code

* {
font-family: sans-serif;
}
ul {
list-style-type: none;
}
@media screen and (min-width: 50em) {
body {
padding: 0px;
margin: 0px;
height: 100vh;
display: grid;
grid-template-rows: 0.2fr 10fr;
grid-template-columns: 0.2fr 10fr;
grid-template-areas:
"aside section"
"aside article"
}
}
section{
grid-area: section;
background: lightsalmon;
}
aside {
grid-area: aside;
top: 0px;
display: flex;
align-items: center;
flex-direction: column;
background: #009879;
border-right: 2px solid #008C71;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
list-style-type: none;
}
article {
grid-area: article;
background: lightcyan;
}
.nav_vertical {
display: flex;
align-items: center;
flex-direction: column;
background: #008C71;
border-bottom: 1px solid #009879;
list-style-type: none;
padding: 10px;
}
.nav_vertical .material-icons {
float: left;
color: #ffffff;
padding: 10px;
}
.nav_horizontal {
list-style-type: none;
padding: 10px;
}
.nav_horizontal li {
float: left;
width: 50px;
}
.link-top{
float: left;
width: 150px;
list-style-type: none;
}
.link-top a{
text-decoration: none;
}

Alles anzeigen

Javascript: app.js

Code

window.onload = function () {
"use strict";
const verticalElememts = document.querySelector(".nav_vertical").children;
const verticals = Array.from(verticalElememts);
const horizontals = document.querySelectorAll('.nav_horizontal');
document.getElementById("first").onclick = showHorizontal("first", "erste");
document.getElementById("second").onclick = showHorizontal("second", "zweite");
document.getElementById("third").onclick = showHorizontal("third", "dritte");
function showHorizontal(left, top) {
verticals.forEach(item => {
if (item.id == left) {
item.style.background = "#9ef007"
} else {
item.style.background = "#008C71";
}
});
horizontals.forEach(item => {
if (item.id == top) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
}
showHorizontal("first", "erste");
}

Alles anzeigen

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

Code

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

Hat jemand eine Idee warum diese Zeilen nicht beachtet werden