abohmam
19-04-2011, 06:06 PM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد CSS
قبل الشرح هذا الشرح إجابة على سؤال بخصوص شرح خطوات قوائم المواقع والتى يتم إنشاءها بلغة الـ CSS
وكعادتي قبل أن أقوم بأى شرح ابحث أولا عن إبداعات الأعضاء والشروحات التى سبقت فى هذا الموضوع وجدت شرحا رائعا فى مدونة أحد الأخوة العرب ( كتوم )
فوجدت فيه الفائدة فجزاه الله خيرا على ماقدم فى شرحه الرائع ، فقد كفانا مشقة الشرح ، وسوف ننتقل من هذا الشرح الى بعض القوائم الإحترافية إن شاء الله ....
http://www.abc4web.net/upload/images2/lpnk8pzphk.gif (http://www.abc4web.net/upload/)
للمبتدئيين فى برمجة المواقع ولغة CSS يرجى مراجعة الدورات التى قام بتقديمها الأخوة فى القسم جزاهم الله خيرا!!!
القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.
الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم <ul>, <li> في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...
http://www.abc4web.net/upload/images2/flotoz0gmw.gif (http://www.abc4web.net/upload/)
بداية شاهد مثال الشرح للمعاينة
:abc4web: (http://www.abc4web.net/abc4web_java/css/CSS Dropdowns Menu_Ar.html)
والحفظ من المرفقات
:at:
أولاً: تنسق أكواد XHTML..
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.
<ul id="pop">
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
</ul>
وهذه نتيجة المعاينة
http://www.abc4web.net/upload/images2/qqbgfovera.gif (http://www.abc4web.net/upload/)
يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..
<ul id="pop">
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
</ul>
</li>
</ul>
وعند المعاينة سنحصل على التالي :
http://www.abc4web.net/upload/images2/ls6fun0srs.gif (http://www.abc4web.net/upload/)
لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!
ثانياً: خصائص وأنماط CSS..
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود،
يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
/* Dropdowns Menu */
#pop, #pop li ul {
margin: 0;
padding: 0;
list-style: none;
}
ولجعل القائمة أفقية ها نعدل على البنود الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.
#pop li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#pop li li {
float: right;
width: 175px;
margin: 0;
padding: 0;
}
ثم الوصلات بالبنود الرئيسية ..
#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;
}
والوصلات داخل البنود الفرعية بالقائمة المنسدلة
#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.
#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
#pop li:hover ul {
display: block;
}
بالكود التالي :
#pop li:hover ul, #pop li.sfhover ul {
display: block;
}
ثم في رأس الصفحة وبين الوسم <head> عرف وضع كود JavaScript التالي، أو يمكنك وضعه بملف خارجي ومن ثم ربطة بالصفحة، وهو نقلاً عن موقع Html Dog
<script language="JavaScript" type="text/javascript">
<!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("pop").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
لاحظ أن ’’pop‘‘ المبينه هنا اسم المعرّف id# للقائمة، في حالة تغييرة الى أي اسم آخر هاتغيرة من داخل كود JavaScript ايضا.
// إنتهى الشرح //
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد CSS
قبل الشرح هذا الشرح إجابة على سؤال بخصوص شرح خطوات قوائم المواقع والتى يتم إنشاءها بلغة الـ CSS
وكعادتي قبل أن أقوم بأى شرح ابحث أولا عن إبداعات الأعضاء والشروحات التى سبقت فى هذا الموضوع وجدت شرحا رائعا فى مدونة أحد الأخوة العرب ( كتوم )
فوجدت فيه الفائدة فجزاه الله خيرا على ماقدم فى شرحه الرائع ، فقد كفانا مشقة الشرح ، وسوف ننتقل من هذا الشرح الى بعض القوائم الإحترافية إن شاء الله ....
http://www.abc4web.net/upload/images2/lpnk8pzphk.gif (http://www.abc4web.net/upload/)
للمبتدئيين فى برمجة المواقع ولغة CSS يرجى مراجعة الدورات التى قام بتقديمها الأخوة فى القسم جزاهم الله خيرا!!!
القوائم المنسدلة من الإضافات المهمة التى لا يستغني عنها أي موقع كبير لقدرتها على إحتواء أكبر عدد من الروابط في حالة كان موقعك به العديد من الأقسام، وتقنية css تتيح لك عمل ذلك مع توافق تام للمعايير القياسية، علاوة على الإنسيابية وسهولة التعديل.
الدرس يندرج تحت فئة المتقدمين وخطوات العمل على مرحلتين كالعادة، أولاً كتابة محتويات القائمة بالأوسمة المعتادة للقوائم <ul>, <li> في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...
http://www.abc4web.net/upload/images2/flotoz0gmw.gif (http://www.abc4web.net/upload/)
بداية شاهد مثال الشرح للمعاينة
:abc4web: (http://www.abc4web.net/abc4web_java/css/CSS Dropdowns Menu_Ar.html)
والحفظ من المرفقات
:at:
أولاً: تنسق أكواد XHTML..
وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.
<ul id="pop">
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
</ul>
وهذه نتيجة المعاينة
http://www.abc4web.net/upload/images2/qqbgfovera.gif (http://www.abc4web.net/upload/)
يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..
<ul id="pop">
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">وصلة رئيسية أفقية</a>
<ul>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
<li><a href="#">وصلة رئيسية أفقية</a></li>
</ul>
</li>
</ul>
وعند المعاينة سنحصل على التالي :
http://www.abc4web.net/upload/images2/ls6fun0srs.gif (http://www.abc4web.net/upload/)
لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!
ثانياً: خصائص وأنماط CSS..
خطوة خطوة وبالترتيب حسب تسلسل الأوسمة نبدأ بكتابة الخصائص مع القائمة الرئيسية التى تأخذ المعرّف pop# والقائمة الفرعية الأخرى داخل البنود،
يمكنك الإضافة والتعديل على هذه الخصائص كما يحلو لك، هي فقط بيان للخصائص الرئيسية ولك حرية التعديل بعدها.
/* Dropdowns Menu */
#pop, #pop li ul {
margin: 0;
padding: 0;
list-style: none;
}
ولجعل القائمة أفقية ها نعدل على البنود الرئيسية والفرعية بإضافة float جهه اليمين، لاحظ أيضا في البنود الرئيسية تم تحديد موضعها بـ relative ستعرف سبب ذلك لاحقاً حتى يتم التحكم في جسم القائمة الفرعية وتحديد موضعه نسبه لهذا العنصر.
#pop li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#pop li li {
float: right;
width: 175px;
margin: 0;
padding: 0;
}
ثم الوصلات بالبنود الرئيسية ..
#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;
}
والوصلات داخل البنود الفرعية بالقائمة المنسدلة
#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.
#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
#pop li:hover ul {
display: block;
}
بالكود التالي :
#pop li:hover ul, #pop li.sfhover ul {
display: block;
}
ثم في رأس الصفحة وبين الوسم <head> عرف وضع كود JavaScript التالي، أو يمكنك وضعه بملف خارجي ومن ثم ربطة بالصفحة، وهو نقلاً عن موقع Html Dog
<script language="JavaScript" type="text/javascript">
<!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("pop").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>
لاحظ أن ’’pop‘‘ المبينه هنا اسم المعرّف id# للقائمة، في حالة تغييرة الى أي اسم آخر هاتغيرة من داخل كود JavaScript ايضا.
// إنتهى الشرح //
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.