بسم الله الرحمن الرحيم ..
في 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 تضع معرّف آخر للصفحه نفسها كالتالي :
وكل صفحه من صفحات الإنتقال بالقائمة تأخذ لها معرف جديد
أخيراً سنضيف أمر جديد لتميز تلك العناصر داخل أوامر 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 ولكن تم التطبيق مباشرة على الوصلات..
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Zizwar
