كيف يمكن بناء القوائم المنسدلة ضمن صفحة في HTML

يمكن الاستعانة بتنسيقات Bootstap لتنفيذ القوائم المنسدلة، نضيف أولًا ملفات تنسيق CSS وملفات جافاسكريبت الضرورية لإضافة التفاعليه للقوائم إلى الموقع كالتالي:

<!-- ملف تنسيق بوتستراب -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">

<!-- ملفات جافاسكريبت -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

بعدها يمكن إضافة الترويسة العلوية التي تحتوي على القائمة المنسدلة بالبنية التالية، من المهم استخدام الأصناف classes بنفس بنية المثال :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
  <!-- زر القائمة للشاشات الصغيرة  -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- القائمة المنسدلة  -->
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          عنوان القائمة
        </a>
        
        <!-- عناصر القائمة  -->
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">عنصر أول</a>
          <a class="dropdown-item" href="#">عنصر ثان</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

يمكن الاستفادة من قراءة المقال التالي عن كيفية بناء شريط التنقل ضمن بوتستراب:

يمكن بناء القوائم المنبثقة من خلال HTML - CSS من خلال التلاعب ببعض الخواص، وهذا شرح لشيفرة كاملة مع العلم يمكنك البحث عن dropdown menu ويوجد العديد من التصاميم..

html:

• حاوية للقائمة
• ثم زر يمكن النقر عليه
• يليه حاوية فيها روابط (يمكن استخدام قوائم)

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

css:

• تموقع الحاوية نسبي relative 
• تموقع القائمة التي فيها روابط مطلق absolute لنستطيع وضعها بمكان مناسب نسبة للحاوية
• تحكم بإظهار القائمة من خلال hover حيث تكون مخفية بالأصل display: none يتحول إلى block

<style>
/* تنييق الزر */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* الحاوية position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) محتوى القائمة*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* الروابط ضمن القائمة dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

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

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>