facebook

للحصول على أحد البنرات التالية وبدون مقابل مادي الرجاء الإطلاع على هذا الموضوع : : الإشراف في منتدى بلوجر العربي



مدرسة الشروحات هنا تجد الشروحات التعليمية نصية كانت أو مصورة وفي كل مجالات بلوجر .

إضافة رد
 
أدوات الموضوع تقييم الموضوع انواع عرض الموضوع
العالمي غير متواجد حالياً المشاركة رقم : 1
الصورة الرمزية العالمي

العالمي

______________

مشرف

العالمي غير متواجد حالياً


مــدونــتــي:
اسم المدونة : العالمي
اختصاص المدونة : تقنية وانترنت

 
الملف الشخصي
رقــم العضويـة: 6075
تاريخ التسجيل: Sep 2013
العــــــمــــــــر:
المشاركـــــات: 169  [ ؟ ]
عــدد النـقــاط: 30
 شرح عمل قائمة منسدلة




سأشرح لكم كيفية عمل قائمة منسدلة للمدونة

الطلبات :- اولآ يجب ان يكون لديك محرر نصوص ( Notepad)
ثانيآ متصفح لعرض ما ستقوم بعملة

اللغات المستخدمة :- اولآ لغة الـ HTML
ثانيآ لغة الـ CSS


لنبدأ اولآ سنقوم بعمل القائمة بلغة الـ HTML


كود:
<ul id="menu">
<li><a href="#">قائمة رئيسية</a></li>
<li><a href="#">قائمة رئيسية</a></li>
<li><a href="#">قائمة رئيسية</a></li>
<li><a href="#">قائمة رئيسية</a></li>
</ul>
** لاحظ اننا اعطينا معرف خاص بالقائمة وهوا Menu ولقد اعطيناه Id **
فتصبح القائمة بهذا الشكل :-








ثم نقوم بإدخال القوائم المنسدله كالتالي ....



كود PHP:
<ul id="menu">

<
li><a href="#">قائمة رئيسية</a>
<
ul>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
</
ul>
</
li>

<
li><a href="#">قائمة رئيسية</a>
<
ul>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
</
ul>
</
li>

<
li><a href="#">قائمة رئيسية</a>
<
ul>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
</
ul>
</
li>

<
li><a href="#">قائمة رئيسية</a>
<
ul>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
<
li><a href="#">قائمة منسدلة</a></li>
</
ul>
</
li>
</
ul
** لاحظ انن وضعنا داخل كل بند من بنود القائمة القائمة الرئيسية قائمة فرعية تابعة له **
فتصبح القائمة بالشكل التالي :-








الان نأتي لنضيف اكواد الـ Css لتنسيق لقائمة
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف menu# والقائمة الفرعية الأخرى داخل البنود، يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.


كود PHP:
#menu , menu li ul{ margin:0;
 
padding:0;
 list-
style-type:none;} 
ولجعل القائمة أفقية سوف نقوم بالتعديل على بنود كل من القائمة الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.



كود:
#menu li{
  float:right;
  margin:0;
  padding:0;
  position:relative;}
   #menu li li {
  float:right;
  *****:200px;
  margin:0;
  padding:0;}
ثم نأتي الي التعديل علي الوصلات الرئيسية بالبنود كالتالي


كود PHP:
 #menu li a ,#menu li a:link ,#menu li a:visited{
   
fontblod 12px Tahoma;
 
color#414A52;
 
****-decorationnone;
 
background#D2DDE4;
 
displayblock;
 
padding5px 12px;}
 
#menu li a:hover, #menu li a:active {
 
color#FFF;
 
displayblock;
 
background#2583AD;
 
padding5px 14px;

ثم نأتي الوصلات الداخل للبنود الفرعية بالقائمة المنسدلة
كود:
#menu li li a, #menu li li a:link, #menu li li a:visited { background: #D2DDE4; *****: 175px; margin: 0; padding: 5px 12px; border-top: 1px solid #FFF;}
#menu li li a:hover, #menu li li a:active { background: #2583AD;}

ثم نأتي اخيرآ الي القائمة الفرعية مره اخري وضبط الجسم واخفائها في حاله عدم النقر علي بنود القائمة الرئيسية وسوف تلاحظ وتلاحظ أنه تم تحدد الموضع absolute لليمين، نسبه الى البند الرئيسي المحدد موضعه relative.

نضع الاكواد هكذا

كود:
#menu li ul { position: absolute; *****: 199px; display: none; right: 0;}#menu li:hover ul { display: block;}
في الاخير تصبح القائمة بالشكل التالي :-





وفي الاخير لا تنسي ان تترك تعليقك سواء سلبآ او ايجابآ


المصدر العالمي للمعلوميات|http://www.al3almi.info/ http://www.al3almi.info/2013/10/blog...#ixzz2j0DXirma



كُتبت [ 10-29-2013 - 03:21 ]
رد مع اقتباس

قديم 10-29-2013, 12:32   #2

 
الصورة الرمزية Hady Mana

بيانات العضو

Hady Mana

______________

عـضـو

Hady Mana غير متواجد حالياً

 
الملف الشخصي
رقــم العضويـة: 1422
تاريخ التسجيل: Apr 2012
العــــــمــــــــر: 19
المشاركـــــات: 374  [ ؟ ]
عــدد النـقــاط: 46
مدونــتــي:
اختصاص المدونة : شخصية

 رد: شرح عمل قائمة منسدلة


رائع اخى

التوقيع
  رد مع اقتباس

قديم 10-29-2013, 16:54   #3

 
الصورة الرمزية ibrachoukri

بيانات العضو

ibrachoukri

______________

مشرف

ibrachoukri غير متواجد حالياً

 
الملف الشخصي
رقــم العضويـة: 5988
تاريخ التسجيل: Jul 2013
العــــــمــــــــر:
المشاركـــــات: 102  [ ؟ ]
عــدد النـقــاط: 30
مدونــتــي:
اسم المدونة : شكري للمعلوميات
اختصاص المدونة : تقنية وويب

 رد: شرح عمل قائمة منسدلة


جميل واصل

التوقيع
شكري للمعلوميات :www.infochoukri.com
حسابي على الفيسبوك:https://www.facebook.com/infochoukri
قناتي على اليوتيوب:https://www.youtube.com/infochoukri

  رد مع اقتباس

قديم 10-30-2013, 14:29   #4
بيانات العضو

aplaticos

______________

عـضـو

aplaticos غير متواجد حالياً

 
الملف الشخصي
رقــم العضويـة: 5219
تاريخ التسجيل: Jan 2013
العــــــمــــــــر: 13
المشاركـــــات: 139  [ ؟ ]
عــدد النـقــاط: 30
مدونــتــي:
اسم المدونة : مدونة تكنو تيك
اختصاص المدونة : تقنية وانترنت

 رد: شرح عمل قائمة منسدلة


رائع أخي
بالتوفيق

التوقيع
سبحانك اللهم وبحمدك ، أشهد أن لا إله إلا أنت أستغفرك وأتوب إليك

________________________________________

لا خير في كاتم علم
________________________________________

مدونة أبلتكس التقنية
للتقنية عنوان
  رد مع اقتباس

قديم 10-31-2013, 00:01   #5

 
الصورة الرمزية العالمي

بيانات العضو

العالمي

______________

مشرف

العالمي غير متواجد حالياً

 
الملف الشخصي
رقــم العضويـة: 6075
تاريخ التسجيل: Sep 2013
العــــــمــــــــر:
المشاركـــــات: 169  [ ؟ ]
عــدد النـقــاط: 30
مدونــتــي:
اسم المدونة : العالمي
اختصاص المدونة : تقنية وانترنت

 رد: شرح عمل قائمة منسدلة


مشكورين اخواني الكرام علي مروركم الجميل وتشجيعكم

التوقيع
  رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
منسدلة, قائمة

أدوات الموضوع
انواع عرض الموضوع تقييم هذا الموضوع
تقييم هذا الموضوع:

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

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

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
مساعدة في قائمة منسدلة A.M.A.M.S طلبات الإضافات 1 01-16-2012 10:39
[شرح] انشاء قائمة منسدلة أبو الوليد مدرسة الشروحات 2 09-07-2011 06:44
قائمة مميزة منسدلة بثأتير ال jquery آل إضافات بلوجر - blogger plugins 0 05-03-2011 20:34
جعل التصنيفات في قائمة منسدلة - بلوجر آل إضافات بلوجر - blogger plugins 0 04-24-2011 17:39
حصريا اضف قائمة منسدلة الى مدونتك آل إضافات بلوجر - blogger plugins 0 04-24-2011 17:07

Preview on Feedage: %D9%85%D9%86%D8%AA%D8%AF%D9%8A%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1-%D8%A8%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A-blogger Add to My Yahoo! منتديات بلوجر بالعربي BLOGGER Add to Google! منتديات بلوجر بالعربي BLOGGER Add to MSN منتديات بلوجر بالعربي BLOGGER iPing-it منتديات بلوجر بالعربي BLOGGER Add to Feedage RSS Alerts منتديات بلوجر بالعربي BLOGGER
|

الساعة الآن 14:26


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
جميع الحقوق محفوظة لـ بلوجر العربي