إصنع قائمة أزرار منزلقة بإستخدام jQuery

تطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery .. يمكنك رؤية نماذج لمواقع إستخدمت فيها التطبيق بزيارة  مدونة صوت الفؤاد أو مدونة عبدالله السعيد أو شاهد هذا الديمو ..

طريقة الإستخدام :

• قم بتحميل التطبيق من هذه الصفحة
• اضف الكود التالي في ترويسه صفحة Html الخاصه بك :

   <link rel="stylesheet" href="YourPath/animated-menu.css"/>
   
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
  <script src="YourPath/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="YourPath/animated-menu.js" type="text/javascript"></script>

  لا تنسى تغيير مسار الملفات لما يناسب موقعك .. في الكود أعلاه يتم إستدعاء مكتبة jQuery من على جوجل كود .. إذا أردت يمكنك حفظة ورفعه على موقعك و تغيير المسار الخاص به
• في جسم الصفحة Body .. أضف القائمة الخاصه بك ..

   <ul>
   <li><a href="#">الرئيسية</a>
   <li><a href="#">عني</a></li>
   <li><a href="#">عن المدونة</a></li>
   <li><a href="#">راسلني</a></li>
  </ul>

• يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu

حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery ..  فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
 //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
 //Remove outline from links
 $j("a").click(function(){
  $j(this).blur();
 });
 
 //When mouse rolls over
 $j("li").mouseover(function(){
  $j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
 });
 
 //When mouse is removed
 $j("li").mouseout(function(){
  $j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
 });
 
});

التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
 //By Mo3aser.com
   m=document.getElementById('buttons');
  sa=m.getElementsByTagName('li');
 
 //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
 //Remove outline from links
 $j("a").click(function(){
  $j(this).blur();
 });
 
 //When mouse rolls over
 $j(sa).mouseover(function(){
  $j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
 });
 
 //When mouse is removed
 $j(sa).mouseout(function(){
  $j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
 });
 
});

الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :

<ul id="buttons">
 <li><a href="#">الرئيسية</a>
 <li><a href="#">عني</a></li>
 <li><a href="#">عن المدونة</a></li>
 <li><a href="#">راسلني</a></li>
</ul>

هذا كل شئ .. لا تنسى أن تشاركنا برابط موقعك إذا أستخدمت فيه التطبيق ^_^