Three Dots Menu

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #050910;
  --nav-bg: #0d1117;
  --bar-bg: #3b82f6;
  --bar-text: #ffffff;
  --content-bg: #1a1f2e;
  --card-bg: #232a3a;
  --card-text: #c9d1d9;
  --card-label: #e6edf3;
  --tag-bg: rgba(59, 130, 246, 0.15);
  --tag-text: #60a5fa;
  --menu-bg: #ffffff;
  --menu-text: #1f2937;
  --menu-hover: #f3f4f6;
  --menu-danger: #ef4444;
  --menu-divider: #e5e7eb;
  --text: #f2f6ff;
  --muted: #475569;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  padding: 2rem;
}

/* ── Demo wrapper ── */
.demo {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
.demo-sub {
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Phone frame ── */
.phone-frame {
  width: 320px;
  height: 520px;
  border-radius: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: var(--nav-bg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── App Bar ── */
.app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bar-bg);
  color: var(--bar-text);
  position: relative;
  z-index: 10;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bar-text);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.app-bar-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
}

/* ── Dots Button & Wrapper ── */
.dots-wrapper {
  position: relative;
}

.dots-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bar-text);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.dots-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Dropdown Menu ── */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: var(--menu-bg);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

.menu-open .dropdown-menu {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--menu-text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-item:hover {
  background: var(--menu-hover);
}
.menu-item--danger {
  color: var(--menu-danger);
}
.menu-divider {
  height: 1px;
  background: var(--menu-divider);
  margin: 4px 0;
}

/* ── Content Area ── */
.content-area {
  flex: 1;
  background: var(--content-bg);
  padding: 24px 20px;
  overflow-y: auto;
}

.card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bar-bg);
}

.card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--card-label);
}

.card-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--card-text);
  margin-bottom: 16px;
}

.card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--tag-bg);
  color: var(--tag-text);
}

(() => {
  const wrapper = document.querySelector(".dots-wrapper");
  const dotsBtn = document.querySelector(".dots-btn");

  if (!wrapper || !dotsBtn) return;

  function open() {
    wrapper.classList.add("menu-open");
    dotsBtn.setAttribute("aria-expanded", "true");
  }

  function close() {
    wrapper.classList.remove("menu-open");
    dotsBtn.setAttribute("aria-expanded", "false");
  }

  function toggle() {
    wrapper.classList.contains("menu-open") ? close() : open();
  }

  dotsBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    toggle();
  });

  // Close on click outside
  document.addEventListener("click", (e) => {
    if (!wrapper.contains(e.target)) {
      close();
    }
  });

  // Close on Escape
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      close();
      dotsBtn.focus();
    }
  });

  // Close when a menu item is clicked
  document.querySelectorAll(".menu-item").forEach((item) => {
    item.addEventListener("click", () => {
      close();
    });
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Three Dots Menu</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="demo">
    <h1 class="demo-title">Three Dots Menu</h1>
    <p class="demo-sub">Overflow menu with fade + scale animation.</p>

    <div class="phone-frame">
      <div class="app-bar">
        <button class="back-btn" aria-label="Go back">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 12H5"/>
            <path d="M12 19l-7-7 7-7"/>
          </svg>
        </button>
        <span class="app-bar-title">My App</span>
        <div class="dots-wrapper">
          <button class="dots-btn" aria-label="Open menu" aria-expanded="false" aria-haspopup="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <circle cx="12" cy="5" r="2"/>
              <circle cx="12" cy="12" r="2"/>
              <circle cx="12" cy="19" r="2"/>
            </svg>
          </button>
          <div class="dropdown-menu" role="menu">
            <button class="menu-item" role="menuitem">Edit</button>
            <button class="menu-item" role="menuitem">Share</button>
            <button class="menu-item" role="menuitem">Duplicate</button>
            <div class="menu-divider"></div>
            <button class="menu-item menu-item--danger" role="menuitem">Delete</button>
          </div>
        </div>
      </div>

      <div class="content-area">
        <div class="card">
          <div class="card-header">
            <div class="card-dot"></div>
            <span class="card-label">Project Details</span>
          </div>
          <p class="card-text">Tap the three-dots icon in the header to reveal the overflow menu with available actions.</p>
          <div class="card-tags">
            <span class="tag">Design</span>
            <span class="tag">Mobile</span>
            <span class="tag">UI</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>