قائمة منسدلة متجاوبة لمدونات بلوجر


السلام عليكم ورحمة الله وبركاته
جائتنا مؤخرًا الكثير من الطلبات حول القوائم المنسدلة لقد أضفنا بعض المواضيع والأشكال عنها ولكن قد تكون معقدة قليلًا واليوم سوف أشارك معكم قائمة منسدلة بسيطة ومتجاوبة مع الشاشات المتعددة سهلة التخصيص.


كيفية اضافة هذه القائمة المنسدلة إلى مدونتك؟

1. لكي تكون القائمة المنسدلة متجاوب على موقعك أن يكون متجاوب
2. من لوحة التحكم في بلوجر توجه إلى قالب المدونة ثم أنقر على تحرير HTML
3. نقرة واحدة على القالب ثم نقوم بإستخدام مفتاح الإختصار ctrl+f بالبحث عن الرمز </head> بعد العثور عليه اضف الكود التالي فوقه مباشرةً:
<style type='text/css'>
/*<![CDATA[*/
#menu-wrapper{
width:100%;
background:#455A64;
}
nav {
  display: block;
  float:center;
  margin:0px auto 0px auto;
  max-width:1000px;
  padding:0;
  background:#ff9514;
}
.menu {
  display: block;
  margin:0px;
  padding:0px;
}
.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
  padding:0px;
  margin:0px;
  text-align:right;
  font-size:14px;
}
.menu li a {
  text-decoration: none;
  padding:15px;
  margin:0px;
  display: block;
  color: #fff;
}
.menu li a:hover,.menu li:hover>a {
  color: #fff;
  background:#e8102d;
}
.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  right: 0px;
  background: #fff;
  z-index: 99;
}
.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}
.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
  background: #e8102d;
  color: #fff;
}
.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
}
.menu ul ul {
  right: 149px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
}
.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
}
.responsive-menu {
  display: none;
  max-width: 100%;
  padding:15px;
  background: #ff9514;
  color: #fff;
}
a.responsive-menu {
color:#fff;
}
@media screen and (max-width:600px) {
nav {margin: 0 15px;background: none;overflow:hidden}
.menu {display: none;}
.responsive-menu {display: block;}
.menu li {display: block;margin: 0px;}
.menu li a {background: #fff;color: #797979;}
.menu li a:hover,.menu li:hover>a {background: #e8102d;color: #fff;}
.menu ul {visibility: hidden;opacity: 0;top: 0;right: 25px;width: 100%;}
.menu li:hover>ul {visibility: visible;opacity: 1;position: relative;}
.menu ul ul {right: 50px;}
}
/*]]>*/
</style>



4. قم بأختيار المكان المناسب حيث سوف تظهر القائمة مثال اسفل الكود </header> او فوق الرمز <div id='content-wrapper'> او في المكان الذي تراه مناسب قد تختلف هذه الرموز عما هي في قالب مدونتك بعد اختيار المكان الصحيح أضف الكود التالي في المكان الذي أخترته:
<!-- بداية القائمة المنسدلة -->
<div id='menu-wrapper'>
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> القائمة</a>    
   <ul class='menu'>
  <li><a href='/'>الرئيسية</a></li>
  <li><a href='#'>قائمة 1</a></li>
  <li><a href='#'>قائمة 2</a></li>
  <li><a href='#'>قائمة 3</a>
   <ul class='sub-menu'>   
   <li><a href='#'>تعديل 1</a></li>
   <li><a href='#'>تعديل 2</a></li>
        </ul>
  </li>
     <li><a href='#'>قائمة 4</a></li>
 </ul>
</nav>
</div>
<!-- نهاية القائمة المنسدلة -
طبعا يمكنك زيادة عدد ازرار القائمة بتكرارها نفسها إلى أي حد مطلوب.

5. وأخير اضف كود الجافاسكربت فوق الرمز </body> :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 600 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
//]]>
</script>

6. أنقر حفظ القالب ثم قم بمعاينته.

لأي أستفسارات أخرى الرجاء وضعه في التعليقات أسفلوشكرًا للمتابعة.


مشاركات أقدم المقال التالي
8 تعليق
  • Med
    Med 10‏/06‏/2016، 7:41:00 م

    إضافة جميلة
    تشرفني زيارتك لمدونتي
    http://tech5academy.blogspot.com/

  • Unknown
    Unknown 20‏/07‏/2016، 2:21:00 ص

    س ;-(

  • مصطفى العراقي
    مصطفى العراقي 07‏/08‏/2016، 2:43:00 م

    مرحباً استاذ محمد
    اكو موضوع محيرني ! وهو اريد اضيف رابط خارجي للمدونة يعني مثلاًاسوي نموذج اتصال بنا او غير ذلك !
    القصد مثل هذه المدونة : http://www.theiraqipro.com/

    اريد اكون روابط فرعية مثل هذه :
    http://get.theiraqipro.com/
    http://ios.theiraqipro.com/
    http://groups.theiraqipro.com/

    اتمنى ان فهمت قصدي بأنتظار ردك وشكراً لك مقدماً

    • مداد الجليد
      مداد الجليد 07‏/08‏/2016، 10:25:00 م

      اهلا بك
      اذا كان الدومين لديك مستضاف على name.com اقراء هذا الشرح لمعرفة كيفية انشاء دومين فرعي لنطاق مدونتك:
      http://www.madad2.com/2015/09/How-subdomain-for-your-blog-in-name.html
      واذا كان مستضاف على جودادي فعيك البحث عن "كيفية إنشاء دومين فرعي من لوحة تحكم جودادي"
      وبعد إنشاء الدومين الفرعي عليك ربطه في موقع آخر أو مدونة أخرى

  • Mohammed Info | محمد إنفو
    Mohammed Info | محمد إنفو 02‏/08‏/2017، 6:06:00 م

    القائمة لاتعمل على اجهزة الاندرويد لماذا ؟

    • مداد الجليد
      مداد الجليد 02‏/08‏/2017، 7:21:00 م

      اضف الكود التالي
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
      فوق الرمز
      </head>

  • Mohammed Info | محمد إنفو
    Mohammed Info | محمد إنفو 05‏/08‏/2017، 11:20:00 ص

    اشكرك جزيل الشكر عملت القائمة ^_^

    • مداد الجليد
      مداد الجليد 05‏/08‏/2017، 6:13:00 م

      بالتوفيق أخي العزيز

أضف تعليق
عنوان التعليق