scream
المِؤسس
scream.1fr1.net
الطاقة : 1835
نقاط : 22129885
 | | موضوع: شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد css الثلاثاء 10 يوليو 2012 - 16:27 | |
|
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
قبل الشرح هذا الشرح إجابة على سؤال بخصوص شرح خطوات قوائم المواقع والتى يتم إنشاءها بلغة الـ CSS
وكعادتي قبل أن أقوم بأى شرح ابحث أولا عن إبداعات الأعضاء والشروحات التى
سبقت فى هذا الموضوع وجدت شرحا رائعا فى مدونة أحد الأخوة العرب ( كتوم )
فوجدت فيه الفائدة فجزاه الله خيرا على ماقدم فى شرحه الرائع ، فقد كفانا
مشقة الشرح ، وسوف ننتقل من هذا الشرح الى بعض القوائم الإحترافية إن شاء الله ....
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
للمبتدئيين فى برمجة المواقع ولغة CSS يرجى مراجعة الدورات التى قام بتقديمها الأخوة فى القسم جزاهم الله خيرا!!!
القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير
لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من
الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.
الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم
,
- في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
أولاً: تنسق أكواد XHTML..
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.
يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..
.
لاحظ أن كل بند من البنود الرئيسية أصبح داخلة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!
ثانياً: خصائص وأنماط CSS..
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود،
يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
كود PHP:
/* Dropdowns Menu */
#pop, #pop li ul {
margin: 0;
padding: 0;
list-style: none;
}
ولجعل القائمة أفقية ها نعدل على البنود الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.
كود PHP:
#pop li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#pop li li {
float: right;
width: 175px;
margin: 0;
padding: 0;
}
ثم الوصلات بالبنود الرئيسية ..
كود PHP:
#pop li a, #pop li a:link, #pop li a:visited {
font: normal 12px Tahoma;
color: #414A52;
text-decoration: none;
background: #D2DDE4;
display: block;
padding: 5px 12px;
}
#pop li a:hover, #pop li a:active {
color: #FFF;
display: block;
background: #2583AD;
padding: 5px 12px;
}
والوصلات داخل البنود الفرعية بالقائمة المنسدلة
كود PHP:
#pop li li a, #pop li li a:link, #pop li li a:visited {
background: #D2DDE4;
width: 175px;
margin: 0;
padding: 5px 12px;
border-top: 1px solid #FFF;
}
#pop li li a:hover, #pop li li a:active {
background: #2583AD;
}
القائمة الفرعية مرة أخرى وضبط الجسم وإخفائها في حالة عدم النقر على البنود الرئيسية، وتلاحظ أنه تم تحدد الموضع absolute لليمين، نسبه الى البند الرئيسي المحدد موضعه relative.
كود PHP:
#pop li ul {
position: absolute;
width: 199px;
display: none;
right: 0;
}
#pop li:hover ul {
display: block;
}
أنتهت الخصائص، والى هذا الحد القائمة تعمل بشكل سليم على جميع المتصفحات
القياسية مثل Firefox, Opera, Safari بإصداراتهم وكذلك تعمل بشكل سليم على
IE7
فيما عدا المتصفح التعيس IE6 فالقائمة المنسدلة الفرعية عند التأشير لا تظهر فيه الا بواسطة إضافة JavaScript كي تعمل.
| ملاحظة : |  تحديث !!
لدعم القائمة للعمل على متصفح IE6 قم بإستبدال الكود.. وهو فى مؤخرة أكواد الـ CSS
|
كود PHP:
#pop li:hover ul {
display: block;
}
بالكود التالي :
كود PHP:
#pop li:hover ul, #pop li.sfhover ul {
display: block;
}
ثم في رأس الصفحة وبين الوسم عرف وضع كود JavaScript التالي، أو يمكنك وضعه بملف خارجي ومن ثم ربطة بالصفحة، وهو نقلاً عن موقع Html Dog
كود PHP:
<script language="JavaScript" type="text/javascript">
لاحظ أن ’’pop‘‘ المبينه هنا اسم المعرّف id# للقائمة، في حالة تغييرة الى أي اسم آخر هاتغيرة من داخل كود JavaScript ايضا.
// إنتهى الشرح //
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
</li>
| |
|
