Home >Web Front-end >JS Tutorial >✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

Linda HamiltonOriginal: 2024-12-10 08:42:151014browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Glassmorphism Dropdown</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    /* Global Styling */
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
      font-family: 'Arial', sans-serif;
      color: #fff;
    }

    /* Dropdown Container */
    .dropdown {
      position: relative;
      display: inline-block;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      backdrop-filter: blur(15px);
      padding: 20px;
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
      transition: box-shadow 0.3s ease, background 0.3s ease;
    }

    .dropdown:hover {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
    }

    .dropdown-btn {
      padding: 15px 20px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .dropdown-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.5);
    }

    /* Dropdown Menu */
    .dropdown-menu {
      position: absolute;
      top: 70px;
      left: 0;
      width: 260px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(15px);
      padding: 10px;
      display: none;
      flex-direction: column;
    }

    .dropdown:hover .dropdown-menu {
      display: flex;
    }

    .dropdown-menu li {
      list-style: none;
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      color: #fff;
      border-radius: 8px;
      overflow: hidden;
      transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    /* Icon and Text */
    .dropdown-menu li i {
      font-size: 24px;
      transition: color 0.3s ease;
    }

    .dropdown-menu li span {
      font-size: 16px;
      transition: color 0.3s ease;
    }

    /* Hover Effects */
    .dropdown-menu li:hover {
      background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.4);
      color: #fff;
    }.dropdown-menu li:hover i {
      color: #0ff; /* Neon Cyan */
    }

    .dropdown-menu li:hover span {
      color: #f0f; /* Neon Magenta */
    }
  </style>
</head>
<body>
  <div>

The above is the detailed content of ✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨. For more information, please follow other related articles on the PHP Chinese website!

css ajax html Filter pointer href display position overflow margin padding border viewport background transform transition column flex li https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：TypeScript&#s progressive adoption strategy for front-end projectsNext article：TypeScript&#s progressive adoption strategy for front-end projects

See more

✨ Transform Your Dropdown Menu with Glassmorphism & Neon Effects! ✨

Related articles