القائمة المنسدلة الضخمة المستجيبة مع CSS

القائمة المنسدلة الضخمة المستجيبة لـ CSS

موضوعنا اليوم حول إنشاء قائمة منسدلة كاملة العرض متجاوبة أو مربع تنقل في CSS خالص. تُستخدم القائمة الضخمة بشكل شائع في مواقع التسوق عبر الإنترنت وأي موقع تجارة إلكترونية آخر لأنها الطريقة المثلى لتنظيم المحتوى وعرضه.

لا يختلف المبدأ العام لإنشاء قائمة ضخمة عن إنشاء قائمة منسدلة أفقية منتظمة. الاختلاف الوحيد هو أنه ليس كل عنصر قائمة تتداخل فيه القائمة المنسدلة يحصل على موضع نسبي ، ولكن قائمة المستوى الأعلى أو أي حاوية كتلة أخرى.

في هذه الحالة ، يمكننا ضبط عرض القائمة المنسدلة على 100٪ ، والتي ستكون مساوية لعرض قائمة المستوى الأعلى ، وليس عرض عنصر القائمة. للحصول على قائمة منسدلة بالحجم العادي ، تحتاج إلى تعيين فصل دراسي وتعيين موضعه النسبي. كل عمود في القائمة المنسدلة هو عنصر قائمة يحتوي على رأس (اختياري) وقائمة فرعية بالداخل.

طريقة التركيب

اذهب الي لوحة تحكم بلوجر

حدد السمة تحرير HTML

بعد وسم <head> تضع هذه الاكواد.


     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

ثم نذهب الي وضع باقي الاكواد.

كود HTML

 
    <nav class="container">
  <ul class="top-menu">
    <li><a href="">Home</a></li>
    <li class="dropdown-standart"><a href="" class="dropdown">Mega Link </a>
      <ul class="submenu-standart">
        <li><a href="">Mega Link Label 01</a></li>
        <li><a href="">Mega Link Label 02</a></li>
        <li><a href="">Mega Link Label 03</a></li>
        <li><a href="">Mega Link Label 04</a></li>
        <li><a href="">Mega Link Label 05</a></li>
        <li><a href="">Mega Link Label 06</a></li>
      </ul>
    </li>
    <li><a href="" class="dropdown">Link</a>
      <ul class="submenu">
        <li><h3>Label 1</h3>
          <ul>
            <li><a href="">Link Label 01</a></li>
            <li><a href="">Link Label 02</a></li>
            <li><a href="">Link Label 03</a></li>
            <li><a href="">Link Label 04</a></li>
            <li><a href="">Link Label 05</a></li>
            <li><a href="">Link Label 06</a></li>
            <li><a href="">Link Label 07</a></li>
            <li><a href="">Link Label 08</a></li>
          </ul>
        </li>
        <li><h3>Label 2</h3>
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
            <li><a href="">Link 6</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li>
              <a href="" class="link-image">
              <img src="https://html5book.ru/wp-content/uploads/2017/01/white-lady.jpg">
              </a>
            </li>
            <li><h3 class="image-header">Heading</h3></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">file</a></li>
    <li><a href="">Blog</a></li>
  </ul>
</nav>

كود CSS


    @import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');
*{box-sizing: border-box;}
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {text-decoration: none;}
.top-menu {
  background: white;
  position: relative;
}
.top-menu:after, 
.submenu:after {
  content: "";
  display: table;
  clear: both;
}
.top-menu > li {
  display: inline-block;
  float: left;
}
.top-menu > li > a {
  display: block;
  padding: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  transition: .2s linear;
}
.top-menu > li > a:hover {color: #B03062;}
.dropdown:after {
  content: "\f107";
  font-family: FontAwesome;
  margin-left: 4px;
  vertical-align: top;
}
.submenu, 
.submenu-standart {
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,.07);
  background: white;
  padding: 25px 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,30px,0);
  transition: .5s ease-out;
  transform-origin: 0% 0%;
}
.submenu {width: 100%;}
.submenu-standart {
  min-width: 200px;
  padding: 10px 0;
}
.dropdown-standart {position: relative;}
.top-menu > li:hover .submenu, 
.top-menu > li:hover .submenu-standart {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}
.submenu > li {
  float: left;
  width: calc(100% / 3);
  padding: 0 18px;
  border-right: 1px solid #e5e5e5;
}
.submenu-standart li {padding: 0 18px;}
.submenu > li:last-child {border-right: none;}
.submenu img {
  display: block;
  width: 100%;
}
.submenu li a, 
.submenu-standart li a {
  display: block;
  padding: 5px 0;
  color: #666;
  font-size: 13px;
}
.submenu li .link-image {padding: 0;}
.submenu li a:hover {color: #B03062;}
.submenu h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.content {
  margin: 20px auto;
  padding: 0 20px;
}

إضافة استجابة للأجهزة المحمولة


    @media(max-width:768px) {
  .top-menu li {
    width: 100%;
    height: auto!important;
  }
  .top-menu > li {border-bottom: 1px solid #e5e5e5;}
  .top-menu > li > a {padding: 18px}
  .submenu,
  .submenu-standart {
    position: relative;
    display: none;
    box-shadow: none;
    padding: 0;
    background: rgba(0,0,0,.02);
  }
  .submenu-standart {padding: 10px 0;}
  .submenu > li {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 18px;
  }
  .submenu h3 {margin: 0 0 10px}
  .submenu .image-header {margin: 10px 0}
  .submenu li:last-of-type {border-bottom: none}
  .top-menu > li:hover .submenu,
  .top-menu > li:hover .submenu-standart {display: block;}
}

jQuery

يمكن أن يكون ارتفاع كل عمود مختلفًا ، وإذا أضفت خلفية أو حدًا إلى القائمة الفرعية ، فسيكون الفرق في الارتفاع ملحوظًا. لذلك ، لحل هذه المشكلة ، دعنا ندرج المكون الإضافي matchHeight jquery.
```
 
jQuery(document).ready(function($) {
  $('.submenu > li').matchHeight();
});
```

شرح الكود بالتفصيل

هذا الكود يوضح كيفية إنشاء قائمة تنقل navbar تحتوي على قوائم فرعية dropdown menus وقوائم كبيرة mega menus باستخدام HTML و CSS مع إضافة بعض التأثيرات التفاعلية باستخدام jquery. دعنا نشرح الكود بالتفصيل:

الهيكل العام (HTML):
- <nav class="container">: يحتوي على القائمة الرئيسية.
- <ul class="top-menu">: القائمة الرئيسية تحتوي على عناصر (<li>) كل عنصر يمثل رابطًا (<a>).
- <li class="dropdown-standart">: عنصر يحتوي على قائمة فرعية بسيطة dropdown.
- <li><a href="" class="dropdown">Link</a>: عنصر يحتوي على قائمة كبيرة mega menu مع أقسام متعددة.
- <ul class="submenu">: القائمة الكبيرة تحتوي على أقسام <li> كل قسم يحتوي على روابط فرعية.
التنسيقات CSS:
- @import url(...): يتم استيراد خطوط Google Fonts (Playfair Display و Roboto).
- * {box-sizing: border-box;}: يجعل حساب العرض والارتفاع يتضمن الحشوة (padding) والحدود (border).
- body: يتم تعيين الخط العام وحجم الخط وهوامش الصفحة.
- ul: يتم إزالة النقاط من القوائم وإزالة الهوامش الافتراضية.
- a: يتم إزالة التزيين الافتراضي للروابط (مثل الخط التحتي).
- .top-menu: يتم تنسيق القائمة الرئيسية بخلفية بيضاء.
- .dropdown:after: يتم إضافة رمز سهم (من FontAwesome) بجانب الروابط التي تحتوي على قوائم فرعية.
- .submenu, .submenu-standart: يتم تنسيق القوائم الفرعية بإضافة ظل وحواف، وجعلها مخفية في البداية opacity: 0; visibility: hidden;.
- .top-menu > li:hover .submenu: عند تمرير الماوس فوق عنصر القائمة، تظهر القوائم الفرعية بتحريك سلس (transition).
- .submenu > li: يتم تقسيم القائمة الكبيرة إلى أقسام متساوية العرض.
- .submenu img: يتم تنسيق الصور داخل القائمة الكبيرة.
- .container: يتم تحديد عرض الصفحة وجعلها في المنتصف.
- @media(max-width:768px): يتم تعديل التنسيقات للأجهزة المحمولة، حيث تصبح القوائم متراصة وتظهر بشكل عمودي.
التفاعلية (jQuery):
- jQuery(document).ready(function($) {...});: يتم استخدام jQuery لجعل ارتفاع عناصر القوائم الفرعية متساويًا باستخدام دالة matchHeight.
شرح القوائم:
- القائمة البسيطة Dropdown):
  - تحتوي على روابط فرعية تظهر عند التمرير فوق العنصر الرئيسي.
  - مثال: <li class="dropdown-standart"><a href="" class="dropdown">Mega Link</a>.
- القائمة الكبيرة Mega Menu:
  - تحتوي على أقسام متعددة، كل قسم يحتوي على روابط فرعية.
  - مثال: <li><a href="" class="dropdown">Link</a> مع <ul class="submenu">
كيفية عمل الكود:
- عند التمرير فوق عنصر القائمة:تظهر القوائم الفرعية dropdown أو mega menu بتحريك سلس.
- على الأجهزة المحمولة: تصبح القوائم متراصة وتظهر بشكل عمودي.
- التفاعل مع الصور والنصوص: يتم تنسيق الصور والعناوين داخل القوائم الكبيرة لجعلها جذابة.
مثال عملي
- القائمة الرئيسية:
  - Home
  - Mega Link (مع قائمة فرعية بسيطة)
  - Link (مع قائمة كبيرة)
  - File
  - Blog
- القائمة الكبيرة:
  - تحتوي على أقسام مثل Label 1 و Label 2 مع روابط فرعية وصورة.
النتيجة النهائية:
- قائمة تنقل تفاعلية تحتوي على قوائم فرعية بسيطة وقوائم كبيرة.
- تصميم متجاوب يعمل على جميع الشاشات.
- تأثيرات بصرية سلسة عند التمرير فوق العناصر.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

القائمة المنسدلة الضخمة المستجيبة مع CSS

طريقة التركيب

كود HTML

إضافة استجابة للأجهزة المحمولة

jQuery

شرح الكود بالتفصيل

الهيكل العام (HTML):

التنسيقات CSS:

التفاعلية (jQuery):

شرح القوائم:

كيفية عمل الكود:

مثال عملي

النتيجة النهائية:

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

شرح خاصية background-image مع استخدام عدة صور خلفية

إضافة كود أزرار التحكم في حجم الخط من قبل الزوار على بلوجر

Media Queries الأدوات التي تجعل موقعك يعمل بسلاسة على أي جهاز

تصميم ثلاثي الأعمدة السر وراء المحتوى المنظم والجذاب

عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار