Wie verwendet man JavaScript, um ein responsives Navigationsmenü zu erstellen?
19/03/2024
•
5
min
Ein responsives Navigationsmenü mit JavaScript zu erstellen, umfasst verschiedene Schritte. Dies beinhaltet das Strukturieren des HTML, das Stylen mit CSS und das Implementieren der interaktiven Funktionalität mit JavaScript.
In diesem schrittweisen Beispiel werden wir ein einfaches responsives Navigationsmenü erstellen, das zwischen einem Hamburger-Symbol auf kleineren Bildschirmen und einem horizontalen Menü auf größeren umschaltet.
Schritt 1: HTML-Struktur
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Zuerst erstellen wir eine grundlegende HTML-Struktur für unser Navigationsmenü.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<div class="logo">Firmenname</div>
<ul class="nav-links" id="navLinks">
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Dienstleistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<img src="menu-icon.png" class="menu-icon" onclick="toggleMenu()" id="menuIcon">
</nav>
<script src="script.js"></script>
</body>
</html>
In diesem HTML haben wir eine Liste (<ul>) für unsere Menüpunkte und ein Bild, das als unser Menüsymbol dient. Wir verlinken auch auf eine CSS-Datei (styles.css), um unser Menü zu gestalten, und auf eine JavaScript-Datei (script.js), in der wir unsere interaktive Funktionalität einfügen.
Schritt 2: CSS-Styling
Als nächstes schreiben wir ein wenig CSS für unser Navigationsmenü.
nav {
display: flex;
justify-content: space-between;
padding: 15px;
background-color: #333;
color: #fff;
}
.logo {
font-size: 20px;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin: 0 10px;
}
.nav-links a {
color: #fff;
text-decoration: none;
}
.menu-icon {
cursor: pointer;
display: none;
}
@media (max-width: 800px) {
.nav-links {
display: none;
}
.menu-icon {
display: block;
}
}
Dieses CSS setzt unsere Navigationsleiste oben auf unserer Seite auf, so dass das Logo und die Menüpunkte gleichmäßig verteilt sind. Das Menüsymbol (menu-icon.png) ist standardmäßig verborgen und wird nur auf Bildschirmen kleiner als 800px angezeigt.
Schritt 3: JavaScript-Funktionalität
Schließlich verwenden wir JavaScript, um Interaktivität hinzuzufügen. Wir möchten unsere Navigationslinks anzeigen und verbergen, wenn auf das Menüsymbol geklickt wird.
function toggleMenu() {
var navLinks = document.getElementById('navLinks');
var menuIcon = document.getElementById('menuIcon');
if (navLinks.style.display === "none") {
navLinks.style.display = "block";
menuIcon.src = "close-icon.png"; // Ändert das Menüsymbol in ein "close" -Symbol
} else {
navLinks.style.display = "none";
menuIcon.src = "menu-icon.png"; // Ändert das close-Symbol zurück zum Menüsymbol
}
}
Wann immer auf das Menüsymbol geklickt wird, wird diese Funktion ausgeführt und überprüft, ob die Menü-Links derzeit angezeigt werden. Wenn sie es sind, versteckt es sie; ansonsten zeigt es sie. Es ändert auch das Menüsymbol zwischen einem Hamburger und einem "close"-Symbol, je nachdem, ob das Menü offen ist.
Bitte ersetzen Sie das "menu-icon.png" und "close-icon.png" durch Ihren tatsächlichen Pfad zu den png-Bildern.
Dies ist ein sehr einfaches responsives Navigationsmenü. Sie können mehr Styles, Animationen hinzufügen und sogar Menüs innerhalb von Menüs verschachteln, um Ihren spezifischen Bedürfnissen gerecht zu werden. Natürlich würde man in einem Produktionsumfeld auch Barrierefreiheit berücksichtigen wollen. Verstanden?
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.