
In diesem Kapitel lernst du, wie du eine komplexere Webseite mit einem Logo, einer Navigationsleiste, einer Sidebar und einem dynamischen Inhaltsbereich erstellst. Die Sidebar dient als Menü, um zwischen verschiedenen Inhalten zu wechseln.
1. Grundaufbau der HTML-Seite
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webseite mit Sidebar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: white;
padding: 10px 20px;
}
header img {
height: 40px;
}
header .navbar {
display: flex;
align-items: center;
}
header .navbar button {
background-color: #555;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
margin-left: 10px;
}
header .navbar button:hover {
background-color: #777;
}
.content {
display: flex;
flex: 1;
}
.sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 20px;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li {
margin: 10px 0;
}
.sidebar ul li a {
text-decoration: none;
color: #333;
padding: 8px 12px;
display: block;
border-radius: 4px;
}
.sidebar ul li a:hover {
background-color: #ddd;
}
.main-content {
flex: 1;
padding: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<header>
<img src="logo.png" alt="Logo">
<div class="navbar">
<button>Abmelden</button>
</div>
</header>
<div class="content">
<div class="sidebar">
<ul>
<li><a href="#" data-page="page1">Seite 1</a></li>
<li><a href="#" data-page="page2">Seite 2</a></li>
<li><a href="#" data-page="page3">Seite 3</a></li>
</ul>
</div>
<div class="main-content">
<div id="page1">Inhalt der ersten Seite</div>
<div id="page2" class="hidden">Inhalt der zweiten Seite</div>
<div id="page3" class="hidden">Inhalt der dritten Seite</div>
</div>
</div>
<script>
const links = document.querySelectorAll('.sidebar ul li a');
const pages = document.querySelectorAll('.main-content > div');
links.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const targetPage = event.target.getAttribute('data-page');
pages.forEach(page => {
if (page.id === targetPage) {
page.classList.remove('hidden');
} else {
page.classList.add('hidden');
}
});
});
});
</script>
</body>
</html>
2. Beschreibung der Elemente
Header mit Logo und Navbar
- Das Logo wird links oben angezeigt und ist ein zentrales Designelement.
- Die Navbar enthält einen Button „Abmelden“ und kann für weitere Elemente erweitert werden.
Sidebar
- Die Sidebar enthält ein Menü mit Links zu drei Seiten.
- Beim Anklicken eines Links wird der entsprechende Inhalt rechts angezeigt.
Hauptinhalt
- Der Hauptinhalt ist dynamisch und zeigt nur die gewählte Seite an.
- Nicht sichtbare Inhalte werden mit der CSS-Klasse
hidden
ausgeblendet.
3. Dynamik durch JavaScript
Das JavaScript sorgt dafür, dass nur der Inhalt der gewählten Seite angezeigt wird. Es:
- Fügt allen Links einen
click
-Event-Listener hinzu. - Zeigt den entsprechenden Inhalt an und blendet alle anderen Inhalte aus.
4. Erweiterungsmöglichkeiten
- Responsive Design: Passe die Seite mit Media Queries für mobile Geräte an.
- Interaktive Navigation: Füge Animationen oder Hover-Effekte hinzu.
- Serverseitige Integration: Lade Inhalte dynamisch vom Server, z. B. mit AJAX.