في هذه التدوينه سوف أتحدث عن تطبيق مميز يمكن استخدامه علي قائمة منزلقه ليعطي تأثير باتساع المساحه والتمدد ليعطي قائمة منسدله عند مرور الماوس عليها
طريقة الإستخدام :

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

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

[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>
[/html]

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

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

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

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

[html] 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’})
});

});
[/html]

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

[html] 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’})
});

});
[/html]

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

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