شرح انشاء قائمة التبويبات المنسدلة

إضافة مميزة بتنسيق حصري تقوم الإضافة بعمل تبويبات او قوائم منسدلة لكن بتفعيل يدوي عبر الضغط يمكنك عبر تلك القائمة ان تنشئ الكثير من الأشياء قائمة روابط مثلا لمن يحبون عمل أسئلة أو يمكن عمل فهرس لاهم المواضيع او حتى اضافة أدوات تظهر مع الضغط وهذا ما سنراه في المثال الحي التالي

معاينة

كما لاحظنا في المعاينة هناك روابط وهناك اضافة يمكنك تخصيص الآداة كما تريد والآن لشرح التركيب والتعامل مع الإضافة

هذا هو كود الإضافة يمكنك استخدامه في آداة HTML/JavaScript أو حتى داخل موضوع

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenu.js' type='text/javascript'></script>
<style>
.cnmuvrmenu {
list-style: none outside none;
margin: 0 auto;
padding: 0;
width: 300px;
}
.cnmuvrmenu .button a {
background: url("https://lh6.googleusercontent.com/-taGhCUDRGUk/U_8HFbwtw7I/AAAAAAAAEko/J_KWIOVPWW0/s16/cnmuarrow.png") no-repeat scroll 4px center #0480d9;
border-radius: 3px;
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
padding: 5px 8px 6px 2px;
}
.cnmuvrmenu .menu li {
color: #555;
font-size: 14px;
list-style: none outside none;
}
.cnmuvmdrop li {
background: #f1f1f1;
border: 1px solid #bbb;
color: #888;
margin: 5px 0;
padding: 4px 10px;
transition: all 0.7s ease 0s;
}
.cnmuvmdrop li:hover {
background:  #e7f3fc;
border: 1px solid #7dc2f3;
}
.cnmuvmdrop a {
color: #000;
display: inline !important;
}
.cnmuvrmenu a {display: block; text-decoration: none; transition: all 0.7s ease 0s;}
.cnmuvrmenu .menu ul {margin: 0; padding: 0; width: 100%;}
.cnmuvmdrop li a:hover {text-decoration:none;}
.cnmuvmdrop{display:none;}
</style>
<ul class="cnmuvrmenu">

<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الاولى</a></li>
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الأولى</a></li>
<li>2. <a href="#">تعديل القائمة الأولى</a></li>
<li>3. <a href="#">تعديل القائمة الأولى</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الثانية</a></li>
<li>2. <a href="#">تعديل القائمة الثانية</a></li>
<li>3. <a href="#">تعديل القائمة الثانية</a></li>
<li>4. <a href="#">تعديل القائمة الثانية</a></li>
<li>5. <a href="#">تعديل القائمة الثانية</a></li>
</ul>
</li>
</ul>
</li>
</ul>

الكود المعلم بالأحمر يمكنك ازالته ان كانت لديك مكتبة جي كويري في قالبك

طبعا الكلمات العربية يمكنك تعديلها كما تشاء

ورمز الـ # بجوار كل كلمة هو الرابط أيضاً يمكنك تعديله ما عدا الخاص بالزر الاساسي لكل قائمة وهو المعلم بالأزرق

لعمل قائمة إضافية كل ما عليك فعله هو تكرار الكود الاخضر كاملا

مع مراعاة ان تكرار الكود البني داخل الكود الاخضر معناه رابط زيادة في القائمة

وهذا السطر  ما هو الا فاصل فقط بين القائمة والاخرى ليسهل التعديل والإضافة

يمكنك تعديل هذا اللون #0480d9 لتغير لون أزرار القائمة

وهذا لتغيير اللون #e7f3fc عند تمرير الماوس على الروابط

وهذا هو لون الإطار #7dc2f3

الرقم 300 هو عرض القائمة يمكنك تعديله
بالنسبة لطريقة اضافة آداة بدلا من الرابط كما في المثال أضفت صندوق الفيس بوك

بدلا من ان تكرر القائمة الخضراء كاملة كرر فقط الكود التالي

<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>
<li class="cnmuvmdrop">
<ul>
<li>هنا كود الآداة</li>
</ul>
</li>
</ul>
</li>

ملاحظة : بخصوص تأثير الإهتزاز نلاحظ في المعاينة انه عند التنقل بين القوائم يحدث اهتزاز ان لم ترد التأثير بهذا الشكل وتريده انسيابي بدون إهتزاز استبدل الكود الأصفر بالكود التالي

<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenuno-shake.js' type='text/javascript'></script>

هذا الموضوع من كن مدون

وبهذا انتهى موضوعناً وبالتوفيق

مدونة تجربية

شرح انشاء قائمة التبويبات المنسدلة

مقالات ذات صلة