एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

868 byby.createsite

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

12 December 2025

गोल बटनों वाला जावास्क्रिप्ट टैब मेनू

26 August 2025

तुर्की पोर्टफोलियो वेबसाइट: HTML, CSS, JS, Tailwind

23 May 2025

3D लॉगिन हैमबर्गर मेनू

HTML

<body>
 
  <div class="animation-container">
    <div class="dropdown">
      <span class="dropdown-link">Feeling Inadequate</span>
      <ul class="dropdown-menu">
        <li class="dropdown-item">Didn't meet expectations again</li>
        <li class="dropdown-item">Perceived as less competent</li>
        <li class="dropdown-item">Second-guessing every decision</li>
        <li class="dropdown-item" style="animation-delay: 0.2s;">Not good enough</li>
        <li class="dropdown-item" style="animation-delay: 0.4s;">Always strive for more</li>
      </ul>
    </div>
    <div class="dropdown">
      <span class="dropdown-link">Should Have Known Better</span>
      <ul class="dropdown-menu">
        <li class="dropdown-item">Missed a crucial detail</li>
        <li class="dropdown-item">Allowed a preventable error to happen</li>
        <li class="dropdown-item">Struggled to learn from past mistakes</li>
        <li class="dropdown-item" style="animation-delay: 0.2s;">Beginner's mind, forever?</li>
        <li class="dropdown-item" style="animation-delay: 0.4s;">Never quite feeling prepared</li>
      </ul>
    </div>
    
  </div>

</body>

CSS

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

body {
      background-color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 50%;
      min-width: 100%;
      width: 100%;
      overflow-y: auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .function       { color: #A6E22E; }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background: transparent;
      animation: friday_ui-loop 5s infinite linear;
    }
    @keyframes friday_ui-loop {
      0% {
        opacity: 0; 
      }
      100% {
        opacity: 1;
      }
    }

अनुशंसित

गोल बटनों वाला जावास्क्रिप्ट टैब मेनू

तुर्की पोर्टफोलियो वेबसाइट: HTML, CSS, JS, Tailwind

3D लॉगिन हैमबर्गर मेनू

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS