السلام عليكم ورحمة الله وبركاته, فى هذا الدرس سأقوم بشرح طريقة عمل قائمة منسدلة بلغة " HTML & CSS " فقط وذلك بالأعتماد على خاصية " display " عبر لغة " CSS ".
وسوف أقوم بالشرح لك كيف تقوم بتركيب القائمة المسندلة حتى وإن لم يكن لك خبرة فى لغات البرمجة, وذلك عبر إضافة الأكواد كاملة, وسيتم الشرح عبر منصة بلوجر.
شرح تركيب القائمة
1-قم بالتوجه إلى أكواد " CSS " من ثم قم بنسخ الكود أسفله وأضفه داخل أكواد " CSS ".
وإذا كنت تعمل على منصة بلوجر فما عليك سوى الذهاب إلى " قالب " ثم تقوم بالضغط على زر " تحرير HTML " كما هو مبين بالصورة وتقوم بالبحث عن " ]]></b:skin> " وذلك بأستعمال " Ctrl + F ", ثم تقوم بإضافة الكود فوقه.
#drop {
position:absolute;
display:none;
list-style:none;
width: 200px !important;
z-index:260;
}
#drop li {
display: flex;
border-left: 0 !important;
}
#drop li a {
background: #fff;
padding: 6px 14px; font-family: tahoma, arial;
width: 150px;
}
#sub:hover #drop {
display: block;
}
2-إضافة كود " HTML " وذلك عبر التوجه إلى أكواد " الناف بار " وفى الغالب تكون بالشكل الآتى.
بعد ذلك نقوم بأستبدال كود الـ " LI " المشار عليه بالصورة السابقة بالكود التالى :
<li class='li-nav-menu' id='sub'>
<a href='#'>قائمة</a>
<ul id='drop'>
<li> <a href='#'>رابط فرعي 1 </a></li>
<li> <a href='#'>رابط فرعي 1 </a></li>
</ul>
</li>
بعد ذلك قم بالتعديل على الأقسام والروابط ثم قم بحفظ القالب.
ليست هناك تعليقات:
إرسال تعليق