Responsive Dropdown Menü Navigation (nur mit CSS) Tutorial Deutsch

Показать описание

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

Hi, den Source Code gibt es auf unserer Webseite:

In diesem Video wirst du lernen, wie du ein responsives Dropdown Menü erstellst und das ganze nur mit HTML und CSS.
Wir erstellen dabei eine Navigationsleiste mit Logo, Menüpunkten und Dropdown. Wir erstellen außerdem eine dropdown-mobile-variante, bei der die Links untereinander angeordnet werden.

Timestamps:
00:00 Endprodukt
00:29 HTML
01:52 CSS
06:34 Responsive

Folgenden CSS-Konzepte werden erklärt:
- hover-effect
- media-query
- Umgang mit Checkboxen

Tags für den Algorithmus:
css dropdown menu, dropdown, dropdown in css erstellen, navbar, responsive dropdown, responsive menu in css, css responsive navbar, navigationbar, navigationsleiste, css tutorial deutsch, dropdown mobile, mobile navbar, toggle button, hamburger menü, dreichstriche menü, mobile first, handy ansicht, handy navigation in css, smartphone navigation, media query mobile, css mobile view, @media, @media-query

Рекомендации по теме

Комментарии

Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a class="logo" href="#">mycompany</a>
<input type="checkbox" id="toggle_button">
<label for="toggle_button" class="toggle_button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<ul>
<li><a href="#">Home</a></li>
<li class="expandable_li">
<input type="checkbox" id="products_checkbox">
<label
<ul class="dropdown">
<li><a href="#">Ebooks</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Apps</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</body>
</html>

:root{
--background-color: #314453;
--darker-background-color: #243848;
--accent-color: #41DCE1;
--text-color:
--navbar-height: 80px;
}
*{
margin: 0;
padding: 0;
font-size: 22px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color);
}
html{
height: 100%;
}
body{
height: 100%;
}
nav{
height: var(--navbar-height);
background-color: var(--background-color);
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo{
margin-left: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
font-variant: small-caps;
text-decoration: none;
}
nav ul{
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
}
nav li{
height: 100%;
width: 150px;
text-align: center;
position: relative;
}
nav li:hover{
background: var(--accent-color);
}
nav ul a{
height: 100%;
width: 100%;

display: flex;
justify-content: center;
align-items: center;

text-decoration: none;
}
.dropdown{
height: min-content;
width: 200px;
background: var(--background-color);

display: none;
flex-direction: column;

position: absolute;
left: 0;
top: var(--navbar-height);
}
.dropdown li{
height: 70px;
width: 100%;
}
.dropdown li a{
justify-content: flex-start;
padding-left: 30px;
width: calc(100% - 30px);
}
nav li:hover .dropdown{
display: flex;
}
nav input[type="checkbox"]{
display: none;
}
.expandable_li{
display: flex;
justify-content: center;
align-items: center;
}
.toggle_button{
width: 30px;
height: 23px;

position: absolute;
top: 25px;
right: 25px;

display: none;
flex-direction: column;
justify-content: space-between;
}
.bar{
height: 4px;
width: 100%;
background: var(--text-color);
border-radius: 100px;
}
@media(max-width: 850px){
.toggle_button{
display: flex;
}
nav ul{
height: min-content;
width: 100%;
background-color: var(--background-color);

display: none;
position: absolute;
top: var(--navbar-height);
}
nav li{
height: min-content;
width: 100%;
}
nav ul a{
padding: 30px 0;
}
.expandable_li{
display: block;
}
.expandable_li label{
padding: 30px 0;
cursor: pointer;
display: block;
}
.expandable_li:hover .dropdown{
display: none;
}
.expandable_li ~ .dropdown{
display: block;
}
.dropdown{
position: static;
width: 100%;
}
.dropdown li{
padding: 0;
display: block;
position: static;
background:

}
.dropdown li a{
width: 100%;
padding: 0;
justify-content: center;
}
#toggle_button:checked ~ ul{
display: block;
}
}

coding-kurzundknapp

Das ist wirklich CSS Oberliga. Viel zu lernen und zu verstehen für mich. Danke für das Tutorial.. wird direkt mal nachgebastelt 👍

Genial, kurz, knackig und voll mit Info's, die auch noch verständlich erklärt werden. 👍

dominikkindermann

Das Turtorial ist mit abstand das beste zu dem Thema. Ich danke Dir für das Video und deiner Erklärung. Mach weiter so...😀

bkruemmel

Echt gut gemacht. Um deiner Sprache hinterherzukommen brauchte ich zwar 0, 75 Geschwindigkeit und bei deiner Geschwindigkeit zum Mittippen 0, 5. aber zum Glück kann man ja runterregeln. Weiter so.

michaelstrau

Kurz und knapp, ohne viel Schnickschnack mit dem Fokus aufs Wesentliche. Klasse!

jurgensubat

Cool. Das ihr abkürzende Schreibweisen benutzt hat einen einen weiteren Lerneffekt nebenbei.

marcel_wendler

Königliches Video + Erklärung, einfach top

felixdergott

Super erklärt und bringt mich zudem was ich derzeit brauche. Zudem wird auch das mit dem Drop-down erklärt und wie man es auch für Smartphones programmieren kann, erklärt. Findet man nicht überall. Die css variablen sind neu für mich und werden jetzt im Projekt implementiert. Vielen Dank und weiter so mit qualitativ hochwertigen content mit deutscher Sprache 😅

iceman

Dieses Video hat mir AMTLICH weitergeholfen :)

kaim.

Sehr cooles Tutorial! Hat alles geklappt.
Konnte es durch die tolle, einfache Struktur super verwenden und einen (Mega) Dropdown MenüPunkt einbauen.
:root werde ich jetzt immer für fixe Farben und Höhen verwenden. Thankxxx.

TheSandLex

Bin erst jetzt auf euren Kanal gestoßen. Toll erklärt. Vielen Dank. Das beste was ich bisher gefunden habe. Einen kleinen Vorschlag habe ich noch, da der User in der mobilen Ansicht ja nicht weiß, dass er klicken kann um das Submenü aufzurufen. Ein kleines Chevron (˅) oder Dreieck (▾) hinter dem Wort "Products" löst das. Könnte man für das PC-Menü auch ausblenden.

MartinEckertStuttgart

Es wäre mega, wenn du immer deinen Quellcode mitgeben könntest ;)
Ansonsten weiter so und gerne mehr zu HTML&CSS gerade in Verbindung mit JavaScript

asensiodias

Erst einmal Danke für deine Mühe. Aber wieso kann man den Code nicht einfach zum Download anbieten? Es ist ja super, wie du alles erklärst, aber am Ende würde ich gerne den funktionierenden Code haben, da man beim Mitschreiben einfach Fehler macht. Ich schaue das Video nun zum dritten Mal, aber habe immer irgendwo einen Fehler, den ich nicht ausfindig machen kann. Als Anfänger hat man es da schwer. Das ist echt mühsam!

Novaliz

Hervorragendes Tutorial!
Vielen Dank!

timomoehlenkamp

sehr cooles Tutorial und tolle Tips,
besonders var(--navbar-height) zu definieren und bei nav Höhe und zum Abstand / top für nav li zu nutzen hat mir sehr gefallen.
Wäre das gleiche für das padding bei nav ul a und .expardable li sinnvoll oder spricht etwas dagegen?

Vielen Dank und bestimmt nicht das letzte Video was ich von Dir schaue :D

bjornprompeler

Die Höhe für das <html> und <body> Element sollte man nicht auf 100 Prozent setzen, da diese so nicht mehr mit dem Inhalt wachsen und abgeschnitten werden. Eine Höhe für das <html> Element ist überflüssig, da ohnehin nur der Inhalt des <body> im Viewport des Browsers angezeigt wird. Weise dem <html> und <body> Element einfach mal eine unterschiedliche "border" zu, füge dann Inhalte in den <body> ein (z.B. <div style="min-height: 3000px">) und schau dir an, welche Auswirkung die "fixe" Höhe von 100 Prozent hat. Verwende daher besser anstelle von "height" ein "min-height" und nutze "vh" (viewport-height) als Einheit. Wobei bei einer Mindesthöhe auch die 100 Prozent genutzt werden können.

nbotz

Dieser Moment wenn man das um 4:30 Nachts, bevor man schlafen geht, schaut und man denkt man hat unabsichtlich 300% Geschwindigkeit eingestellt. 🤣🤣 Trotzdem super erklärt. Vielen Dank.

lorddion

Gut gemacht! hat mir sehr weiter geholfen, vor allem weil ich Flex nicht verstanden habe! 👑

IamOkqy

Kompetent. Einzige Kritik: zu schnell gesprochen und daher für die, die es anschauen, oft schlecht zu verstehen, so dass man's wiederholen muss. Didaktisch ist das nen minus, denn man macht ja Tutorials zur Lehre für andere. Plus ist dann jedoch der veröffentlichte Code, so kann man ihn in Ruhe anschauen. 👍

cabo

Responsive Dropdown Menü Navigation (nur mit CSS) Tutorial Deutsch

Responsive Dropdown Menü Navigation (nur mit CSS) Tutorial Deutsch

Simple Responsive Dropdown Navigation Menu Using Pure HTML And CSS Only

Responsive Dropdown Menu using by Html Css Javascript

Responsive Fixed Navigation Bar with Dropdown

How To Make Responsive DropDown Menu Using HTML & CSS With Source Code

Dropdown Menü mit HTML und CSS erstellen | Tutorial Deutsch

Easy #CSS #DropDown Menü 2.0 diesmal Responsive! [Tutorial]

Responsive Drop Down Menu Bar Using HTML & CSS

Designing a responsive Navbar with dropdown with HTML and CSS | Designing a Blog with HTML/CSS #2.2

Create Multi-Level Dropdown Nav Menu | using HTML, CSS and JavaScript + ( Code Free )

Responsive Navbar with Dropdown on Hover using Javascript

Responsive Multi Level Dropdown Menu with CSS | CSS3 Animated Hamburger Menu

Navigationsleisten für Webseiten | HTML + CSS Tutorial Deutsch

Webflow Navigation Dropdown – Mega Menu Tutorial (deutsch)

Responsive Navigationsleisten | HTML, Flexbox, JavaScript, CSS Tutorial Deutsch

ASMR Programming - Responsive Navigation Menu Bar using HTML CSS - No Talking

Navigationsmenü Desktop nur HTML & CSS, Anwendungen Teil 3

Responsive Navigation Bar with mobile menu Using HTML & CSS

Create a sticky navbar with a dropdown menu — Webflow tutorial

Hamburger Menü nur HTML & CSS, Anwendungen Teil 1

Prevent Fixed Navbar from Overlapping Content (Content Shifting Upwards)

How To Add Drop-Down Menu In Elementor (2024) Tutorial For Beginners

Eigene Navigation Animation in Webflow erstellen - Dropdown Menü – Webdesign Tutorial deutsch

So erstellst und bearbeitest du ein Dropdown-Menü