ط¯ط±ط³ ط§ظ†ط´ط§ط، ظ‚ط§ط¦ظ…ط© ط¨ط³ظٹط·ط© ط¨ jquery


بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته،،

هذا درس مفصل بسيط لانشاء قائمة رائعة بالجاكوري

صورة للقائمة :


الدرس مفصل :




1- ملف HTML
اولا انشيء صفحة HTML فارغة باستعمال الكود code التالي

رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-**=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>قائمة jquery</title> </head> <body> </body> </html>
2-ملف css

محتوى الملف
رمز Code:
/* الانماط الكاملة للقائمة */ .gs-menu { position: relative; height: 29px; width: 421px; background-color: white; padding: 15px; margin: 10px 0; overflow: hidden; border: 1px solid gray; } /* قوة التدفق افقيا */ .gs-menu li { float: right; list-style: none; } .gs-menu li.back { border: 1px solid #000; background-color: #e6e8ea; width: 9px; height: 30px; z-index: 8; position: absolute; } /* التمثيلات و خلفية القائمة */ .gs-menu li a { font: bold 14px arial; text-decoration: none; color: #000; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: right; height: 30px; position: relative; overflow: hidden; margin: auto 10px; } .gs-menu li a:hover, .gs-menu li a:active, .gs-menu li a:visited { border: none; }
3- اكواد Javascript

ادخل هذه الاكواد بين وسمي <head> في ملفHTML

رمز Code:
<link rel=&quot;stylesheet&quot; href=&quot;gs-menu.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot;> <script type=&quot;text/javascript&quot; src=&quot;jquery-1.2.3.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;jquery.easing.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;jquery.lavalamp.min.js&quot;></script> <script type=&quot;text/javascript&quot;> $(function() { $(&quot;#1, #2, #3&quot.lavaLamp({ fx: &quot;backout&quot;, speed: 700, click: function(event, menuItem) { return false; } }); }); </script>

4-ملفات jquery

حمل الملفات المرفقة و ارفقها مع مجلد القائمة (jquery.zip)


الملفات الكاملة للقائمة ايضا مرفقة (gs-menu.zip)

:. الموضوع الاصلى: هنا | المصدر: المنتدى forum - مجمع السكريبت scriptات | كاتب الموضوع: admin .:





التعديل الأخير كان بواسطة cherire; 14 - 01 - 2014 الساعة 01:35


الملفات المرفقة [TR]
jquery.zip (19.5 كيلوبايت, عدد مرات المشاهدة 116 مرة) [/TR]
[TR]
gs-menu.zip (20.9 كيلوبايت, عدد مرات المشاهدة 128 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©