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 .