ui

2025-04-23 11:22:46 +08:00
parent 7a1aae1e2f
commit 0b29e4e856
20 changed files with 1301 additions and 1 deletions
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Dropdown Menu</title>
+</head>
+<style>
+  .dropdown {
+    width: 100%;
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dropdown-btn {
+    transition: all 0.3s;
+    cursor: pointer;
+  }
+
+  .dropdown-btn:hover {
+    opacity: 0.8;
+  }
+
+  .dropdown-content {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    transform: translateZ(0) translateY(-10px);
+    width: 100%;
+    background: white;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    z-index: 100;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s;
+    cursor: pointer;
+    background: var(--background-color, #fff);
+    color: var(--color, #000);
+    overflow: hidden;
+  }
+
+  .dropdown:hover .dropdown-content {
+    opacity: 1;
+    visibility: visible;
+    transform: translateZ(0) translateY(0);
+  }
+
+  body .dropdown-item {
+    display: block;
+    text-decoration: none;
+    transition: background 0.2s;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    padding: 0.5rem 1rem;
+  }
+
+  body .dropdown-item:hover {
+    background-color: color-mix(in srgb, var(--background-color, #fff), #888 20%);
+  }
+
+  body {
+    display: inline-block;
+  }
+</style>
+
+<body>
+  <div class="dropdown">
+    <vslot class="dropdown-btn">
+      <button>Dropdown Menu</button>
+    </vslot>
+    <vslot name='menu' class="dropdown-content">
+      <a href="#" class="dropdown-item">Option 1</a>
+      <a href="#" class="dropdown-item">Option 2</a>
+    </vslot>
+  </div>
+</body>
+
+
+</html>