الرئيسيةبحـثالمجموعاتالتسجيلدخول


شاطر | 
 

 شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد css

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
scream
المِؤسس



scream.1fr1.net
الطاقة : 1823

نقاط : 22127166


مُساهمةموضوع: شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد css   الثلاثاء 10 يوليو 2012 - 16:27


الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

السلام عليكم ورحمة الله وبركاته


قبل الشرح هذا الشرح إجابة على سؤال بخصوص شرح خطوات قوائم المواقع والتى يتم إنشاءها بلغة الـ CSS
وكعادتي قبل أن أقوم بأى شرح ابحث أولا عن إبداعات الأعضاء والشروحات التى
سبقت فى هذا الموضوع وجدت شرحا رائعا فى مدونة أحد الأخوة العرب ( كتوم )
فوجدت فيه الفائدة فجزاه الله خيرا على ماقدم فى شرحه الرائع ، فقد كفانا
مشقة الشرح ، وسوف ننتقل من هذا الشرح الى بعض القوائم الإحترافية إن شاء الله ....



للمبتدئيين فى برمجة المواقع ولغة CSS يرجى مراجعة الدورات التى قام بتقديمها الأخوة فى القسم جزاهم الله خيرا!!!

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

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

    ,
  • في xhtml ثم ثانياً تنسيقها عن طريق خصائص css المختلفة...




    أولاً: تنسق أكواد XHTML..
    وكتابة بنود القائمة الرئيسية، وقد سميت القائمة ul بمعرف خاص بإسم pop#.









    كود بلغة HTML:




    يأتي بعدها وضع بقية البنود، قائمة فرعية تابعة لكل بند من البنود الرئيسية تنسق كما يلي..







    .
    لاحظ أن كل بند من البنود الرئيسية أصبح داخلة قائمة كاملة تابعة له وتحتوي داخلها على بنود القائمة الفرعية المنسدلة!

    ثانياً: خصائص وأنماط 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>



المصدر: منتدى الصرخة


 

Moonأَحِـنُّ إِلَى الكَـأْسِ التِي شَـرِبَتْ بِهَـا** Love11 **وأَهْـوَى لِمَثْـوَاهَا التُّـرَابَ وَمَا ضَـمَّاMoon 

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://scream.1fr1.net
 
شرح خطوات عمل قائمة منسدلة رأسية، فقط بأكواد css
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: قسم البرمجيات :: الخوارزميات-
انتقل الى: