Responsive Navigationsleiste
Eine vollständig responsive Navigationsleiste mit Hamburger-Menü für mobile Geräte.
Demo
Logo
Code
HTML
CSS
JavaScript
<header class="header">
<nav class="nav">
<div class="logo">Logo</div>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<ul class="menu">
<li><a href="#" class="active">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Dienste</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
.header {
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-weight: bold;
font-size: 1.5rem;
color: #333;
}
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
}
.menu a:hover,
.active {
color: #3498db;
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background: #333;
margin: 5px 0;
transition: all 0.3s;
}
@media (max-width: 768px) {
.menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
padding: 1rem;
display: none;
z-index: 100;
}
.menu.active {
display: flex;
}
.menu li {
margin: 0.5rem 0;
}
.menu-toggle {
display: block;
}
}
// Mobile Menü-Toggle-Funktionalität
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
// Optional: Animiertes Hamburger-Icon zu X
this.classList.toggle('active');
});
// Optional: Zusätzliches CSS für die Animation des Hamburger-Icons
/*
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
*/
Erklärung
Diese responsive Navigationsleiste passt sich verschiedenen Bildschirmgrößen an:
- Auf Desktop-Geräten werden die Menüpunkte horizontal angezeigt
- Auf mobilen Geräten wird ein Hamburger-Menü angezeigt, das beim Klicken ein vertikales Menü öffnet
- Die
@media
-Abfrage bestimmt, wann das Layout umgeschaltet wird
Der JavaScript-Teil fügt dem Hamburger-Button einen Event-Listener hinzu, der die Klasse active
umschaltet, um das mobile Menü anzuzeigen oder zu verbergen.
Optional kann das Hamburger-Icon auch in ein X transformiert werden, wenn das Menü geöffnet ist.
Verwendung
Diese Navigationsleiste ist ein grundlegender Bestandteil jeder responsiven Website und kann leicht an dein Farbschema und Design angepasst werden.