ابدأ التعلم

أزرار القائمة المنسدلة

يمكنك نسخ الكود بحرية أو استخدام خدمتنا المجانية البرمجة المباشرة لتعديل الكود وفقًا لاحتياجاتك الخاصة.


أزرار القائمة المنسدلة بسيطة

<div class="dropdown dropdown1">
    <button class="dropdown-button">Dropdown 1</button>
    <div class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
      <a href="#">Option 3</a>
    </div>
  </div>

<div class="dropdown dropdown2">
    <button class="dropdown-button">Dropdown 2</button>
    <div class="dropdown-content">
      <a href="#">Option A</a>
      <a href="#">Option B</a>
      <a href="#">Option C</a>
    </div>
  </div>

<div class="dropdown dropdown3">
    <button class="dropdown-button">Dropdown 3</button>
    <div class="dropdown-content">
      <a href="#">Choice X</a>
      <a href="#">Choice Y</a>
      <a href="#">Choice Z</a>
    </div>
  </div>

<div class="dropdown dropdown4">
    <button class="dropdown-button">Dropdown 4</button>
    <div class="dropdown-content">
      <a href="#">Item Alpha</a>
      <a href="#">Item Beta</a>
      <a href="#">Item Gamma</a>
    </div>
  </div>

.dropdown {
      position: relative;
      display: inline-block;
      margin: 10px;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 5px;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #ecf0f1;
    }

    /* Unique Dropdown Styles */
    .dropdown1 .dropdown-button {
      background-color: #2ecc71;
      color: #fff;
    }

    .dropdown1 .dropdown-content {
      background-color: #2ecc71;
      left: 0;
    }

    .dropdown2 .dropdown-button {
      background-color: #e74c3c;
      color: #fff;
    }

    .dropdown2 .dropdown-content {
      background-color: #e74c3c;
      right: 0;
    }

    .dropdown3 .dropdown-button {
      background-color: #f39c12;
      color: #fff;
      border-radius: 0;
    }

    .dropdown3 .dropdown-content {
      background-color: #f39c12;
      width:100%;
      border-radius: 0;
    }

    .dropdown4 .dropdown-button {
      background-color: #9b59b6;
      color: #fff;
    }

    .dropdown4 .dropdown-content {
      background-color: #9b59b6;
      left:10px;
    }

    /* Show dropdown on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

معاينة