Bitdoze-Logo

Floating-Menü zu einer Carrd-Website hinzufügen

So fügst du einer Carrd-Website ein schwebendes Hamburger-Menü mit eigenem HTML/CSS/JS hinzu. Inklusive Accessibility-Fixes, Troubleshooting und Styling-Tipps.

Dragos

Aktualisiert Veröffentlicht 28 Min. Lesezeit

Schwebendes Hamburger-Menü in der unteren rechten Ecke einer Carrd-Website

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Carrd.co ist eine solide Plattform für One-Page-Websites, aber wenn deine Seite viele Sektionen hat, verlieren Besucher schnell die Orientierung. Ein schwebendes Hamburger-Menü löst das. Es gibt deiner Carrd-Website eine immer sichtbare Navigation, die in der unteren rechten Ecke sitzt – genau da, wo auf dem Handy der Daumen natürlich ruht.

Carrds native Elemente enthalten keine schwebende Nav-Komponente, du brauchst also eigenen Code über das Embed-Element. Die gute Nachricht: ein Embed-Block, einmal einfügen, fertig. Der Code unten bringt eingebaute Accessibility mit (ARIA-Attribute, Keyboard-Support, Reduced-Motion-Handling) und zerstört dein bestehendes Carrd-Styling nicht.

Wenn du die Plattform noch abwägst, schau erst in unser Carrd.co Review.

Carrd.co testen

Warum ein schwebendes Hamburger-Menü deine Carrd-Website verbessert

  • Die Navigation bleibt erreichbar, ohne den Hauptinhaltsbereich vollzustellen – besonders auf mobilen Screens
  • Das Hamburger-Icon ist universell bekannt. Nutzer wissen, dass sie es für ein Menü antippen
  • Die Platzierung unten rechts entspricht der natürlichen Daumenposition für einhändige Handy-Nutzung
  • Mit position: fixed bleibt das Menü sichtbar, während Besucher durch deine gesamte Seite scrollen

Voraussetzungen

Bevor du startest, stelle sicher, dass du Folgendes hast:

  • Einen Carrd-Pro-Standard- (19 $/Jahr) oder Pro-Plus-Plan (49 $/Jahr). Custom-Code-Embeds sind auf dem Free-Plan und Pro Lite (9 $/Jahr) NICHT verfügbar. Das ist der häufigste Grund, warum das Floating-Menü bei Leuten „nicht funktioniert”: Ihr Plan unterstützt keine Embeds. Siehe Carrds Planvergleich für Details.
  • Eine Carrd-Website mit Sektionen, die du verlinken willst. Jeder Menüeintrag zeigt auf einen Anker (wie #about, #contact), der zum Namen eines Section Breaks oder Scroll Points passt. Wenn du deine Sektionen noch nicht benannt hast, tu das zuerst.
  • Die Möglichkeit, deine Website zu veröffentlichen. Custom-Code-Embeds zeigen KEINE Vorschau im Carrd-Editor. Du musst veröffentlichen, um das Floating-Menü in Aktion zu sehen.

Pro-Plan erforderlich

Das Embed-Element erfordert Carrd Pro Standard (19 $/Jahr) oder höher. Free- und Pro-Lite-Pläne (9 $/Jahr) können keine Custom-Code-Embeds nutzen. Wenn du auf Pro Lite bist, musst du upgraden, bevor das funktioniert.

Wenn du schon einen Back-to-Top-Button auf Carrd hinzugefügt hast, hast du denselben Embed-Workflow genutzt. Für weiches Scrollen zwischen Sektionen siehe unsere Anleitung zu Smooth Scroll und Anker-Links in Carrd. Sobald dein Menü funktioniert, erwäge, eine eigene Domain zu Carrd hinzuzufügen für eine professionelle URL.

Das schwebende Carrd-Hamburger-Menü hinzufügen

Drei Schritte: Embed hinzufügen, Code einfügen, deine Links anpassen.

1. Ein Embed-Element zu deiner Carrd-Website hinzufügen

Klicke im Carrd-Editor auf den +-Button und füge ein Embed-Element irgendwo auf der Seite hinzu. Konfiguriere es als:

  • Type: Code
  • Style: Hidden, Body End

„Hidden, Body End” bedeutet, der Code wird am Ende des <body> der Seite eingefügt, nach Carrds eigenem Inhalt. Er erscheint nicht als sichtbarer Inhaltsblock in deinem Layout, und weil das Menü position: fixed hat, schwebt es trotzdem in der Ecke. Nutze hier nicht Head: Das Snippet enthält HTML-Elemente und ein Script, das sie sucht – und das gehört in den Body. Das Embed ist in der Editor-Vorschau unsichtbar. Du siehst das Menü erst nach dem Veröffentlichen.

Carrd-Embed-Element-Einstellungen mit Type: Code und Style: Hidden samt Location-Dropdown

Der Screenshot zeigt das Location-Dropdown auf Head. Für dieses Menü wähle in demselben Dropdown Body End.

2. Den HTML-, CSS- und JavaScript-Code hinzufügen

Füge diesen kompletten Code in das Embed-Element ein:

html
<style>
  :root {
    --primary-color-ha: rgba(0, 112, 15, 0.58);
    --secondary-color-ha: #fff;
    --font-size-base-ha: 16px;
    --floating-hamburger-size: 50px;
    --floating-font: inherit;
  }

  /* Scoped box-sizing: won't break Carrd's native styling */
  .floating-hamburger,
  .floating-hamburger *,
  .floating-menu,
  .floating-menu * {
    box-sizing: border-box;
  }

  .floating-hamburger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: var(--floating-hamburger-size);
    height: var(--floating-hamburger-size);
    background-color: var(--primary-color-ha);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
  }

  .floating-hamburger:focus-visible {
    outline: 2px solid var(--secondary-color-ha);
    outline-offset: 2px;
  }

  .floating-hamburger .floating-bar {
    width: 30px;
    height: 3px;
    background-color: var(--secondary-color-ha);
    margin: 3px 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-hamburger .floating-bar {
      transition: 0.4s;
    }
  }

  #floating-menu-toggle {
    display: none;
  }

  .floating-menu {
    position: fixed;
    bottom: calc(var(--floating-hamburger-size) + 30px);
    right: 20px;
    background-color: var(--primary-color-ha);
    padding: 20px;
    border-radius: 10px;
    transform: scale(0);
    transform-origin: bottom right;
    visibility: hidden;
    z-index: 999;
    font-family: var(--floating-font);
    font-size: var(--font-size-base-ha);
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-menu {
      transition: transform 0.3s ease-in-out, visibility 0.3s;
    }
  }

  #floating-menu-toggle:checked ~ .floating-menu {
    transform: scale(1);
    visibility: visible;
  }

  .floating-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .floating-menu li {
    margin: 15px 0;
  }

  .floating-menu li a {
    color: var(--secondary-color-ha);
    text-decoration: none;
    font-size: 1em;
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-menu li a {
      transition: font-size 0.3s ease;
    }
  }

  .floating-menu li a:hover {
    font-size: 1.1em;
  }

  .floating-menu a:focus-visible {
    outline: 2px solid var(--secondary-color-ha);
    outline-offset: 2px;
  }

  .floating-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--secondary-color-ha);
    font-size: 1.2em;
    cursor: pointer;
    font-family: var(--floating-font);
  }
</style>

<input type="checkbox" id="floating-menu-toggle" />
<label for="floating-menu-toggle" class="floating-hamburger"
       aria-label="Open navigation menu" tabindex="0" role="button">
  <span class="floating-bar"></span>
  <span class="floating-bar"></span>
  <span class="floating-bar"></span>
</label>
<nav class="floating-menu" role="navigation">
  <button class="floating-close-button" aria-label="Close menu">&#x2715;</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<script>
(function () {
  const toggle = document.getElementById("floating-menu-toggle");
  const label = document.querySelector(".floating-hamburger");

  // Toggle aria-expanded for screen readers
  toggle.addEventListener("change", function () {
    label.setAttribute("aria-expanded", this.checked);
  });
  label.setAttribute("aria-expanded", "false");

  // A label with role="button" doesn't react to Enter/Space on its own
  label.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggle.checked = !toggle.checked;
      label.setAttribute("aria-expanded", toggle.checked);
    }
  });

  // Close button
  document.querySelector(".floating-close-button").addEventListener("click", function () {
    toggle.checked = false;
    label.setAttribute("aria-expanded", "false");
    label.focus();
  });

  // Close on link click
  document.querySelectorAll(".floating-menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      toggle.checked = false;
      label.setAttribute("aria-expanded", "false");
    });
  });

  // Escape key closes menu, returns focus to hamburger
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && toggle.checked) {
      toggle.checked = false;
      label.setAttribute("aria-expanded", "false");
      label.focus();
    }
  });
})();
</script>

Was sich gegenüber dem alten Code geändert hat

Zwei kritische Fixes für wiederkehrende Leser: (1) Das globale * { margin: 0; padding: 0; box-sizing: border-box; }-Reset wurde entfernt. Es zerstörte Carrds natives Element-Spacing. (2) Das body { font-size; font-family }-Override wurde entfernt. Es kaperte allen Text auf der Seite. Beide wurden durch scoped Selektoren ersetzt, die nur das Floating-Menü selbst betreffen.

Accessibility eingebaut

Dieser Code enthält ARIA-Attribute (aria-label, aria-expanded, role="navigation"), sichtbare Fokus-Outlines für Tastaturnutzer, @media (prefers-reduced-motion: no-preference) um alle Animationen und Escape-Tasten-Support zum Schließen des Menüs. Das adressiert die Anforderungen des European Accessibility Act (gültig seit 28. Juni 2025) für interaktive UI-Elemente.

Die CSS-Custom-Properties erklärt

Diese Variablen am Anfang des <style>-Blocks steuern das Aussehen des Menüs. Passe sie an dein Website-Design an:

  1. --primary-color-ha: Hintergrundfarbe des Hamburger-Buttons und Menü-Panels. Nutzt rgba() für Transparenz, damit Besucher Inhalte hinter dem Menü noch sehen. Ändere die RGB-Werte und den Alpha-Kanal passend zu deiner Marke. Nutze https://rgbacolorpicker.com/, um eine Farbe zu wählen.

  2. --secondary-color-ha: Farbe der Hamburger-Balken, des Menütexts und des Schließen-Buttons. Standard ist Weiß (#fff).

  3. --font-size-base-ha: Basis-Schriftgröße für Menüeinträge. Standard 16px ist eine gute Lesbarkeits-Baseline.

  4. --floating-hamburger-size: Durchmesser des runden Hamburger-Buttons in Pixeln. Standard 50px lässt sich auf dem Handy bequem antippen.

  5. --floating-font: Schriftfamilie für Menütext. Standard inherit nutzt die Schrift deiner Carrd-Website. Ersetze sie durch einen eigenen Font-Stack, wenn du einen anderen Look willst (z. B. "Inter", sans-serif).

  6. .floating-hamburger .floating-bar width: 30px: Steuert die Breite der drei Hamburger-Linien. Anpassen, wenn du schmalere oder breitere Balken im Button willst.

Die Menüeinträge stehen im <ul> innerhalb des <nav>:

html
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#testimonials">Testimonials</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Füge Einträge hinzu, entferne oder benenne sie passend zu den Sektionen deiner Carrd-Website um. Jedes href sollte den Namen nutzen, den du einem Section Break oder Scroll Point im Carrd-Editor gegeben hast (z. B. verlinkt #about auf den Section Break oder Scroll Point namens about). Nutze #about, nicht #about-section, auch wenn Carrd die Section als id="about-section" rendert. href="#" scrollt zurück an den Seitenanfang.

Für das beste Erlebnis kombiniere dieses Menü mit Smooth Scroll und Anker-Links in Carrd, sodass ein Klick auf einen Menüeintrag weich scrollt statt zu springen.

Prüfen, dass dein Floating-Menü funktioniert

Geh nach dem Veröffentlichen deiner Carrd-Website diese Checkliste durch:

  1. Veröffentliche die Website. Embeds funktionieren nicht in der Editor-Vorschau. Das ist der häufigste „funktioniert nicht”-Fehler.
  2. Öffne die veröffentlichte URL in einem Inkognito-/privaten Fenster. Räumt gecachten Zustand weg.
  3. Klicke den Hamburger-Button. Das Menü sollte aus der unteren rechten Ecke hereinskaliert werden.
  4. Klicke einen Menü-Link. Die Seite scrollt zu dieser Sektion und das Menü schließt automatisch.
  5. Klicke den Schließen-Button (✕). Das Menü schließt und der Fokus springt zurück zum Hamburger-Button.
  6. Teste auf einem echten Mobilgerät (oder dem Geräte-Emulator der Chrome DevTools). Der Button sollte mit dem Daumen gut zu treffen sein.
  7. Tastatur-Test. Mit Tab zum Hamburger-Button, Enter/Space zum Öffnen drücken, durch die Menüeinträge tabben, Escape zum Schließen drücken. Der Fokus sollte zum Hamburger zurückkehren.
  8. Prüfe auf Überlappungen. Das Menü sollte andere fixierte Elemente wie Cookie-Hinweise oder Back-to-Top-Buttons nicht verdecken. Wenn du einen WhatsApp-Button auf Carrd oder ähnliche schwebende Elemente hast, passe die z-index-Werte an, um Stacking-Konflikte zu vermeiden.
  9. Reduced-Motion-Test. Aktiviere die „Bewegung reduzieren”-Einstellung deines OS und verifiziere, dass das Menü ohne Animation sofort öffnet/schließt.

Embeds zeigen keine Vorschau im Editor

Du MUSST deine Carrd-Website veröffentlichen, um das Floating-Menü zu sehen. Der Carrd-Editor rendert Custom-Code-Embeds nicht in seiner Vorschau. Wenn du das Menü nicht siehst, erst veröffentlichen, dann die Live-Website prüfen.

Troubleshooting: häufige Probleme

Menü erscheint überhaupt nicht

Drei Dinge der Reihe nach prüfen:

  1. Dein Plan. Embeds erfordern Carrd Pro Standard (19 $/Jahr) oder Pro Plus (49 $/Jahr). Free- und Pro-Lite-Pläne (9 $/Jahr) unterstützen keinen eigenen Code. Prüfe deinen Plan unter carrd.co/docs/pro/plans.
  2. Embed-Einstellungen. Das Embed muss auf Type: Code, Style: Hidden, Body End stehen. Head ist der falsche Ort für das HTML und Script des Menüs, und ein Inline-Embed innerhalb einer Section verschwindet, wenn eine Multi-Section-Website zu einer anderen Section wechselt.
  3. Du schaust auf den Editor, nicht auf die veröffentlichte Website. Erst veröffentlichen, dann die Live-URL öffnen.
Menü zerstört andere Elemente auf der Seite

Wenn du älteren Code nutzt, der * { margin: 0; padding: 0; box-sizing: border-box; } enthält, ist dieses globale Reset das Problem. Es löscht Carrds natives Spacing auf jedem Element. Ersetze es durch die scoped Version im Code oben. Sie wendet box-sizing nur auf die eigenen Elemente des Floating-Menüs an.

Menü erscheint hinter anderen Elementen

Erhöhe den z-index auf .floating-hamburger (aktuell 1000) und .floating-menu (aktuell 999). Das Element mit dem höheren z-index-Wert liegt oben. Wenn du andere eigene Elemente mit hohen z-index-Werten hast, musst du eventuell höher gehen. Wenn du CSS-Custom-Properties für andere Carrd-Anpassungen wie einen Dark-Mode-Umschalter nutzt, stelle sicher, dass deine Variablennamen nicht kollidieren.

Hamburger reagiert nicht auf Klicks

Ein anderes fixiertes Element überlappt wahrscheinlich den Hamburger-Button. Rechtsklicke den Hamburger-Bereich, wähle „Untersuchen” und schau dir den z-index der benachbarten Elemente an. Ein Cookie-Banner oder Chat-Widget mit höherem z-index blockiert Klicks. Passe die z-index-Werte an, damit der Hamburger oben liegt.

JavaScript funktioniert nicht

Öffne deine Browser-Konsole (F12) und prüfe auf Fehler. Wenn du mehrere Carrd-Embeds mit <script>-Blöcken hast, können sie kollidieren, besonders wenn sie dieselben Variablennamen nutzen. Stelle sicher, dass jedes Embed eindeutige IDs und Variablennamen nutzt. Der hier verwendete Checkbox-Hack ist dasselbe Muster wie ein Popup-Modal auf Carrd. Wenn du beides hast, stelle sicher, dass jede eine eindeutige Checkbox-ID nutzt.

Code lässt sich im Embed nicht speichern

Carrd-Embeds haben ein Limit von 16.384 Zeichen. Der Code in diesem Artikel liegt weit darunter, aber wenn du viel eigenes CSS oder extra Menüeinträge hinzugefügt hast, könntest du es erreichen. Teile den Code auf zwei Embeds: den <style>-Block in ein „Hidden, Head”-Embed und HTML + <script> in ein „Hidden, Body End”-Embed.

Menü funktioniert auf Desktop, aber nicht auf Mobile

Carrd hat responsive Sichtbarkeitseinstellungen pro Element. Prüfe, dass dein Embed-Element auf mobilen Breakpoints nicht versteckt ist. Wähle im Carrd-Editor das Embed und suche nach Sichtbarkeits-Schaltern. Stelle sicher, dass es auf allen Gerätegrößen sichtbar ist.

Alternative Navigationsansätze für Carrd

Das schwebende Hamburger-Menü ist eine Art, Carrd-Navigation zu lösen. Hier andere Muster je nach Bedarf:

  • Sticky Header. Eine fixierte Header-Leiste mit Navigationslinks, die oben im Viewport bleibt. Anderes visuelles Muster als ein schwebender Button. Siehe unser Sticky-Header-in-Carrd-Tutorial.
  • Seitenmenü. Ein von der Bildschirmkante hereingleitendes Panel, gut für Websites mit vielen Navigationseinträgen. Unsere Seitenmenü-für-Carrd-Anleitung deckt das ab.
  • Mobile responsive Navbar. Ein Hamburger-Menü, das sich in den Seiten-Header integriert statt zu schweben. Siehe responsive Carrd-Mobile-Navbar für drei verschiedene Methoden.
  • Drittanbieter-Plugins. Vorgefertigte Carrd-Widgets, die die Navigation für dich übernehmen. Optionen sind das Tabs-Plugin und das Accordion-Plugin von CarrdMe, oder stöbere in der Plugin Kitchen und Jason’s Plugins für mehr.
Was ist mit der nativen Popover API?

Das HTML-popover-Attribut (Baseline 2025, in allen modernen Browsern unterstützt) bietet Light-Dismiss-Verhalten, Top-Layer-Rendering und Tastatur-Handling nativ ganz ohne JavaScript. Theoretisch könnte es das Floating-Menü deutlich vereinfachen. In der Praxis könnten Carrds Embed-Beschränkungen popover-Attribute strippen oder stören. Ich habe es in einem Carrd-Embed noch nicht getestet. Wenn du es probierst und es funktioniert, wäre das ein sauberer Ansatz als der hier genutzte Checkbox-Hack.

Fazit

Ein schwebendes Hamburger-Menü gibt deiner Carrd-One-Page-Website eine immer erreichbare, Mobile-First-Navigation, ohne den Inhaltsbereich vollzustellen. Der aktualisierte Code ist gescoped (keine globalen CSS-Resets, die Carrds Styling zerstören), barrierefrei (ARIA-Attribute, Keyboard-Support, Reduced-Motion-Handling) und über CSS-Custom-Properties anpassbar.

Nach dem Veröffentlichen auf echten Geräten testen, Farben und Größen an deine Marke anpassen – und du hast eine Navigationskomponente, die für jeden Besucher funktioniert.

#Carrd#Floating Menu#Hamburger Menu

Ähnliche Artikel

Hat diese Anleitung bei dir funktioniert?

Dragos

Geschrieben von Dragos

Dragos is the author of Bitdoze — practical DevOps, programming, and self-hosting guides.

Mehr Anleitungen von Dragos →

Brauchst du Hilfe bei Astro, VPS oder einer Self-hosted-App? Services ansehen →