menu
attachment
  • الصفحة الرئيسية
  • فهرس الموقع
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • الابلاغ عن الروابط المعطوبة
notifications
موقع الوليد نت
  • تطوير مدونات بلوجر
  • _قوالب بلوجر
  • _اضافات بلوجر
  • _دروس بلوجر
  • _قوالب بلوجر مدفوعة
  • تطوير ووردبريس
  • _قوالب ووردبريس مجانية
  • _اضافات ووردبريس
  • الربح من الانترنت
  • سكربتات مجانية
  • خدمات عامة
  • مسابقات
    10|recentpost
  • موقع الوليد نت
  • اضافات بلوجر
  • شرح انشاء قائمة التبويبات المنسدلة لمدونات بلوجر
‪Walid Farouk‬‏
0

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

الجمعة، 14 يوليو 2017
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement

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



كود الإضافة يمكنك استخدامه في آداة 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>
الموضوع منقول للافادة
من موقع كن مدون


Share This
clear
  • الكاتب ‪Walid Farouk‬‏
    ‪Walid Farouk‬‏
    اهتم بما هو جديد في عالم الانترنت
  • آخر تحديث: يوليو 14, 2017
اضافات بلوجر

add_comment ليست هناك تعليقات:

إرسال تعليق

مواقع ندعمها

  • _ايجي بوكـ
  • _كوكب المحترفين
  • _بوابة الامبراطور
  • _خالد تك Khaled Tech
  • _ميجا بلس
  • _طارق أحمد | Tarek Ahmed
  • _متحف التقنيات
  • _سطور البرمجية
  • #ضع موقعك هنا
  • #ضع موقعك هنا

مشاركة مميزة

افضل موقع للربح من رفع الملفات Mega4Up 2021

المشاركات الشائعة

  • تحميل قالب سكويز النسخة المدفوعة مجانا حصريا من موقع الوليد نت
  • تحميل قالب فلامينغو - Flamingo
  • تحميل قالب ناز NazV2.1.1 المدفوع مجانا
  • اضافة هيدر يعرض معلومات المباريات لمدونات البث المباشر
  • تحميل قالب ماج برو - قالب بلوجر عصري للمجلات مجانا

تابعنا على فيسبوك

‏موقع الوليد نت‏

المتابعون

الإشتراك في القناة

الاقسام

  • اضافات بلوجر
  • اضافات ووردبريس
  • الربح من الانترنت
  • خدمات عامة
  • دروس بلوجر
  • سكربتات مجانية
  • قوالب بلوجر
  • قوالب بلوجر مدفوعة
  • قوالب ووردبريس مجانية
  • مسابقات
  • facebook
  • youtube
  • twitter
attachment
  • الصفحة الرئيسية
  • شروط الاستخدام
  • سياسة الخصوصية
  • تبادل اعلاني
  • facebook
  • youtube
  • twitter
  • pinterest

الحصول على إشعارات عبر البريد الإلكتروني

عن الموقع موقع الوليد نت

للربح من الانترنت وتطوير مدونات بلوجر وتحميل قوالب بلوجر وقوالب ووردبريس

صفحات مفيدة

  • الابلاغ عن الروابط المعطوبة
  • أداة ضغط أكواد CSS
  • أداة تحويل الاكواد
  • اداة تشفير اكواد

اقسام الموقع

اضافات بلوجر اضافات ووردبريس الربح من الانترنت خدمات عامة دروس بلوجر سكربتات مجانية قوالب بلوجر قوالب بلوجر مدفوعة قوالب ووردبريس مجانية مسابقات
clear
clear

  • facebook
  • youtube
  • twitter
موقع الوليد نت