العودة مطور Mtwer > دورات و دروس مطور المتخصصة > دورة تصميم المواقع بإسلوب المحترفين web2.0
تحديث الصفحة
[الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus

دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design]

موضوع مغلق
اسحب وشارك
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 11-01-2010, 01:39 AM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road
Arrow [الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus



([الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus)
[الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus



نستكمل معكم أخوانى الكرام دروس دورتنا
وفى هذا الدرس راح نتعلم كيفية عمل القوائم المتحركة

واختصار للوقت راح نشرح لكم الخلاصة ,
لانه فى تصميم المواقع وبرمجتها يجب ان تعلم انه فيه أشياء كثيرة
لابد ان تفرغ وقتك لك وتعطيها اهتمامها الاول
وموضوع القوائم المتحركة يعتبر من الأشياء اللى ممكن تحصل عليها من اى موقع
وبمجرد تعلمك كيفية التعديل , فهذا يكفى لان يؤدى طلبك حتى تعطى وقتك
للبرمجة الداخلية للموقع ..........



اولا:
أنا راح أشرح أسهل أساليب القوائم المتحركة وهو قوائم tabs

ثانيا:
فى الملفات المرفقة يوجد ملف شامل لامثلة قوائم متحركة كثيرة


ملاحظه: الملف تم أخذه من موقع dynamicdrive.com للاكواد وأدوات المبرمجين حفظا للحقوق

راح نأخذ منها المثال الثانى example2 ونشرح طريقة التعديل عليه :


اولا: قم بفتح ملف صفحة dropdowntabsdemo.htm ببرنامجنا phpdesigner

انظر لكود example2


#صورة 1





راح تجد هذا الكود

كود:
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1_b">CSS</a></li>
<li><a href="http://www.site.com" rel="dropmenu2_b">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>

هذه هو كود القوائم الرئيسية , يمكنك تغيير الرابط الخاص بأى لنك تريده مثلما تشاء,
ويمكنك اضافة عدد لا نهائى من القوائم بأضافة وسم اللست

مثال:


كود:
<li><a href="http://tools.dynamicdrive.com">contact us</a></li>

الحين عرفنا القوائم الرئيسية ...


ننتنقل الحين للقوائم الفرعية المدرجة تحت قسم رئيسى
كيف راح نضيفها لزر رئيسى من هذه الازارار

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

كود:
rel="القوائم الفرعية  id"
راحع كود القوائم الرئيسية وراح تجد هذا الكود :

كود:
<li><a href="http://www.site.com" rel="dropmenu2_b">Partners</a></li>
الكود الملون بالاحمر فائدته اننا اخبرنا هذا الزر الرئيسى انه فيه ازرار فرعية راح تندرج تحته واستخدمنا لها id اسمه dropmenu2_b

نأتى الان للازرار الفرعية

وراح يكون كودها كالاتى:

كود:
<div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
لاحظ الكود الملون بالاحمر فهو id الذى اشرنا له فى الزر الرئيسى partners حتى تندرج هذه القائمة الفرعية أسفله


لرؤية مثال عملى لهذه القوائم


اضغط على الصورة:




بهيك فى هذا الدرس تكونوا قد عرفتوا كيف القوائم الرئيسية سهلة

أتمنى تكونوا استمتعتم بالدرس

المطلوب من الأعضاء:

عمل تعديل على هذه القائمة واضافة ازرار اضافية وفرعية لها

ثم ارفاق الملفات بالكامل

او وضع صورة فقط للتعديل.


أخوكم vista-design

الملفات المرفقة
نوع الملف: zip cssmenus.zip‏ (23.6 كيلوبايت, المشاهدات 424)

توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

آخر تعديل بواسطة vista-design ، 02-02-2010 الساعة 01:29 AM
  #2  
قديم 02-02-2010, 01:18 AM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

uppppppppppp


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
موضوع مغلق

العلامات المرجعية

مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
الدرس السابع والثامن والتعامل مع القوائم (الدرس الاخير) قناص جوبا لغات برمجة مواقع PHP, ASP, Java Script, Perl 2 13-07-2011 02:50 PM
دورة الجيكويري، [مناقشة] الدرس السابع :شرح عمل القوائم الرئيسية لـ، دورة الجيكويري vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 28 12-05-2011 08:04 PM
دورة jquery شرح عمل القوائم الرئيسية والجانبيه لموقعك -[الدرس السابع] vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 1 25-08-2010 01:27 AM
مناقشة الدرس السابع شرح كيفية عمل القوائم المتحركة vista-design دورة تصميم المواقع بإسلوب المحترفين web2.0 15 11-02-2010 12:59 AM
الدرس الثامن : القوائم في لغة الــ html الوليد الراشدي دورة تعلم لغة الهتمل HTML 0 12-08-2008 02:51 PM



جميع الأوقات بتوقيت GMT +3. الساعة الآن 06:26 AM.
Search Engine Friendly URLs by vBSEO 3.5.2

الحقوق محفوظة لكل المطورين والمواقع العربية

Security team