انشاء قاءمة منسدلة بلغة css

انشاء قاءمة منسدلة بلغة css

-----------------------------

Set up a drop-down list of language css

-----------------------------

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

css,blogger , CSS , HTML ,

حتى نظفي على مدونتنا اضافات جديدة و تنسيق جميل نقوم باضافة قائمة منسدلة لاقسام مدونة بلوجر blogger ، هذه القوائم المنسدلة التي نقوم بادراجها على المواقع تحتوى على قدر كبير من محتويات المدونة في حالت ما اذا كانت المدونة كبيرة ، فهي تحتوى على عدد كبير من الروابط الخاصة بعدة صفحات انترنت، و عدة اقسام للموقع، و هذا بادخال لغة السي اس اس CSS التي عن طريقها يمكننا عمل قوائم منسدلة احترافية و انيقة و جذابة ، فهي تتوافق مع الانسيابية الكبيرة للمواقع الديناميكية، وفقا لمقاييس مدروسة مسبقا على مخططات ورقية لهندسة الموقع.....

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

لهذا يجب عليك ان تكون محيط بقدر من المعارف في لغة البرمجة و خاصة الاش تي ام ال HTML ( تابع شرح درس لغة الاش تي ام ال HTML من هنا)....

Set up a drop-down list of language css,blogger , CSS , HTML , href,titel, body, ul, li, padding, menu , margin,

خصائص لغة CSS :

نعلم ان البنية الاساسيى للغة HTML هي كما يلي:

ان لغة CSS تكتب بداخل ملف الاكواد داخل جزء

<head></head> و مباشرة تحت كود عنوان الصفحة <titel></titel>

اما كود القائمة المنسدلة فيكتب في ملف الاكواد بداخل الجزء <body> كود القائمة المنسدلة </body>

كود <div></div> يدل على اجراء تقسيم على منطقة معينة من الصفحة و يكتب دائما في قسم بودي <body>

كود القوائم يكتب دائملا في قسم لوحده حتى لا يختلط علينا الامر و حتى يكون التنسيق جييد، أي يكتب دائما بداخل كود التقسيم <div> كود القائمة </div>

يفتتح كود القائمة دائما ب <ul> و هو يعني كتابة قائمة ، يتبعها مباشرة الكود <li> و هو يعني كتابة او ادراج عنصر او رابط بداخل القائمة، و بهذا تكون عبارة عن قائمة افقية مثال:

اذا اردنا ان نكتب قائمة افقية للمنتجات النتالية: تفاح ، برتقال ، اناناس، موز، اخرى تكون كما يلي:

<ul>

<li><a href="#">تفاح </a></li>
<li><a href="#">برتقال</a></li>
<li><a href="#">اناناس</a></li>

</ul>

ان كود <a href="#"> </a> يعني وضع نص للقائمة و كلمة href="#" تعني اننا نضع رابط تشعبي لهذه الكلمة و يتم وضعها مكان الشارب (أي العلامة # )

و الآن نريد ان نفصل قليلا و نضع انواع للتفاح مثلا: تفاح احمر، تفاح اخصر، تفاح اصفر، فان القاشمة المنسدلة تكون على مستوى التفاح أي لما نمرر الماوس على كلمة تفاح تنسدل قائمة لانواع التفاح، و الكود على ال HTML يكون كما يلي:

<ul>

</ul>
<li><a href="#">برتقال</a></li>
<li><a href="#">اناناس</a></li>

النتيجة هي كما يلي:

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

<div id="menu">
<ul>

<li><a href="#">قسم رئيسي 1 </a>

<ul> 
<li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
</ul>

</li>

<li><a href="#">قسم رئيسي 2 </a>

  <ul>
  <li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
</ul>

</li>

<li><a href="#">قسم رئيسي 3 </a>

  <ul>
  <li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
<li><a href="#">اسم فرعي </a></li>
</ul>

</li>

</ul>
</div>

النتيجة هي كما يلي:

من خلال ما سبق فان القائمة غير منسدلة فهي بشكل عمودي و بتنسيق غير مناسب و نحن نريد لها ان تكون بشكل افقي و ان تكون منسدلة، و يمكننا ان نفعل هذا التنسيق من خلال لغة CSS و هذا كما يلي:

و هذا بتعليم كل جزء من القائمة كما يلي:

شرحنا فيما سبق ان اكواد css توضع في الجزء هيد head ، ان اكواد CSS توضع بين حاضنتين

ازالة الهوامش للعنصر <ul> لبداية القائمة بادخال الكود التالي:

#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}

سنشرح هذا الكود بالتفصيل، كلمة menu تعني قائمة و هذه القيمة موجودة في التقسيم div في الكود السابق، كلمة padding تعني ابعاد القائمة على التقسيم من كل جهة، و تأخذ قيم رقمية الرقم 0 يعني بدون ابعاد، اما الكلمة margin فهي تعني حواف تاخذ قيم رقمية و هنا هي بدون حواف،

يمكن لنا وضع الخاصية فلوت floatللعنصر <li>

الخاصية فلوت float تأخذ قيم يمين right او يسار width و هذا يمنخ القائمة الشكل الافقي عوض شكلها العمودي ، و يكون الكود كما يلي:

#menu > ul > li {

float:right;
padding:0;
margin:0;
}

البادينغ (padding) تعني ابعاد القائمة على التقسيم من كل جهة، و المارجن (margin) تعني حواق القائمة.

01- وضع خصائص الروابط و الالوان الخاصة بالقائمة:

سوف نضع خصائص الروابط التشعبية الخاصة بكل كلمة موجودة بداخل القائمة المنسدلة، و هذا من خلال الكود التالي:

#menu > ul > li > a {
display:block; //مهمة
font:normal bold 14px tahoma;
background: #F9F9F9;
min-width:100px;
text-align:center;
padding:10px 15px 10px 15px;
text-decoration:none;
color:#FFF;
border-top:4px solid #FFFFFF;
border-bottom:4px solid #00B4FF;
transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
background:#666;
border-top-color:#00B4FF;
color:#00B4FF;
}

سنشرح هذا الكود بشيء من التفصيل: كلمة font تعني نوع الخط و ليكن عادي (normal) و حجمه 14 اما نوع الكتابة فهي tahoma و يمكن ان يكون (times new roman)، اما كلمة background فتعني لون الخلفية و الذي يأخذ اما قيم او حروف و نحن نأخذ القيو و ليكن اللون ذو القيمة #F9F9F9 ، و كلمة text-align تعني تمركز النص و ليكن في الوسط (center)، اما ابعاد القائمة (padding) على التقسيم div فهو 10 بيكسل من الجهتين العلوية و السفلية و 15 بيكسل من اليمين و اليسار، اما كلمة text-decoration فتعني تزيين النصوص بألوان نحن نتركها بلا تزيين (none) ، اما لون النصوص (color) فليكن اسود و يأخذ القيمة التالية (#FFFFFF)،

01- وضع خصائص للقوائم الفرعية المنسدلة:

العناصر الفرعية هي القائمة المنسدلة أي بمجرد مرمر الماوس عليها ستنسدل و تضهر منبثقة من تحت العنوان الرئيسي، و الكوديكون كما يلي:

#menu > ul > li > ul {
position:absolute;
top:45px; //هذا هو إرتفاع القائمة
right:0;
display:none;
}

حتى تكون القائمة منسدلة سوف نعطي للخاصية position القيمة (absolute) اما الخاصية display فهي بدون قيمة (none) و بهذا فان ظهور القائمة الفرعية المنسدلة سوف لا يؤثر على باقي عناصر القائمة وباقي محتويات الصفحة.

و يمكننا ان نظيف بعض الخصائص الاخرى كما في الكود التالي:

#menu > ul > li > ul > li > a {
background: #F4F4F4;
display:block; //مهمة
font:normal normal 12px tahoma;
padding:5px 10px 5px 10px;
text-decoration:none;
color:#FFF;
border-bottom:1px solid #FFF;
min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
background:#777;
}

ستأخذ خلفية (background) بالقيمة اللون (#F4F4F4) اما الخط (font) فهو عادي (normal) بحجم 12 بيكسل، و ابعاد (padding) القائمة هي 5 بيكسل من الاعلى و الاسفل و 10 بيكسل من اليمين و اليسار، اما النصوص فهي بدون تنسيقات (text-decoration) ، و لون الخط (color) فهو بالقيمة (#DCDCDC)

5- انهاء كود التنسيق بلغة CSS:

من خلال قفل كود القائمة بلغة CSS فقط لوحدها كما يلي:

#menu > ul > li:hover > ul { display:block; }

-------------------------------------

حمل كتاب انشاء مدونة بلوجر Blogger من الصفر حتى الاحتراف من هنا

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

اذا واجهتك أي مشكل او تسائل ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....

ان اعجبك الموضوع لا تنسى بمتابعتنا بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في موقع برامج انترنت و اخبارك نت ...

يمكنكم متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....

زورو المواقع التالية

http://satelet.blogspot.com/	http://ecomedfot.blogspot.com/
http://net-progg.blogspot.com/	http://wordshear.blogspot.com/
http://bac-bem-univ.blogspot.com/	http://programe-explique.blogspot.com

الجمعة، 9 سبتمبر 2016