ديسمبر 08, 2013
قوائم
القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري 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 هو لون الفاصل بين كل سطر
وهذا هو شرح إضافة روابط أو قوائم جديدة
كرر السطر الأحمر في حالة الرغبة في إضافة عنصر جديد
الجزء الأزرق كاملأ هو إضافة قائمة منسدلة بداخلها قائما منسدلة أخرى كما هو موجود في المعاينة
الجزء الأخضر هو القائمة المنسدلة الفرعية يمكنك ازالتها أو تكرارها ان أردت زيادة
قليل من التركيز في الأكواد ستنجح في تنسيقها كما تريد
وطبعا تغير إسم كل رابط كما تريد وبالنسبة لرمز الـ # إستبدله بالرابط المراد فتحه عند الضغط على العنصر
وبالتوفيق
ليست هناك تعليقات: