قائمة منسدلة خفيفة فقط CSS

المحتويات والمعلومات في هذا الموضوع قديمة

العودة للرئيسية متابعة القراءة

القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري Jquery ومنها ما يعمل باكواد CSS فقط , ماالفرق بينهما ؟ الفرق ان التي تعمل بتقنية جي كويري اكثر تطورا لكنها أثقل  أما الـ CSS فهي خفيفة للغاية وسهلة التعامل وانا أفضلها جداً ولهذا قمت بإنشاء هذه الإضافة وراعيت أن تكون سهلة التركيب و التنسيق للجميع لكي يتحكم بها كل مستخدم كما يريد

أولا عاين الإضافة من هنا

بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt

<style type="text/css">
#cnmudrdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
}
#cnmudmenu,#drop{
    list-style:none;
    direction:rtl;
    padding:0;
    margin:0;
    }
#cnmudmenu li {
    float:right;
}
#cnmudmenu li a {
    display:block;
    padding:11px 15px;
    color:#fff;
    text-decoration:none;
    font:15px Tahoma, Geneva, sans-serif;
    font-weight:bold;
}
#cnmudmenu li a:hover {
    background:#ccc;
    color:#000;
    transition:all .7s ease 0s;
}
#drop {
    position:absolute;
    display:none;
    list-style:none;
z-index:60;
}
#drop li {
    float:none;
}
#drop li a {
background:#000;
border-bottom:1px solid #bbb;
padding:5px 10px;
width:150px;
}
   
#sub:hover #drop {
    display:block;
}
#drop2:hover #cnmudmenu3 {
    display:block;
}
#cnmudmenu3 {
    position:absolute;
    display:none;
    margin-right:131px;
    margin-top:-28px;
    }
#cnmudmenu3 li{
    list-style:none;
    margin-left:100px;
}
#cnmudmenu3 li a {
width:150px;
}
</style>

<div id='cnmudrdown'>
<ul id="cnmudmenu">
<li> <a href="#">العنصر الأول</a></li>
<li id="sub"> <a href="#">العنصر الثاني</a>
<ul id="drop">
<li> <a href="#">رابط فرعي 1 </a></li>
<li> <a href="#">رابط فرعي 2 </a></li>
<li id="drop2"> <a href="#">رابط فرعي 3 </a>
<ul id="cnmudmenu3">
<li> <a href="#">ثانوي 1</a></li>
<li> <a href="#">ثانوي 2</a></li>
<li> <a href="#">ثانوي 3</a></li>
</ul>
</li>
<li> <a href="#">رابط فرعي 4 </a></li>
<li> <a href="#">رابط فرعي 5 </a></li>
</ul>
</li>
<li> <a href="#">العنصر الثالث</a></li>
<li> <a href="#">العنصر الرابع</a></li>
</ul>
</div>

والآن مع شرح التنسيق

هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة

كرر السطر الأحمر في حالة الرغبة في إضافة عنصر جديد
الجزء الأزرق كاملأ هو إضافة قائمة منسدلة بداخلها قائما منسدلة أخرى كما هو موجود في المعاينة
الجزء الأخضر هو القائمة المنسدلة الفرعية يمكنك ازالتها أو تكرارها ان أردت زيادة
قليل من التركيز في الأكواد ستنجح في تنسيقها كما تريد
وطبعا تغير إسم كل رابط كما تريد وبالنسبة لرمز الـ # إستبدله بالرابط المراد فتحه عند الضغط على العنصر
وبالتوفيق