Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » 8 Dropdown-Menüs zum Nachbauen — ohne JavaScript

8 Dropdown-Menüs zum Nachbauen — ohne JavaScript

  • Aktualisiert am 5. April 2023
  • von Denis Potschien
  • Webdesign
  • 8 Kommentare

Dank CSS lassen sich Dropdown-Menüs ganz ohne Einsatz von JavaScript anlegen und mit Hilfe von Media Queries responsiv gestalten. Das macht die Menüs auch auf mobilen Geräten mit entsprechenden Anpassungen einsatzfähig.

Einfach und genial: Die „Fully Responsive Navigation“ mit Dropdown-Menü

Die „fully responsive navigation“ enthält auch ein Dropdown-Menü.
Link zu CodePen

Zugegeben: Auf den ersten Blick sieht sie nicht wirklich berauschend aus. Hier ist etwas Vorstellungskraft gefragt, denn jede der hier vorgestellten Navigationen  müssen den eigenen Anforderungen angepasst. werden.

Die „Teufelsalbatross“-Navigation

Nils Binder hat diese Form der klassischen Navigation erschaffen, in welcher ein Logo und eine Hauptnavigation verwendet werden, ohne dass es etwaige Media Queries braucht. Im Übrigen ist es das einzige Beispiel hier, dass ganz ohne ein Dropdown-Menü auskommt! Das Endresultat sieht dabei so aus:

CodePen Embed RwGyKyX
Link zur Demo auf CodePen.io

Für die jeweils passenden Abstände zwischen Logo und Hauptnavigation sorgt dabei der „Teufelsalbatross“, den Nils per :first-child Pseudoelement einbindet. Hier eine Versinnbildlichung der Funktionsweise.

Die Navigation zentriert auf Mobil und für Desktop da wo sie hin soll.
Logo und Hauptnavigation sind auf Mobile zentriert, da die Hauptnavigation auf die nächste Zeile umgebrochen wird. Auf Desktop hingegen, im Beispiel (Link) ab 38rem aufwärts, verbleiben Logo und Hauptnavigation in derselben Zeile. Die Navigation ist eine Weiterentwicklung von Heydon Pickerings Flexbox Albatross.

Der HTML-Code dafür sieht so aus

<div class="centerflex">  <div class="logo">    <img src="linkzumlogo"  </div>  <nav aria-label="main">    <ul>      <li>Partners</li>      <li>About</li>      <li>Source</li>      <li>Contact</li>    </ul>  </nav></div>

Und hier das dazugehörige CSS

.centerflex {  /* ↓ Save the large negative or large positive value to a variable */  --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);    display: flex;  flex-wrap: wrap;  align-items: center;  /* ↓ Multiply by -1 to make negative */  margin: calc(var(--centerflex-gap, 1rem) / 2 * -1) 0;  &:before {    content: "";    flex-grow: 666;    margin: 0;    /* ↓ If --multiplier is negative, use 0px instead */    flex-basis: Max(0px, var(--multiplier));  }  > * {    /* ↓ Half the value to each element, combining to make the whole */    margin: calc(var(--centerflex-gap, 1rem) / 2) auto;    &:first-child {      order: -1;    }  }}

Die „Fluide Navigation“

Fluide Website-Navigation mit Dropdown-Menü und ohne JavaScript.
Link zur Demo auf CodePen

Die Besonderheit bei der Fluid Navigation ist, dass die Menüpunkte, die auf schmalen Bildschirmen nicht mehr drauf passen, hinter einem Dropdown verschwinden, während die Haupt-Menüpunkte immer noch dezidiert vorhanden sind.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Nachteil ist jedoch, dass sich keine Menü-Unterpunkte hinzufügen lassen.

Wer die „Fluide Navigation“ mag, dem haben wir das HTML und CSS dazu als Demo im CodePen oben bereitgestellt. Das Template kommt im Übrigen von Tristan White. Das HTML zur Fluiden Navigation sieht so aus:

<nav id="menu">  <ul id="menu-closed">    <li><a href="/newsletter/">Newsletter</a></li>    <li><a href="/seo/">SEO</a></li>    <li><a href="/tools/">Tools</a></li>    <li><a href="/websites/">Webseiten erstellen</a></li>    <li><a href="/webdesign/">Webdesign</a></li>    <li><a href="/websites/wordpress/">WordPress</a></li>    <li><a href="#menu-closed"></a></li>    <li><a href="#menu">&#9776; Menu</a></li>  </ul></nav>

Und das dazugehörige CSS sieht zur Zeit wie folgt aus:

 nav#menu {   font-size: 14px;   background-color: #fff;   box-shadow: 0 5px 20px #efefef;   margin: 0;   padding: 0 1em;   position: relative;   height: 60px;   overflow: hidden;} nav#menu ul {   margin: 0;   padding: 0;   list-style-type: none;   max-height: 120px;   position: relative;} nav#menu ul li {   display: inline-block;} nav#menu ul li:last-child {   position: absolute;   right: 0;   bottom: 45px;   background-image: linear-gradient(to right, rgba(236, 240, 241, 0) 0, #fff 2em);   padding-left: 3em;} nav#menu ul li:nth-last-child(2) {   display: none;} nav#menu ul li a {   display: inline-block;   padding: 0 1em;   color: #333;   font-weight: 700;   letter-spacing: 0.1em;   text-decoration: none;   text-transform: uppercase;   white-space: nowrap;   line-height: 60px;} nav#menu ul li a:hover {   background-color: rgba(51, 51, 51, 0.08);} nav#menu:target {   height: auto;   padding: 0;} nav#menu:target ul {   max-height: none;} nav#menu:target ul li {   display: block;} nav#menu:target ul li:not(:first-child) {   margin-top: 2px;} nav#menu:target ul li:last-child {   display: none;} nav#menu:target ul li:nth-last-child(2) {   display: inline-block;   position: absolute;   top: 0;   right: 0;   margin: 0;   border-left: 2px solid #dde4e6;} nav#menu:target ul li a {   display: block;   padding: 0 2em;   background-color: rgba(51, 51, 51, 0.05);} nav#menu:target ul li a:hover {   background-color: rgba(51, 51, 51, 0.08);}

Das Template dürfen Sie gerne auch bei Ihren eigenen Kunden einsetzen, es ist kostenlos und ohne Kennzeichnung verwendbar.

Responsive Mega Menu – Navigation

CodePen Embed eYmozEB
Eine responsive Navigation mit eingebautem Suchfeld. Erstellt von Samir Alley. Link zur Demo auf CodePen.io

Responsive Flexbox Dropdown Navigation

CodePen Embed XWJQKNN
Link zur Demo auf CodePen.io

Eine Listen-basierte Navigation, gebaut mit Flexbox von Jeff Weese. Die Navigation enthält zwei Ebenen an Untermenüs.

Responsive Dropdown Navigation Bar

CodePen Embed jOERrxb
Link zur Demo auf CodePen.io

Eine Standard-Navigation mit Logo und Navigation auf einer Ebene. Kreiert von Tania Rascia.

Pure CSS DropDown Menu

CodePen Embed VwYNjxG
Link zur Demo auf CodePen.io

Eine Navigation, die auf Mobile auf zwei Zeilen umbricht, statt hinter einem Dropdown zu verschwinden. Erschaffen von Andor Nagy.

Context Menü mit Feather icons

mobile-app-menü mit unterpunkten und icons.
Link zu CodePen

Håvard Brynjulfsen übersetzt eine Dribbble-Idee von Jakub Antalik mit ein wenig Hilfe der Open-Source-Symbolbibliothek Feather in HTML und CSS.

Animierte Responsive Navbar

Bildschirmfoto - Linie
Screenshot: Dr. Web

Diese Web-App-Navigation ist voll einsatzfähig für das nächste Projekt. Auch das Erklär-Video lohnt sich anzusehen. Hier der Link zu Github und hier der direkte Download-Link.

Ein Dropdown-Menü selber bauen

Verschachtelte Liste als Basis

Die meisten Menüs werden als unsortierte Liste ausgezeichnet. Dank der Möglichkeit, Listen zu verschachteln, können auch Unterseiten problemlos und übersichtlich in die Navigation eingebunden werden.

<nav><ul>  <li><a href="/">Start</a></li>  <li><a href="#">Profil</a>    <ul>      <li><a href="/profil/team/">Team</a></li>      <li>…</li>    </ul>  </li>  <li>…</li></ul></nav>

Im Beispiel erstellen wir die Navigation mit „<ul>“- und „<li>“-Elementen – einschließlich verschachtelter Menüpunkte. Wer HTML5 einsetzt, platziert die Liste in der Regel innerhalb eines „<nav>“-Elementes, um sie auch semantisch als Navigation auszuzeichnen.

CSS für erste Menüebene

Im nächsten Schritt gestalten wir per CSS das Aussehen des Menüs. Die Menüpunkte der ersten Ebene sollen dabei nebeneinander angeordnet sein. Hierfür muss zunächst das Standardaussehen der Liste entfernt werden – also die Aufzählungspunkte und der dazugehörige Abstand.

nav ul {  list-style: none;  margin: 0;  padding: 0;}

Als nächstes ordnen wir die einzelnen Menüpunkte nebeneinander an.

nav > ul > li {  float: left;}

Die Verwendung des „>“-Selektors verhindert, dass Eigenschaften auf „<li>“-Elemente vererbt werden, die tiefer verschachtelt sind. Für das Menü sollen schließlich nur die Menüpunkte der ersten Ebene nebeneinander dargestellt werden. Alle verschachtelten Menüpunkte sollen untereinander angeordnet sein. Da zunächst nur die erste Ebene der Navigation sichtbar sein soll, müssen alle anderen Ebenen ausgeblendet werden.

nav > ul > li > ul {  display: none;}

Das Aussehen der einzelnen Menüpunkte sollte man stets über das „<a>“-Element definieren. Dazu ist es sinnvoll, den Link als Blockelement auszuzeichnen, um Innenabstände (mit der „padding“-Eigenschaft) definieren zu können. Bei Inline-Elementen funktioniert das nicht. Die Links der zweiten und dritten Menüebene lassen sich natürlich anders gestalten als die der ersten.

nav > ul a {  display: block;  white-space: nowrap;  padding: 10px;  background: rgb(195, 35, 45);}nav ul > li > ul > li a {  background: rgb(0, 0, 0);  color: rgb(255, 255, 255);}

Da wir hier im Beispiel keine festen Breiten für die Menüpunkte definiert haben, nehmen die einzelnen Elemente immer die Breite des Inhaltes an. Text bricht dabei jedoch immer um. Daher sollte man per „white-space“-Eigenschaft einen automatischen Zeilenumbruch verhindern.

css-navigation1
Einfaches Dropdown-Menü

Schriften und Farben anzupassen, gehört natürlich auch zur Menügestaltung dazu. Außerdem kann man gegebenenfalls Schatteneffekte und abgerundete Ecken einsetzen. Will man dem „<ul>“-Element selbst CSS-Eigenschaften zum Aussehen zuordnen, sollte man zusätzliche Eigenschaften vergeben.

nav > ul {  float: left;  overflow: hidden;  padding: 0 10px 0 10px;  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);  background: rgb(195, 35, 45);}
css-navigation2
Dropdown-Menü mit abgerundeten Ecken und Schlagschatten

Die „float“-Eigenschaft sorgt dafür, dass die Breite des „<ul>“-Elementes nicht 100 Prozent ist, sondern sich der Breite der nebeneinander angeordneten Kindelemente anpasst. Per „overflow“ sorgt man dafür, dass abgerundete Ecken nicht durch die Kindelemente, die keine angerundeten Ecken haben, überdeckt werden.

Zweite und dritte Menüebene gestalten

Um den Zugriff auf die zweite Menüebene zu ermöglichen, wird die Pseudoklasse „:hover“ verwendet, die auslöst, wenn man mit der Maus über ein Listenelement der ersten Ebene fährt.

nav > ul > li:hover > ul {  display: block;  position: absolute;}nav > ul > li > ul > li {  position: relative;}

Während mit der „display“-Eigenschaft die zweite Ebene eines Menüpunkte angezeigt wird, sorgt „position“ dafür, dass das verschachtelte „<ul>“-Element nicht die Breite des übergeordneteten „<li>“-Elementes beeinflusst. Die „<li>“-Elemente der zweiten Ebene werden wiederum relativ dargestellt.

Für die dritte Menüebene sorgt „display“ wieder dafür, dass die Liste erst angezeigt wird, wenn man im übergeordneten „<li>“-Element die „:hover“-Pseudoklasse auslöst. Außerdem haben wir per CSS die dritte Ebene so ausgezeichnet, dass sie neben der Liste der zweiten Ebene dargestellt ist.

nav > ul > li > ul > li > ul {  display: none;}
nav > ul > li > ul > li:hover > ul {  display: block;}
nav > ul > li > ul > li:hover > ul {  display: block;  position: absolute;  left: 100%;  top: 0;}
css-navigation3
Aufgeklapptes Dropdown-Menü

Die „left“-Eigenschaft sorgt dafür, dass die dritte Liste neben der zweiten Liste angeordnet erscheint – und zwar auf der Höhe des übergeordneten „<li>“-Elementes (per „top“-Eigenschaft).

Alternatives Layout für mobile Geräte

Auf Smartphones gibt es selten genug Platz, um Menüelemente nebeneinander anzuordnen. Daher sollte man alle Elemente untereinander darstellen. Allerdings muss man auch dort nicht auf eine Dropdown-Navigation verzichten. Mit einigen wenigen Anpassungen lässt sich das Menü so darstellen, dass alle Menüpunkte untereinander platziert sind. Dazu müssen wir lediglich alle absoluten Positionierungen sowie die Floats entfernen.

nav > ul, #nav > ul > li {  float: none;}
nav > ul > li > ul, nav > ul > li:hover > ul {  position: relative;}
nav > ul > li > ul > li:hover > ul {  position: relative;  left: 0;}nav > ul > li > ul > li > ul > li > a {  font-style: italic;}

Außerdem muss die „left“-Eigenschaft auf Null gesetzt werden. Um die Menüpunkte der dritten Ebene besser von denen der zweiten unterscheiden zu können, stellen wir diese im Beispiel kursiv dar.

css-navigation4
Menü für Smartphones mit untereinander angeordneteten Menüpunkten

Um noch mehr Platz zu schaffen, ist es nicht unüblich, auch die Menüpunkte der ersten Ebene erst per „:hover“-Pseudoklasse erscheinen zu lassen. Dazu sind einige weitere Veränderungen notwendig. Zunächst einmal blenden wir alle Menüpunkte der ersten Ebene aus und erst per „:hover“ auf das oberste „<ul>“-Element ein. Da dieses „<ul>“-Element keine sichtbaren „<li>“-Elemente hat, wird per Pseudoelement „::before“ ein zusätzliches „<li>“-Element erzeugt, welches immer sichtbar ist. Diesem Pseudoelement weisen wir einen Text oder ein Icon zu.

nav > ul > li {  display: none;}nav > ul:hover li {  display: block;}nav > ul::before {  display: block;  content: "Menü";  padding: 10px;}

Natürlich gibt es auf Smartphones, die per Gesten gesteuert werden, keinen Hovereffekt, wie er mit der Maus auf Desktopgeräten ausgelöst wird. Stattdessen wird der Hovereffekt per Fingertap ausgelöst. Problematisch ist hierbei, dass bei einem Tap auf einen Link dieser zeitgleich mit dem Hovereffekt aufgerufen wird. Daher sollte man Menüpunkte, die ein Untermenü aufrufen, selbst nie mit einem Link versehen. Sonst sind untergeordnete Menüpunkte per Tap nicht erreichbar.

css-navigation5
Platzsparendes Dropdown-Menü (zu- und aufgeklappt)

Entweder setzt man einen seiteninternen Link (also „#“) oder verzichtet ganz auf die Auszeichnung eines „<a>“-Elementes und ersetzt dieses beispielsweise durch ein „<span>“-Element.

css-navigation6
Darstellung der Untermenüs im mobilen Dropdown-Menü

Die untergeordneten Menüs werden jeweils unterhalb des übergeordneten Menüpunktes dargestellt.

Menüpunkte mit Unterseiten kennzeichnen

Damit man direkt erkennt, welche Menüpunkte ein verschachteltes Untermenü haben, könnten wir diese mit etwas CSS kennzeichnen. Dazu fügen wir jedem „<a>“-Element das Pseudoelement „::after“ hinzu, um ein Plus-Zeichen zu ergänzen.

nav li > a:after {  content: " +";}

Anschließend entfernen wir das Plus-Zeichen per Pseudoklasse „:only-child“ von solchen „<a>“-Elementen wieder, welche das einzige Kindelement sind, also kein „<ul>“-Element als Kind besitzen.

nav li > a:only-child:after {  content: "";}
css-navigation7
Dropdown-Menü mit Plus-Zeichen bei Menüpunkten mit Untermenü

Links zu den Navigations-Beispielen:

  • Responsive Mega Menu
  • Flexbox Dropdown Navigation
  • Responsive Dropdown Navigation
  • Pure CSS Dropdown Menu
  • Fluid Navigation

Fazit

Es gibt viele Wege, ein Dropdown-Menü auf einer Webseite einzubauen, und ich hoffe, du konntest in einem der obigen Beispiele etwas passendes finden!

Hast Du noch mehr gute Beispiele, die Dir gefallen? Poste sie in den Kommentaren!

Dieser Beitrag wurde am 7. April 2015 veröffentlicht und am 22. April 2022 von Grund auf überarbeitet.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Inhaltsverzeichnis

Agenturpartner in Zolling

Edit Content

Philipp Pistis

Unsere Expertise in WordPress und Webentwicklung steht für Qualität und Effizienz. Jedes Projekt erhält bei uns eine individuelle Behandlung, denn Standardlösungen sind nicht unser Ding.

Gemeinsam bieten wir Ihnen eine Rundum-Betreuung für Ihr Online-Projekt. Wir setzen auf smarte Lösungen, die Ihre Website nicht nur sichtbarer machen, sondern auch messbar mehr Neukunden generieren.

Lassen Sie uns in einem kostenfreien Erstgespräch über Ihr Projekt sprechen. Wir freuen uns darauf, Ihnen ein passendes Angebot zu unterbreiten.

— Philip Pistis,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

8 Antworten

  1. Manfred Egger sagt:
    8. April 2015 um 8:55 Uhr

    Netter Beitrag, allerdings wäre – grade in Hinblick auf responsive Best practices – ein “Mobile first”-Ansatz angebracht.
    Man könnte ein paar Zeilen Code sparen, wenn statt dem “display:none” für das ul der zweiten Menüebene und dem ganzen Code aus dem Bereich “Zweite und dritte Menüebene gestalten” einfach nur folgendes verwendet wird:

    nav > ul ul {
      display: none;
      position: absolute;
    }
    nav > ul li:hover > ul {
      display: block;
    }
    nav > ul ul ul {
      left: 100%;
      top: 0;
    }

    Das sollte genauso funktionieren. Wie es sich dann mit der Performance verhält, hab’ ich nicht getestet, allerdings sollte das nicht sonderlich ins Gewicht fallen 😉

    Antworten
  2. Mike sagt:
    14. Dezember 2015 um 15:17 Uhr

    Super Menu !!! Aber sobald sich das Menü in einem Container befindet der nicht der komplette Höhe des Menüs (also im ausgeklappten Zustand) entspricht, dann klappen sich die Untermenu Punkte wieder ein beim Drüberfahren. Ebenso wenn unter dem Menü sich direkt ein JS Anwendung befindet.
    VG Mike

    Antworten
  3. Mike sagt:
    14. Dezember 2015 um 17:15 Uhr

    Des weiteren ist es schwierig das komplette Menü rechts zu positionieren.
    VG Mike

    Antworten
  4. helene sagt:
    28. Oktober 2018 um 1:57 Uhr

    Bei mir funktioniert das nicht, fehlt was? Es gibt mir kein Button nur die ganze Codierung ist sichtbar.

    Antworten
  5. Clipart - Designer sagt:
    12. November 2019 um 15:36 Uhr

    Eine “hübsche” Version von Menü mit einem modernen Look & Feel wäre noch chicker! ))

    Aber trozdem Danke für den Artikel!

    Antworten
  6. Siegbert sagt:
    23. Januar 2021 um 14:42 Uhr

    Seit den späten 90ern frage ich mich nun schon, warum überall immer diese doppelte Verschachtelung in Ungeordnete Listen und deren Listenelemente und konnte mich bisher auch nicht dazu durchringen. Gut, vor Erscheinen des “nav” Tags hätte man es ja noch mit Zugänglichkeit für Screen-Reader und mit SEO Relevanz begründen können, aber jetzt mit HTML5? Mit dem nav Tag als umfassenden Container der “a” Tags (Links), sollte der Zugänglichkeit und der Semantic doch eigentlich Genüge getan sein. Und auch der dümmste Suchmaschinenrobot wird wohl längst den Sinn des nav Tags, nämlich einen Bereich semantisch als Linkliste auszuweisen, verinnerlicht haben und nicht dran vorbeischliddern. Der container und darin alle Link Tags des Menüs in simpler Form von *** und gut ist, odda?? Waren die Listen und deren Listenelemente nicht auch ursprünglich nur als Aufzählungszeichen und zur visuellen Ordnung im eigentlichen Textbereich angedacht?

    Antworten
  7. Reto sagt:
    11. März 2021 um 18:20 Uhr

    Guten Abend alle. Ich finde die “Fluide Navigation” für mich sehr interssant und wende das auch an. Ich versuche jedoch ein Untermenu einzubinden, leider mit wenig Erfolg. Die zweite Ebene ist nicht ersichtlich bzw mit Hover wird da nichts als “Submenu” dargestellt. Eine Zweite Menüebene, wie oben im Beispiel beschrieben, zu gestalten, bewirkt bei der Fluide Navigation keinen Effekt. Da sind andere/zusätzliche CSS Befehle zu vergeben, ich werde aber leider nicht schlau oder mir fehlen sicher auch die nötigen Kenntnisse.

    Antworten
    1. Markus Seyfferth sagt:
      22. April 2022 um 10:20 Uhr

      Hallo Reto, soweit ich weiss, bekommst Du bei der Fluiden Navigation keine Menü-Unterpunkte eingebaut. Habe ich im Beitrag ergänzt.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen