كود يقوم بتحريك أزرار التصفح عند مرور الماوس

من طرف **lovar1977** 24/2/2011, 7:37 am

كود يقوم بتحريك أزرار التصفح عند مرور الماوس

يعمل على جميع النسخ

مثال بالصور

هذه الأزرار

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وعند مرور الماوس على أحدها
يتحرك هكذا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

طريقة الوضع : -

الكود يوضع بورقة الــــcss

لوحة الادارة > مظهر المنتدي > الوان > ورقة تصميم الـcss

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الكود للأعلى

الكود:: الكود: [url=http://help.ahlamontada.com/t792133-topic#][font=verdana][color=white]---------[/color][/font]تضليل المحتوى[/url] .mainmenu { display:inline-block; height:37px; overflow:hidden; vertical-align: top; /* для корректного отображения в старых браузерах */ display:-moz-inline-stack; zoom:1; *display:inline; _overflow:hidden; } a.mainmenu img { margin-top:0px; } a.mainmenu img:hover{ margin-top:-37px; }

كود تحيرك لآسفل

الكود:: لكود: [url=http://help.ahlamontada.com/t792133-topic#][font=verdana][color=white]---------[/color][/font]تضليل المحتوى[/url].mainmenu { display:inline-block; height:37px; overflow:hidden; vertical-align: top; /* для корректного отображения в старых браузерах */ display:-moz-inline-stack; zoom:1; *display:inline; _overflow:hidden; } a.mainmenu img { margin-top:0px; } a.mainmenu img:hover{ margin-top: 37px; }

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

ارجوا ان اكون افدتكم
انتهي الموضوع
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
منقول