كيفية إنشاء: قائمة كبيرة

تعلم كيفية إنشاء قائمة كبيرة (قائمة منسدلة كاملة العرض في لوحة المعلومات).

إنشاء قائمة كبيرة

أنشئ قائمة منسدلة تظهر عند تحريك الفارص فوق العنصر في لوحة المعلومات.

الخطوة الأولى - إضافة HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">رابط 1</a>
          <a href="#">رابط 2</a>
          <a href="#">رابط 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">رابط 1</a>
          <a href="#">رابط 2</a>
          <a href="#">رابط 3</a>
        </div>
        <div class="column">
          <h3>فئة 3</h3>
          <a href="#">رابط 1</a>
          <a href="#">رابط 2</a>
          <a href="#">رابط 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

مثال توضيحي:

يمكن استخدام أي عنصر لفتح القائمة المنسدلة، مثل عناصر <button> أو <a> أو <p>.

استخدم العناصر الحاوية (مثل <div class="dropdown-content">) لإنشاء القائمة المنسدلة، وأضف شبكة (الصفوف والعمود) ثم أضف روابط القائمة المنسدلة داخل الشبكة.

استخدم عنصر <div class="dropdown"> لتغليف زر القائمة و العناصر الحاوية (<div class="dropdown-content">) لضمان تحديد موضع القائمة المنسدلة بشكل صحيح باستخدام CSS.

الخطوة الثانية - إضافة CSS:

/* وعاء القائمة الجانبية */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* رابط داخل القائمة الجانبية */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* وعاء القائمة المنسدلة */
.dropdown {
  float: left;
  overflow: hidden;
}
/* زر القائمة المنسدلة */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* مهم للتوازي العمودي على الهواتف المحمولة */
  margin: 0; /* مهم للتوازي العمودي على الهواتف المحمولة */
}
/* إضافة لون خلفية أحمر عند وضع المؤشر على رابط في القائمة الجانبية أو على زر القائمة المنسدلة */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* محتويات القائمة المنسدلة (مخفية بشكل افتراضي) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* العنوان الرئيسي للمENU الكبير (إذا لزم الأمر) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* عرض القائمة المنسدلة عند وضع الفأرة عليها */
.dropdown:hover .dropdown-content {
  display: block;
}
/* إنشاء ثلاثة أعمدة متساوية العرض وتجعلها تطفو بشكل متوازي */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* تحديد أنماط للروابط الموجودة داخل الأعمدة */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* إضافة لون خلفي عند وضع الفأرة فوقه */
.column a:hover {
  background-color: #ddd;
}
/* إزالة التدفق العكسي بعد الأعمدة */
.row:after {
  content: "";
  display: table;
  clear: both;
}

جربها بنفسك

مثال توضيحي:

لقد قمنا بتعيين الألوان الخلفية والهوامش الداخلية وأيضًا أنماط أخرى للمسارات الموجودة في القائمة المنسدلة.

لقد قمنا بتعيين الألوان الخلفية والهوامش الداخلية وأيضًا أنماط أخرى للمسارات الموجودة في القائمة المنسدلة.

.dropdown-content المحتويات المنسدلة تحتوي على القائمة المنسدلة الفعلية. إنها مخفية بشكل افتراضي، وستعرض عند وضع الفأرة عليها (انظر أدناه). إنها موقعة تحت رمز القائمة المنسدلة، وعرضها 100٪ لغطاء الشاشة.

لم نستخدم الحواف، بل استخدمنا box-shadow ، مما يجعل القائمة المنسدلة تبدو مثل 'بطاقة'. نحن نستخدم أيضًا خصائص z-index ضع القائمة المنسدلة أمام العناصر الأخرى.

:hover المحدد يستخدم لعرض القائمة المنسدلة عند وضع الفأرة فوق رمز القائمة.

.column استخدمت كلاس لإنشاء ثلاثة أعمدة منسدلة ت浮动 بشكل متوازي (لعرض الفئات المختلفة).

الصفحات ذات الصلة

دليل:قائمة التراجيح CSS

دليل:كيفية إنشاء قائمة منسدلة قابلة للنقر

دليل:شريط التصفح CSS

دليل:كيفية إنشاء قائمة أعلى تفاعلية