---
title: "So fügst du ein Seitenmenü zu deiner Carrd-Website hinzu (2026)"
description: "Lerne, wie du ein Seitenmenü zu deiner Carrd-Website mit HTML, CSS & JS hinzufügst. Deckt Pro-Standard-Setup, Sections-Anker, Barrierefreiheit und Mobile-Optimierung ab."
date: 2025-08-04
categories: ["web-development"]
tags: ["carrd","carrd-sidebar-menu"]
---

*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](https://go.bitdoze.com/carrd) ist eine exzellente Plattform für One-Page-Websites, aber die Navigation wird knifflig, sobald du mehr als ein paar Sektionen hast. Ein Seitenmenü löst das, indem es die Navigation aus dem Bildschirm tuckt, bis der Besucher sie braucht. Kein verschwendeter Platz, kein überladener Header.

Ein Carrd-Seitenmenü funktioniert gut, weil:

1. **Es den Content-Platz maximiert.** Die Navigation bleibt versteckt, bis der Besucher den Hamburger-Button tippt, und hält den Fokus auf deinem Inhalt.
2. **Bessere Organisation** für Websites mit mehreren Sektionen. Besucher können in jeden Bereich springen, ohne zu scrollen.
3. **Mobilfreundlich.** Das Slide-in-Panel nutzt touch-freundliche Ziele (40px+) und behandelt den iOS-Scroll-Lock sauber.
4. **Anpassbare Positionierung.** Von links oder rechts öffnen, den Button schweben lassen oder an einem Punkt der Seite festpinnen.

[Carrd.co testen](https://go.bitdoze.com/carrd)

Einige Carrd-Tutorials:

- [Ein Floating-Menü zu Carrd hinzufügen](/de/carrd-floating-menue/)
- [Einen Sticky Header zu Carrd hinzufügen](/de/carrd-sticky-header-hinzufuegen/)
- [Einen Cookie-Hinweis zu Carrd hinzufügen](/de/carrd-cookie-hinweis-hinzufuegen/)
- [Eine Preistabelle zu Carrd hinzufügen](/de/carrd-preistabelle-hinzufuegen/)
- [Carrd.co Review](/de/carrd-review/)
- [Accordion-FAQs zu Carrd hinzufügen](/de/carrd-akkordeon-hinzufuegen/)
- [Carrd mobile responsive Navbar](/de/carrd-mobile-navbar/)
- [Carrd Zurück-nach-oben-Button (Guide 2026)](/de/carrd-zurueck-nach-oben-button/)
- [Popup-Modal für Carrd](/de/carrd-popup-modal/)
- [Carrd Dark-Mode-Umschalter](/de/carrd-dark-mode-umschalter/)

> Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website **[carrdme.com](https://carrdme.com/)**.

## Voraussetzungen: Carrd Pro Standard und das Embed-Element

**Erfordert Carrd Pro Standard (19 $/Jahr)**

Das Embed-Element ist nur in den Plänen **Carrd Pro Standard (19 $/Jahr)** oder **Pro Plus (49 $/Jahr)** verfügbar. Der kostenlose Basic-Plan begrenzt Websites auf 50 Elemente und hat keine Embeds. Pro Lite (9 $/Jahr) enthält auch keine Embeds.

Video: [How to Add a Slide In Sidebar Menu to a Carrd Website](https://www.youtube.com/embed/UAyDbfnZWCs)

Es gibt eine 7-tägige kostenlose Pro-Testversion ohne Kreditkarte. Die Testversion gibt dir Pro-Plus-Features, was Embeds einschließt, du kannst das Seitenmenü also vor dem Commitment testen.

Wenn du upgradest, willst du außerdem [eine eigene Domain mit Carrd verbinden](/de/carrd-domain-verbinden/), während du dabei bist.

Ein paar Dinge, die du vor dem Start wissen solltest:

- **Kosten:** 19 $/Jahr Minimum (Pro Standard). Das ist die Untergrenze für diesen Ansatz.
- **Scope:** Der Code läuft site-weit aus einem Hidden-Embed am Body End. Behalte ein Backup des Codeblocks. Wenn etwas bricht, ist der Fix eine Neuveröffentlichung entfernt.
- **Embeds rendern nicht im Carrd-Builder.** Du musst die Website veröffentlichen, um das Seitenmenü zu sehen. Nach dem Veröffentlichen hart aktualisieren (Strg+Shift+R), um den Browser-Cache zu umgehen.

## So fügst du das Carrd-Seitenmenü hinzu

Der Ansatz ist geradlinig: Füge einen HTML/CSS/JS-Block in ein Embed-Element ein. Keine externen Abhängigkeiten, keine API-Keys, kein Build-Schritt.

**Veröffentlichen zum Testen**

Embed-Elemente sind in der Carrd-Builder-Vorschau unsichtbar. Nach dem Hinzufügen des Codes veröffentliche deine Website und öffne die Live-URL. Nutze Strg+Shift+R (oder Cmd+Shift+R auf dem Mac) für eine harte Aktualisierung, um gecachte Styles zu umgehen.

### 1. Ein Embed-Element hinzufügen (Type: Code, Style: Hidden, Body End)

Klicke auf den `+`-Button im Carrd-Builder, füge ein **Embed**-Element hinzu und setze:

- **Type:** Code
- **Style:** Hidden, Body End

Das injiziert deinen Code am Ende des `` der Seite, außerhalb von Carrds eigenem Layout, er lädt also auf jeder Sektion, ohne Platz in deinem Design einzunehmen. Vermeide hier Head: Das Snippet enthält sichtbares Markup (den Button und das Panel), und `` ist kein gültiger Ort dafür.

![Carrd-Embed-Element-Einstellungen mit Type: Code und Style: Hidden, mit dem Location-Dropdown daneben](@assets/images/24/02/carrd-back-to-top-embed.png)

Der Screenshot zeigt das Location-Dropdown auf Head gesetzt; wähle stattdessen **Body End**.

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

Unten ist der komplette Code. Zentrale Verbesserungen gegenüber einer Basis-Implementierung: gescopedes Box-Sizing (kein globaler Reset), saubere ARIA-Attribute für Screenreader, Fokus-Management und ein iOS-Scroll-Lock-Fix.

```html
<style>
  :root {
    /* Sidebar Configuration */
    --sidebar-position: left; /* Options: 'left' or 'right' */
    --sidebar-width: 300px;
    --sidebar-bg-color: rgba(25, 25, 25, 0.95);
    --sidebar-text-color: #ffffff;
    --sidebar-border-color: #444;
    --sidebar-hover-color: rgba(255, 255, 255, 0.1);
    --sidebar-accent-color: #007bff;
    --contact-button-hover-color: #0056b3;

    /* Menu Button Configuration */
    --menu-button-bg: rgba(0, 123, 255, 0.9);
    --menu-button-color: #ffffff;
    --menu-button-size: 50px;
    --menu-button-floating: true; /* Options: 'true' or 'false' (string, not boolean) */
    --menu-button-float-position: top; /* Options: 'top' or 'bottom' (only when floating is true) */
    --menu-button-float-side: left; /* Options: 'left' or 'right' (only when floating is true) */
    --menu-button-position-top: 20px;
    --menu-button-position-side: 20px;

    /* Animation Settings */
    --sidebar-animation-speed: 0.3s;
    --button-animation-speed: 0.2s;

    /* Typography */
    --sidebar-font-family: inherit;
    --sidebar-font-size: 16px;
    --sidebar-heading-size: 20px;

    /* Spacing */
    --sidebar-padding: 20px;
    --menu-item-spacing: 15px;
  }

  /* Scoped box-sizing reset (no global * selector) */
  #sidebarToggle,
  .sidebar-overlay,
  #sidebarMenu,
  #sidebarMenu * {
    box-sizing: border-box;
  }

  /* Menu Toggle Button */
  .sidebar-menu-toggle {
    background-color: var(--menu-button-bg);
    color: var(--menu-button-color);
    border: none;
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all var(--button-animation-speed) ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  /* Floating button positioning */
  .sidebar-menu-toggle.floating {
    position: fixed;
  }

  .sidebar-menu-toggle.floating.float-top {
    top: var(--menu-button-position-top);
  }

  .sidebar-menu-toggle.floating.float-bottom {
    bottom: var(--menu-button-position-top);
  }

  .sidebar-menu-toggle.floating.float-left {
    left: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle.floating.float-right {
    right: var(--menu-button-position-side);
  }

  /* Static button positioning (when not floating) */
  .sidebar-menu-toggle.static {
    position: relative;
    margin: 10px;
  }

  .sidebar-menu-toggle.static[data-position="left"] {
    left: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle.static[data-position="right"] {
    right: var(--menu-button-position-side);
  }

  .sidebar-menu-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  /* Hamburger Icon */
  .hamburger-icon {
    width: 20px;
    height: 2px;
    background-color: var(--menu-button-color);
    margin: 2px 0;
    transition: all var(--button-animation-speed) ease;
    transform-origin: center;
  }

  /* Hamburger to X animation */
  .sidebar-menu-toggle.active .hamburger-icon:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .sidebar-menu-toggle.active .hamburger-icon:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .sidebar-menu-toggle.active .hamburger-icon:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Sidebar Overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--sidebar-animation-speed) ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Sidebar Menu */
  .sidebar-menu {
    position: fixed;
    top: 0;
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
    z-index: 1000;
    padding: var(--sidebar-padding);
    font-family: var(--sidebar-font-family);
    font-size: var(--sidebar-font-size);
    /* visibility keeps the closed panel's links out of the Tab order;
       the delay lets the slide-out finish before it hides */
    visibility: hidden;
    transition: transform var(--sidebar-animation-speed) ease,
                visibility 0s linear var(--sidebar-animation-speed);
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }

  /* Sidebar positioning based on CSS variable */
  .sidebar-menu[data-position="left"] {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid var(--sidebar-border-color);
  }

  .sidebar-menu[data-position="right"] {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--sidebar-border-color);
  }

  .sidebar-menu.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--sidebar-animation-speed) ease;
  }

  /* Close Button */
  .sidebar-close {
    position: absolute;
    top: 15px;
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--button-animation-speed) ease;
  }

  .sidebar-close[data-position="left"] {
    right: 15px;
  }

  .sidebar-close[data-position="right"] {
    left: 15px;
  }

  .sidebar-close:hover {
    background-color: var(--sidebar-hover-color);
  }

  /* Sidebar Header */
  .sidebar-header {
    margin-top: 50px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sidebar-border-color);
  }

  .sidebar-title {
    font-size: var(--sidebar-heading-size);
    font-weight: bold;
    margin: 0;
    color: var(--sidebar-accent-color);
  }

  /* Navigation Menu */
  .sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sidebar-nav li {
    margin-bottom: var(--menu-item-spacing);
  }

  .sidebar-nav a {
    color: var(--sidebar-text-color);
    text-decoration: none;
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all var(--button-animation-speed) ease;
    border-left: 3px solid transparent;
  }

  .sidebar-nav a:hover {
    background-color: var(--sidebar-hover-color);
    border-left-color: var(--sidebar-accent-color);
    transform: translateX(5px);
  }

  /* Contact Button */
  .sidebar-contact-btn {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--sidebar-border-color);
  }

  .contact-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--sidebar-accent-color);
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    transition: all var(--button-animation-speed) ease;
    border: none;
    cursor: pointer;
    font-size: var(--sidebar-font-size);
  }

  .contact-button:hover {
    background-color: var(--contact-button-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  }

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    :root {
      --sidebar-width: 280px;
      --sidebar-font-size: 15px;
      --sidebar-heading-size: 18px;
      --menu-button-size: 45px;
    }
  }

  @media (max-width: 480px) {
    :root {
      --sidebar-width: 250px;
      --sidebar-font-size: 14px;
      --sidebar-heading-size: 16px;
      --menu-button-size: 40px;
      --menu-button-position-top: 15px;
      --menu-button-position-side: 15px;
    }
  }

  /* Prevent body scroll when sidebar is open (includes iOS fix) */
  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
</style>

<!-- Menu Toggle Button (with accessibility attributes) -->
<button class="sidebar-menu-toggle" id="sidebarToggle"
        aria-label="Open menu" aria-expanded="false" aria-controls="sidebarMenu">
  <span class="hamburger-icon" aria-hidden="true"></span>
  <span class="hamburger-icon" aria-hidden="true"></span>
  <span class="hamburger-icon" aria-hidden="true"></span>
</button>

<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Sidebar Menu -->
<nav class="sidebar-menu" id="sidebarMenu" aria-hidden="true" tabindex="-1">
  <button class="sidebar-close" id="sidebarClose" aria-label="Close menu">&times;</button>

  <div class="sidebar-header">
    <h3 class="sidebar-title">Navigation</h3>
  </div>

  <ul class="sidebar-nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>

  <div class="sidebar-contact-btn">
    <a href="#contact" class="contact-button">Contact Us</a>
  </div>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get elements
  const toggleBtn = document.getElementById('sidebarToggle');
  const closeBtn = document.getElementById('sidebarClose');
  const overlay = document.getElementById('sidebarOverlay');
  const sidebar = document.getElementById('sidebarMenu');
  const body = document.body;
  let savedScrollTop = 0;

  // Get CSS variables
  const sidebarPosition = getComputedStyle(document.documentElement)
    .getPropertyValue('--sidebar-position').trim();
  const isFloating = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-floating').trim() === 'true';
  const floatPosition = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-float-position').trim();
  const floatSide = getComputedStyle(document.documentElement)
    .getPropertyValue('--menu-button-float-side').trim();

  // Set button positioning classes
  if (isFloating) {
    toggleBtn.classList.add('floating');
    if (floatPosition === 'bottom') {
      toggleBtn.classList.add('float-bottom');
    } else {
      toggleBtn.classList.add('float-top');
    }
    if (floatSide === 'right') {
      toggleBtn.classList.add('float-right');
    } else {
      toggleBtn.classList.add('float-left');
    }
  } else {
    toggleBtn.classList.add('static');
  }

  // Set data attributes for positioning
  toggleBtn.setAttribute('data-position', sidebarPosition);
  closeBtn.setAttribute('data-position', sidebarPosition);
  sidebar.setAttribute('data-position', sidebarPosition);

  // Open sidebar function
  function openSidebar() {
    sidebar.classList.add('active');
    overlay.classList.add('active');
    toggleBtn.classList.add('active');
    body.classList.add('sidebar-open');

    // Accessibility: update ARIA states
    toggleBtn.setAttribute('aria-expanded', 'true');
    toggleBtn.setAttribute('aria-label', 'Close menu');
    sidebar.removeAttribute('aria-hidden');

    // iOS scroll-lock: use position: fixed to prevent background scroll
    savedScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    body.style.position = 'fixed';
    body.style.top = '-' + savedScrollTop + 'px';
    body.style.width = '100%';

    // Focus management: move focus into sidebar
    sidebar.focus({ preventScroll: true });
  }

  // Close sidebar function
  function closeSidebar() {
    sidebar.classList.remove('active');
    overlay.classList.remove('active');
    toggleBtn.classList.remove('active');
    body.classList.remove('sidebar-open');

    // Accessibility: update ARIA states
    toggleBtn.setAttribute('aria-expanded', 'false');
    toggleBtn.setAttribute('aria-label', 'Open menu');
    sidebar.setAttribute('aria-hidden', 'true');

    // iOS scroll-lock: restore scroll position
    body.style.position = '';
    body.style.top = '';
    body.style.width = '';
    // Jump straight back even if the site uses smooth scrolling
    const html = document.documentElement;
    html.style.scrollBehavior = 'auto';
    window.scrollTo(0, savedScrollTop);
    html.style.scrollBehavior = '';

    // Focus management: return focus to toggle button
    toggleBtn.focus({ preventScroll: true });
  }

  // Tab-key focus trap inside sidebar when open
  sidebar.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' && sidebar.classList.contains('active')) {
      const focusable = sidebar.querySelectorAll(
        'a[href], button, [tabindex]:not([tabindex="-1"])'
      );
      const first = focusable[0];
      const last = focusable[focusable.length - 1];

      if (e.shiftKey && (document.activeElement === first || document.activeElement === sidebar)) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  // Event listeners
  toggleBtn.addEventListener('click', function(e) {
    e.stopPropagation();
    if (sidebar.classList.contains('active')) {
      closeSidebar();
    } else {
      openSidebar();
    }
  });

  closeBtn.addEventListener('click', closeSidebar);
  overlay.addEventListener('click', closeSidebar);

  // Close sidebar when clicking on navigation links
  const navLinks = document.querySelectorAll('.sidebar-nav a, .contact-button');
  navLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      closeSidebar();
    });
  });

  // Close sidebar on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && sidebar.classList.contains('active')) {
      closeSidebar();
    }
  });

  // Handle window resize
  window.addEventListener('resize', function() {
    if (window.innerWidth > 768 && sidebar.classList.contains('active')) {
      closeSidebar();
    }
  });
});
</script>
```

**Wenn deine veröffentlichte Website blank bleibt**

Ein JavaScript-Syntaxfehler bricht die gesamte Carrd-Website. Wenn du veröffentlichst und eine leere Seite siehst, öffne die Browser-DevTools (F12), prüfe die Konsole auf Fehler, fixe die Syntax und veröffentliche erneut. Carrds Doku merkt an, dass „even a simple syntax error will break the site."

### Mit CSS-Variablen anpassen

Alle visuellen Einstellungen werden über CSS Custom Properties oben im ``-Block gesteuert. Ändere sie, damit sie zum Branding deiner Website passen.

**CSS-Variablen-Referenz**

| Variable | Standard | Was sie steuert |
|---|---|---|
| `--sidebar-position` | `left` | Von welcher Seite das Seitenmenü aufgeht (`left` oder `right`) |
| `--sidebar-width` | `300px` | Breite des Seitenmenü-Panels |
| `--sidebar-bg-color` | `rgba(25, 25, 25, 0.95)` | Seitenmenü-Hintergrund (unterstützt Transparenz) |
| `--sidebar-text-color` | `#ffffff` | Textfarbe im Seitenmenü |
| `--sidebar-border-color` | `#444` | Rahmenfarbe für Trennlinien |
| `--sidebar-hover-color` | `rgba(255, 255, 255, 0.1)` | Hover-Hintergrund auf Menüpunkten |
| `--sidebar-accent-color` | `#007bff` | Akzentfarbe (Highlights, Kontakt-Button) |
| `--contact-button-hover-color` | `#0056b3` | Hover-Zustand des Kontakt-Buttons |
| `--menu-button-bg` | `rgba(0, 123, 255, 0.9)` | Hamburger-Button-Hintergrund |
| `--menu-button-color` | `#ffffff` | Hamburger-Icon-Farbe |
| `--menu-button-size` | `50px` | Hamburger-Button-Durchmesser |
| `--menu-button-floating` | `true` | `true` = fixierte Position; `false` = relativ zur Embed-Position |
| `--menu-button-float-position` | `top` | Schwebt an `top` oder `bottom` (nur Floating-Modus) |
| `--menu-button-float-side` | `left` | Schwebt an `left` oder `right` (nur Floating-Modus) |
| `--menu-button-position-top` | `20px` | Abstand zur oberen/unteren Kante |
| `--menu-button-position-side` | `20px` | Abstand zur linken/rechten Kante |
| `--sidebar-animation-speed` | `0.3s` | Slide-in/Slide-out-Transition-Geschwindigkeit |
| `--button-animation-speed` | `0.2s` | Hover- und Morph-Animations-Geschwindigkeit |
| `--sidebar-font-family` | `inherit` | Schriftfamilie für Seitenmenü-Text |
| `--sidebar-font-size` | `16px` | Basis-Schriftgröße |
| `--sidebar-heading-size` | `20px` | Schriftgröße des Seitenmenü-Titels |
| `--sidebar-padding` | `20px` | Innenabstand des Seitenmenüs |
| `--menu-item-spacing` | `15px` | Vertikaler Abstand zwischen Menüpunkten |

Du kannst [https://rgbacolorpicker.com/](https://rgbacolorpicker.com/) nutzen, um Farben mit Transparenz-Support auszuwählen.

### Button-Positionierungs-Optionen: floating vs. static

**Floating-Modus** (`--menu-button-floating: true`): Der Hamburger-Button ist `position: fixed` und bleibt sichtbar, während der Besucher scrollt. In welcher Ecke er sitzt, steuerst du über `--menu-button-float-position` und `--menu-button-float-side`.

**Static-Modus** (`--menu-button-floating: false`): Der Button wird relativ zu der Stelle positioniert, wo das Embed-Element auf der Seite sitzt.

**Static-Modus erfordert ein Inline-Embed**

Wenn du `--menu-button-floating: false` setzt, sitzt der Button nur in deinem Layout, wenn das Embed-Element **Style: Inline** nutzt (nicht Hidden). Ein Hidden-Body-End-Embed setzt den Code hinter all of Carrds Content, ein statischer Button würde also ganz unten auf der Seite landen. Ein Inline-Embed zeigt außerdem nur in der Sektion, in der du es platzierst. Für die meisten Setups behalte den Floating-Modus an und nutze das Hidden-Body-End-Embed.

### 3. Die Menülinks auf die richtige Sektion zeigen lassen

Das ist der Schritt, den die meisten verpassen. Deine Seitenmenü-Links nutzen Anker-Hashes (`#about`, `#services` usw.), aber die funktionieren nur, wenn deine Carrd-Website passende Sections-Namen hat.

**Sections-Namen müssen zu deinen href-Werten passen**

Füge im Carrd-Builder ein **Control**-Element hinzu (klicke `+`) und wähle **Section Break**. Gib ihm einen Namen, der zu deinem Link passt. Zum Beispiel `about` für den `#about`-Link. Sections-Namen dürfen nur **Kleinbuchstaben, Zahlen und Bindestriche** enthalten (keine Leerzeichen, keine Großbuchstaben).

So funktionieren Carrd-Sektionen und -Anker:

1. **Section Breaks** erzeugen benannte Sektionen. Füge einen über `+` → Control → Section Break hinzu. Der Name wird das Ankerziel.
2. **Die erste Sektion heißt automatisch `home`.** Deshalb funktioniert `#home` auf den meisten Carrd-Websites out of the box.
3. **Single-Section-Websites** können stattdessen **Scroll Points** nutzen. Füge ein Scroll-Point-Control ein und verlinke es mit `#scrollpoint-name`.
4. **Deep-Linking funktioniert.** Teile `yoursite.carrd.co/#services` und es landet auf der richtigen Sektion.
5. **Wenn Links nicht springen**, prüfe, ob die Section-Break-Namen im Builder exakt mit deinen `href`-Werten übereinstimmen. Ein Tippfehler oder ein Großbuchstabe bricht den Link still.

Für Smooth-Scrolling-Verhalten beim Klicken auf Anker-Links siehe das [Carrd-Smooth-Scroll- und Anker-Links-Tutorial](/de/carrd-smooth-scroll/).

### 4. Die Menüpunkte anpassen

Bearbeite den `
`-Block, damit er zu den Sektionen deiner Website passt:

```html
<ul class="sidebar-nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#testimonials">Testimonials</a></li>
  <li><a href="#blog">Blog</a></li>
</ul>
```

Füge `
- Section Name`-Einträge hinzu oder entferne sie. Jeder `href` muss auf einen echten Section-Break-Namen auf deiner Carrd-Website zeigen.

### 5. Den Kontakt-Button anpassen

Der Kontakt-Button unten im Seitenmenü:

```html
<a href="#contact" class="contact-button">Contact Us</a>
```

Ändere den `href` auf eine beliebige URL (interner Anker oder externer Link) und aktualisiere den Button-Text passend zu deinem Bedarf.

[Carrd.co testen](https://go.bitdoze.com/carrd)

## Die wichtigsten Features

### Mobile-Optimierung

Das Seitenmenü ist voll responsiv mit Breakpoints bei 768px und 480px. Auf kleineren Bildschirmen wird das Seitenmenü schmaler, die Schriftgrößen sinken und der Button schrumpft, bleibt aber über 40px für Touch-Ziele.

- Touch-freundliche Button-Größen (mindestens 40px am kleinsten Breakpoint)
- Optimierte Abstände für mobile Bildschirme
- Internes Scrollen auf kurzen Viewports (das Seitenmenü nutzt `overflow-y: auto`)

**iOS-Safari-Scroll-Lock**

`overflow: hidden` allein verhindert das Hintergrund-Scrollen auf iOS Safari nicht. Das ist ein bekannter WebKit-Bug, seit 2014 offen. Der Code oben nutzt `position: fixed` auf dem Body-Element als Workaround, plus `touch-action: none` auf der `body.sidebar-open`-Klasse, was die meisten Fälle abdeckt. Hinweis: iOS 26 hat eine gemeldete Regression beim Overlay-Scroll-Blocking. Teste auf einem physischen Gerät.

### Flüssige Animationen

Das Seitenmenü bringt mehrere Animationseffekte mit:

- Slide-in/Slide-out-Transitions (konfigurierbare Geschwindigkeit via `--sidebar-animation-speed`)
- Hamburger-Icon, das zu einem X morpht, wenn das Menü offen ist
- Hover-Effekte auf Menüpunkten mit einem Links-Rahmen-Akzent-Highlight
- Button-Skalierung und Schatten-Effekte beim Hover

### Barrierefreiheit

Der Code kommt mit sauberen ARIA-Attributen und Tastatur-Support:

- **Toggle-Button** hat `aria-label` (wechselt zwischen "Open menu" / "Close menu"), `aria-expanded` und `aria-controls`
- **Seitenmenü** nutzt `aria-hidden="true"` im geschlossenen Zustand, beim Öffnen wird es entfernt
- **Hamburger-Spans** sind `aria-hidden="true"` markiert (dekorativ, werden nicht angesagt)
- **Close-Button** hat `aria-label="Close menu"`
- **Tab-Key-Focus-Trap** hält den Fokus im Seitenmenü, solange es offen ist
- **Fokus-Rückgabe:** Schließen des Seitenmenüs gibt den Fokus an den Toggle-Button zurück
- **Escape-Taste** schließt das Seitenmenü
- **Hoher Kontrast** über Farb-Optionen via CSS-Variablen

### Browser-Kompatibilität

Der Code nutzt moderne CSS-Features (Custom Properties, Flexbox, Transitions), die von allen aktuellen Browsern unterstützt werden. Wenn das Seitenmenü hinter anderen Carrd-Elementen erscheint, erhöhe die z-index-Werte: `.sidebar-overlay` (Standard 999), `.sidebar-menu` (Standard 1000), `.sidebar-menu-toggle` (Standard 1001).

## Dein Seitenmenü verifizieren (Checkliste nach dem Veröffentlichen)

Nach dem Veröffentlichen geh diese Checkliste durch, um zu bestätigen, dass alles funktioniert:

- Toggle-Button sichtbar und an der erwarteten Position schwebend

- Toggle klicken → Seitenmenü schiebt rein, Overlay erscheint

- Overlay klicken → Seitenmenü schließt

- Escape drücken → Seitenmenü schließt

- Einen Nav-Link klicken → Seitenmenü schließt UND die Seite scrollt zur richtigen Sektion

- Deep-Link-Test: yoursite.carrd.co/#services in einem neuen Tab öffnen → landet auf der richtigen Sektion

- Mobil: Button-Touch-Ziel ist mindestens 40px, Seitenmenü scrollt intern auf kurzen Viewports

- iOS Safari: Seitenhintergrund scrollt NICHT, während das Seitenmenü offen ist

- Screenreader: Toggle sagt "Open menu" / "Close menu" an

## Troubleshooting

**Meine veröffentlichte Website ist blank**

Ein JavaScript-Syntaxfehler bricht die gesamte Carrd-Website. Öffne die Browser-DevTools (F12), prüfe die Konsole auf Fehler, fixe die Syntax in deinem Embed-Element und veröffentliche erneut. Carrds Doku sagt, dass „even a simple syntax error will break the site."

**Der Menü-Button erscheint nicht**

Du nutzt wahrscheinlich den Static-Modus (`--menu-button-floating: false`) mit einem Hidden-Embed. Statische Buttons sitzen nur aus **Inline**-Embeds in deinem Layout; aus einem Hidden-Body-End-Embed landet der Button ganz unten auf der Seite. Wechsle zum Floating-Modus (`--menu-button-floating: true`) oder ändere den Embed-Style auf Inline.

**Seitenmenü-Links springen nicht zu Sektionen**

Deine Section-Break-Namen stimmen nicht mit deinen `href`-Werten überein. Prüfe im Carrd-Builder den Namen jedes Section Breaks. Er darf nur Kleinbuchstaben, Zahlen und Bindestriche enthalten. Wenn dein Link zum Beispiel `#about` ist, muss die Sektion exakt `about` heißen (nicht `About`, nicht `about-us`, außer die Sektion heißt `about-us`). Siehe den [Anker-Schritt](#3-die-menülinks-auf-die-richtige-sektion-zeigen-lassen) oben.

**Seitenmenü erscheint hinter anderen Elementen**

Z-index-Konflikt. Das Seitenmenü nutzt z-index 1000, das Overlay 999 und der Toggle 1001. Wenn Carrd-Elemente oder andere Embeds höhere z-index-Werte haben, erhöhe diese Zahlen im CSS. Das Overlay sollte immer unter dem Seitenmenü liegen, und der Toggle sollte immer oben sein.

**Hintergrund scrollt auf dem iPhone**

Das ist der iOS-Safari-WebKit-Bug. `overflow: hidden` auf `` verhindert das Scrollen nicht. Der Code nutzt `position: fixed` auf dem Body plus `touch-action: none` auf `body.sidebar-open` als Workaround. Wenn es trotzdem scrollt, prüfe, ob beides noch in deiner Code-Kopie steckt. Teste auf einem physischen iPhone, nicht nur im Simulator.

**Änderungen erscheinen nicht nach dem Speichern**

Embed-Elemente rendern nicht in der Carrd-Builder-Vorschau. Du musst die Website veröffentlichen, um Änderungen zu sehen. Nach dem Veröffentlichen mit Strg+Shift+R hart aktualisieren (Cmd+Shift+R auf dem Mac), um den Browser-Cache zu umgehen.

## Alternativen: No-Code- und Plugin-Optionen

Wenn du keinen Custom Code einfügen willst oder auf einem Plan ohne Embeds bist, gibt es andere Wege, Navigation zu einer Carrd-Website hinzuzufügen:

**Carrd mobile responsive Navbar (kein Code)**

Die [Carrd-mobile-responsive-Navbar](/de/carrd-mobile-navbar/)-Anleitung deckt 3 Methoden ab, um Navigation zu Carrd hinzuzufügen, inklusive eines nativen No-Code-Ansatzes, der ohne Embeds funktioniert. Guter Startpunkt, wenn du auf Pro Lite oder dem Free-Plan bist.

**Carrd Floating-Menü**

Ein [Floating-Hamburger-Menü für Carrd](/de/carrd-floating-menue/). Ähnliches Konzept, aber mit einem anderen visuellen Stil. Vergleichenswert, wenn du einen kompakten Floating-Action-Button statt eines vollen Seitenmenü-Panels willst.

**Bezahlte Carrd-Plugins**

Third-Party-Plugin-Marktplätze wie [plugins.carrd.co](https://plugins.carrd.co/) verkaufen responsive Navbars und Mega-Navbars (15-30-$-Bereich). Die brauchen typischerweise Pro Standard oder höher, da sie unter der Haube Embeds nutzen.

**Community-Ressourcen**

- [stack.carrd.co](https://stack.carrd.co/) — Community-CSS- und Komponenten-Snippets
- [carrdme.com](https://carrdme.com/) — Template- und Plugin-Verzeichnis für Carrd

## Fazit

Ein Carrd-Seitenmenü gibt deiner One-Page-Website professionelle Navigation, ohne Content-Platz zu opfern. Der Ansatz erfordert mindestens Carrd Pro Standard (19 $/Jahr) — ein Embed-Element, einmal Code einfügen, fertig.

Die CSS-Variablen machen es einfach, dein Branding zu treffen, die ARIA-Attribute halten es barrierefrei, und die Mobile-Breakpoints kümmern sich um kleinere Bildschirme. Bewahre eine Kopie des Codes an einem sicheren Ort auf — da er auf jeder Sektion der Website läuft, kann ein Syntaxfehler die ganze Seite lahmlegen, bis du fixst und neu veröffentlichst.

Wenn du mehr Carrd-Anpassung erkunden willst, schau in den [Carrd.co Review](/de/carrd-review/) für eine komplette Aufschlüsselung, was jeder Plan bietet, oder stöbere auf [carrdme.com](https://carrdme.com/) durch die komplette Liste der Plugins und Tutorials.