درس مفصل انشاء قائمة بسيطة ب jquery
http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ ط§ظ†ط´ط§ط، ظ‚ط§ط¦ظ…ط© ط¨ط³ظٹط·ط© ط¨ jquery
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،
هذا درس مفصل بسيط لانشاء قائمة رائعة بالجاكوري
صورة للقائمة :
http://img191.imageshack.us/img191/9...nstitre1lr.jpg
الدرس مفصل :
1- ملف HTML
اولا انشيء صفحة HTML فارغة باستعمال الكود code التالي
رمز Code:
قائمة jquery
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
ادخل هذه الاكواد بين وسمي في ملفHTML
رمز Code:
4-ملفات jquery
حمل الملفات المرفقة و ارفقها مع مجلد القائمة (jquery.zip)
التعديل الأخير كان بواسطة cherire; 14 - 01 - 2014 الساعة 01:35
الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif jquery.zip (19.5 كيلوبايت, عدد مرات المشاهدة 116 مرة) [/TR]
[TR]
http://www.traidnt.net/vb/images/attach/zip.gif gs-menu.zip (20.9 كيلوبايت, عدد مرات المشاهدة 128 مرة) [/TR]
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
