اليوم سنعمل قائمة جانبية افقية بتاثيرات هوفر جميلة وضبابية وتشبه تاثير التضليل بتقنية الجي كويري لكن في قائمتنا لن نستخدم اي سكريبتات فقط ال css3
وكما ذكرت في اخر تدوينة ساكسر المنهج السخيف القائم على مبدأ ابحث عن الكود head وأسفله تما ضع الكود...الخ
1-قم بزيارة مختبر بجاد لمعاينة الاضافة
من هنـــا
نبدا بسم الله
نبدأ اولا بالسهل عمل القائمة وتكون كما يلي
<ul class="bmenu">
<li><a href="#">اختر مايناسبك</a></li>
<li><a href="#">اختر مايناسبك</a></li>
<li><a href="#">اختر مايناسبك</a></li>
<li><a href="#">اختر مايناسبك</a></li>
<li><a href="#">اختر مايناسبك</a></li>
<li><a href="#">اختر مايناسبك</a></li>
</ul>
ولاضافة او حذف عنصر اضف او احذف
<li><a href="#">اختر مايناسبك</a></li>
تقريبا في كل امثلتنا سيكون لدينا نفس النمط لعناصر القائمة فقط عنصر الارتباط سيكون مختلفا(مايعني انه يمكن ان نخرج بنماذج كثيرة من هذا الدرس وانت شطارتك)
النمط المشترك للقائمة غير المرتبة هو كالتالي
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
}
.bmenu li{
font-size: 50px;
display: block;
}
الى الان هذه قائمة عادية
حسنا لنرى الان كيف يمكننا تخصيص الاضافة
بالنسبة لي اريد ان اظهر عناصر القائمة غير واضحة بعض الشيء قبل تمرير الماوس عليها كما ساقوم باضافة انتقالات لجميع الخصائص
تابع معي
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
قبل ان تبدا في التذمر اسارع بقولي لا تهرب من التطبيق اكمل معي الدرس وبعده قم بالتطبيق وستتضح لك الصورة
ربما لن تنجح معك الاضافة مرة ومرتين لكنها في النهاية ستنجح معك وان تعثرت في احدى خطوات التطبيق لا تتردد في الاستفسار وان شاء الله تجد الرد الوافي
الان نكمل
عند تمرير الماوس فوق عنصر الارتباط نريده ان يكون واضحا لكن في نفس الوقت نريد ان تكون العناصر الخرى ضبابية لذلك تاثير الهوفر سيكون كمايلي
bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
وهنا نكون قد انهينا وحصلنا على اضافة ساحرة
يمكنك تغيير الالوان حسب رغبتك
هذا ليس كل شيء للموضوع بقية وفي المرات القادمة سنستخرج نماذج اخرى فقط بتعديل عنر الارتباط
المدونة مفتوحة لاستفساراتكم
مصادري:مواقع غربية تهتم بتطوير الويب لذا فالموضوع ليس منقولا انما هي تقنية نتعلمها ثم نستثمر ماتعلمنا ونضيف ماامكننا ان نضيفه
ان نقلت فاذكر المصدر وان لم تفعل فرب حامل فقه ليس بفقيه
تم بفضل الله
إشترك لتحصل على جديد المواضيع
