النتائج 1 إلى 9 من 9

الموضوع: طريقة صنع قائمة سريعة متحركة (css).

  1. طريقة صنع قائمة سريعة متحركة (css).



    بسم الله الرحمن الرحيم ..

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

    فعندما كنا نريد صنع قائمة وفي خلفيتها صورة مثلا بإستخدام css ـ ,تتحرك او تتغير عند مرور الماوس عليها ـ في العادى كنا نستخدم عده صور لفعل هذا ( صورة أساسيه ـ وصورة عند المرور على عناصر القائمة ـ وصورة أخرى ربما في حاله الضغط على العنصر ).

    ومن عيوب هذة الطريقه فى توزيع الصور انه في كل مرة وعند الصغط يتوجب علينا إنتظار تحميل الصورة ومن ثم ظهورها لذا ستجد بطء نوعاً ما في تبديل ظهور الصور ..


    وتعال لمشاهدة المثال الذى سوف تتعلم صنع مثله .. ( مثــال )

    وسنستخدم في هذا المثال صورة واحده فقط مشتركة وقد تم دمج بها الـ 3 حالات المختلفة لظهور عنصر القائمة على عكس السابق.



    - الحاله الأولي a
    وفيه تم جعل العناصر او الوصلات a وتغيير خصائصها الى block ولمزيد من المعلومات حول أنواع العناصر تابع الشرح التالي : هنـــــا أو هنــــا ومن خلاله يمكننا ان نعرّف الفونت ونوعه وطريقه المحاذاة وإبعاد الزر في حالة واحده..

    كود:
    #nav a {
    	background: url(images/fast-rollovers.gif) no-repeat 0 0;
    	color: #0A246A;
    	display: block;
    width: 150px;
    	height: 26px;
    }

    - الحاله الثانية a:hover
    ولإننا إستخدمنا صورة مشتركة فلن نحتاج لإضافة صورة جديدة ـ ولكن فقط سوف يتم تغير موضع الصورة المشتركة بتغيير المحاذاة الى اليمين كى نظهرها في الحالة الثانية .

    كود:
    #nav a:hover {
    	background-position: -170px 0;
    	color: #9D005C;
    }
    - الحاله الثالثة a:active
    نفس الحالة الثانيه وفيه سنغير تموضع الصورة ولون الخط .

    كود:
    #nav a:active {
    	background-position: -340px 0;
    	color: #FFF;
    }
    ---------
    ولكي تميز عنصر القائمة الفعال حالياً في الصفحة عن بقيه الأزرار ـ سيتطلب منك ذلك ان تدخل معرّف جديد في كل وصلة على حده وبإسم مختلف كالتالي :

    كود:
    <a href="index.html" id="homenav">الرئيسية</a>
    <a href="products.html" id="pronav">المنتجات</a>
    <a href="faq.html" id="faqnav">تعليمات</a>
    <a href="contect.html" id="connav">إتصل بنا</a>
    إنتقل بعد ذلك الى أول الصفحة وفي الوسم body تضع معرّف آخر للصفحه نفسها كالتالي :

    كود:
    <body id="home">
    وكل صفحه من صفحات الإنتقال بالقائمة تأخذ لها معرف جديد
    أخيراً سنضيف أمر جديد لتميز تلك العناصر داخل أوامر css كالتالي :

    كود:
    body#home a#homenav, 
    body#products a#pronav, 
    body#faq a#faqnav, 
    body#contact a#connav {
    	background-position: -340px 0;
    	color: #FFF;
    }
    الصفحه بالإسم body#home تأخذ العنصر بالإسم a#homenav وهكذا ...... وفيه حركنا موضع الصورة الى الوضع active

    ## إنتهي ## حاول التجربة وستفهم أكثر

    مع ملاحظة انه لم يستخدم في المثال أكواد القائمة العادية في html ـ ul و li ولكن تم التطبيق مباشرة على الوصلات..





    __________________
    كتوم في المصنع {...}


  2. #2
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


    درس مميز بارك الله فيك، وهذه تثبيتة مني لدرسك






  3. #3
    فضلاً اكتب اسمك الحقيقي هنا
    زائرالمغرب


    شكرا د رس اكتر من رائع (لم استطع التطبيق)








  4. اقتباس المشاركة الأصلية كتبت بواسطة Zizwar
    درس مميز بارك الله فيك، وهذه تثبيتة مني لدرسك
    تسلم أخي Zizwar وشكراً على التثبيت بارك الله فيك.

    اقتباس المشاركة الأصلية كتبت بواسطة المغرب
    شكرا د رس اكتر من رائع (لم استطع التطبيق)
    العفو اخي ـ ولم تستطيع التطبيق لصعوبة الدرس ولا لم تفهمه بالمرة ، وإن حاولت قلي اين المشكلة.

    وتحيتي لكم ...





    __________________
    كتوم في المصنع {...}



  5. درس ممتاز بارك الله فيك

    و يستحق التثبيت فعلا





    __________________
    سبحان الله و بحمده .... سبحان الله العظيم

    للمراسلة



  6. السلام عليكم

    يعطيك العافية اخي على الدرس وبارك الله فيك

    لاحظ اننا استخدمنا هنا الــ id

    ( # )

    لماذا هل هي افضل اسرع أأمن أكثر مطابقة للمواصفات القياسية
    لماذا لم نستخدم الــ class

    (.)

    لانه معروف ان الكلاس للستايل والـ id لتعريف الكائن برمجيا

    لمذا الأول وليس الثني
    ول استخدمنا الثاني هل هي نفس الخطوات عند ما استخدمنا الاول؟



    شاكر لك





    __________________
    كل مالا يعطى يضيع



  7. اقتباس المشاركة الأصلية كتبت بواسطة b happy
    درس ممتاز بارك الله فيك

    و يستحق التثبيت فعلا
    تسلم وبارك الله فيك
    اقتباس المشاركة الأصلية كتبت بواسطة الإمبراطور وحيد
    السلام عليكم

    يعطيك العافية اخي على الدرس وبارك الله فيك

    لاحظ اننا استخدمنا هنا الــ id

    ( # )

    لماذا هل هي افضل اسرع أأمن أكثر مطابقة للمواصفات القياسية
    لماذا لم نستخدم الــ class

    (.)

    لانه معروف ان الكلاس للستايل والـ id لتعريف الكائن برمجيا

    لمذا الأول وليس الثني
    ول استخدمنا الثاني هل هي نفس الخطوات عند ما استخدمنا الاول؟



    شاكر لك
    وعليكم السلام

    ملاحظة فى محلها ـ وانا نسيت ذكر ذلك، فالامر سيان مع الوصلات سواء إستخدمت id او class كما انه لا يوجد اى إختلاف بينهم في السرعه او الأمن..

    والإثنين لهم نفس القواعد في css عند كتابة الأوامر ، الفرق والوحيد ان class يمكن ان تكرر اكثر من مرة لنفس الوسم بالصفحة ولهذا تستخدم كثيرأ وبحرية عكس id التى تأخذ معرّف واحد فقط بالصفحه ( ولو تكرر يظهر لك خطأ عند مطابقة المعايير القياسية ) ـ وأنا استخدمت id مع الوصلات لانه بطبيعه الحال القائمة الأساسية لا تتكرر في الصفحة الواحده وكنوع من التمييز عن بقيه الوصلات الأخرى..

    مثلها من بقية التصنيفات او الأوسمة التى نعطى لها معرّف وحيد لا يتكرر id كالهيدر والفوتر للصفحات وكذلك الإطار الكلي للصفحة او الغلاف wrapper ومن داخل هذا المعرّف يمكن ان ندرج عده class بحرية كما تحب ..

    أما في اول الصفحه مع الوسم body هذه لابد ان تأخذ معرّف خاص ووحيد لها id ولن تتعرف عليه أوامر css لو جعتله class .

    والأختلاف الذى يحدث لو طبقت class في الوصلات
    كود HTML:
    body#home a.homenav, 
    body#products a.pronav, 
    body#faq a.faqnav, 
    body#contact a.connav {
    background-position: -340px 0;
    color: #FFF;
    }
    حولنا فقط من (#) الى (.)

    تحيتي ،،





    __________________
    كتوم في المصنع {...}

  8. #8
    مُجَاهِد سابقاً
    تاريخ التسجيل
    Apr 2004
    المشاركات
    12,000


    جزاك الله خير ..





    __________________
    استخدم خاصية تنبيه المشرفين للضرورة وعند ملاحظة موضوع يخالف قوانين منتديات سوالف وسيتم مراجعة الموضوع او المشاركة المبلغ عنها على الفور



  9. ولكن ماذا ياأخوان لو كان هناك أكثر من قائمة بنفس الصفحة ـ كيف يتم تمييز العنصر الفعال حالياً ؟
    كنت أطبق أمس طريقه صنع قائمة أفقية مزدوجة اى العنصر الواحد بالقائمة يندرج تحته عده عناصر أخرى كما بالمثال التالي : هنــــا

    المشكل انك في هذه الحالة لان تستطيع إعطاء للوسم body المعرّف الصحيح لانه يتعرف على واحد فقط
    لذا كان هناك حل أفضل وهو الإستغناء كلياً عن معرّفات الوسم body وإضافة فئة جديدة ضمن أوامر css ثم تعطي لكل وصلة في الصفحة المناسبه لها فقط ..

    إذن فهذه الأكواد ليس لها اى داعي ـ فقم بحذفها
    كود:
    body#home a#homenav, 
    body#products a#pronav, 
    body#faq a#faqnav, 
    body#contact a#connav {
    	background-position: -340px 0;
    	color: #FFF;
    }
    وسنضيف بدلا منها الفئة الجديدة وتم تسميتها هنا current بالشكل التالي :
    كود:
    #nav a.current {
    	background-position: -340px 0;
    	color: #FFF;
    }
    والوصلات سوف تتغير وتحذف منها ايضا جميع تعاريف id او class لمن إستخدمه وتستبدل لتكون بالشكل التالي :
    كود HTML:
    <a href="index.html" class="current">الرئيسية</a>
    <a href="products.html">المنتجات</a>
    <a href="faq.html">تعليمات</a>
    <a href="contect.html">إتصل بنا</a>
    لاحظ تم تمييز العنصر الحالي فقط في الصفحه دون الباقي ـ وسوف نكرر الأمر مع باقي الوصلات ولكن بداخل الصفحة المخصصة لها الخ ... من الوصلات الفرعية

    تحيتي ،،





    __________________
    كتوم في المصنع {...}





ضوابط المشاركة

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

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض