عـــالم البرمجة عـــالم البرمجة



الربح من الأنترنيت

آخر الأخبار

الربح من الأنترنيت
أخبار
جاري التحميل ...
أخبار

شرح أفضل طريقة لإنشاء قائمة التبويبات المنسدلة

شرح أفضل طريقة  لإنشاء قائمة التبويبات المنسدلة

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

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

هذا هو كود الإضافة يمكنك استخدامه في آداة 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">
<!--------1-------->
<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>
<!--------2-------->
<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>

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

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

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

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

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

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

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

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

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

الرقم 300 هو عرض القائمة يمكنك تعديله

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

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

 

<!--------2-------->
<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>

بقلم : سفيـــان حمــامة

بقلم : سفيـــان حمــامة

مدون عربي مغربي الجنسية اصيب بجنون التدوين و متابعة الجديد و حب المنافسة في هذا المجال ، وأهتم بجديد التقنيات وتطوير البرامج هدفي من خلال هذه المدونة هو مشاركة كل ما اراه مناسب و جديد و يأتي بالفائدة على الجميع انشاء الله

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

التعليقات



موقع عالم البرمجة و للمعلوميات مختص في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و حواسيب ، و هدفنا هو تصحيح االأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، ويسهر على إشراف و سير الموقع الشاب المغربي ذو 25 ربيع ' سفيان حمامة ' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا.

إتصل بنا

المتابعون

جميع الحقوق محفوظة

عـــالم البرمجة

2016