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>
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);
- }
Frage: Ist so etwas in einer SPA via HTM & CSS möglich?
Bin ein ziemlicher Neuling .