شرح كيفية عمل قوائم منسدله فى مدونات بلوجر

الكاتب Unknown في 12:46 ص لا يوجد تعليقات

كيفية عمل قوائم منسدله فى مدونات بلوجر

1- إضافة كود CSS الخاص بالقائمة المنسدلة

سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي

رمز PHP:

]]></b:skin>  

و قبله مباشرة قم بإضافة هذا الكود

رمز PHP:

}#jsddm li a:hover {background: #C8C8C8;}#jsddm li ul {margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white;
}#jsddm li ul li {float: none;display: inline;
}#jsddm li ul li a {width: auto;background: #CAE8FA;}#jsddm li ul li a:hover {background: #A3CEE5;}  

2- إضافة كود ال Java بعد إضافة الكود الأول قم بالبحث عن هذا الكود

 رمز PHP:

</head>  

ثم أضف قبله مباشرة الكود الخاص بالجافا

 رمز PHP:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});document.onclick = jsddm_close;
  //]]>
  </script>

3- إضافة القائمة المنسدلة

 الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة توجه الأن إلى التخطيط / إضافة أداة / HTML/JavaScript  

 أترك مكان العنوان فارغ و ضع الكود في المربع الكبير الأن قم بإضافة الكود التالي للأداة

 رمز PHP:

<ul id="jsddm">   <li><a href="#">Home</a>   <li><a href="#">Menu 1</a>   <ul>   <li><a href="#">Drop 1-1</a></li>   <li><a href="#">Drop 1-2</a></li>   <li><a href="#">Drop 1-3</a></li>   </ul>   </li>   <li><a href="#">Menu 2</a>   <ul>   <li><a href="#">Drop 2-1</a></li>   <li><a href="#">Drop 2-2</a></li>   </ul>   </li>   <li><a href="#">Menu 3</a>   <ul>   <li><a href="#">Drop 3-1</a></li>   <li><a href="#">Drop 3-2</a></li>   <li><a href="#">Drop 3-3</a></li>   <li><a href="#">Drop 3-4</a></li>   </ul>   </li>   <li><a href="#">Menu 4</a></li>   <li><a href="#">Menu 5</a></li>   <li><a href="#">Menu 6</a></li>   </li></ul> 

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

 ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.