موضوعــي اليوم عن طريقة عمـل
Css Rollover
بالنـافبــار
توضيح للفكرة :-
افتـح هذا الموقع
http://www.oreillynet.com/pub/a/orei...is-web-20.html
طبعــا أكثر مواقع WEB2.0 تستخدمهــا
بتلاقي
Menu بأعلى الصفحة , هذي مثال على
Css Rollover
بس الشرح على الNavbar
نبدأ بالخطوات :-
1 - قم بأخذ نسخة من قالب Navbar
2 - ضع في أعلى القالب
رمز PHP:
.navbarmenu {
background-image: url('images/navbar/navbar1.png');
background-repeat: repeat-x;
background-position: center top;
}
.navbarmenu:hover {
background-image: url('images/navbar/navbar2.png');
}
- افتح القالب بأي محرر نصوص
و ابحث عن أي كلمة vbmenu_control
و استبدلهـا ب navbarmenu
بتلاقي حوالي 15 وحدة
4 - قم بانشاء ملف navbar في مجلد images في المنتدى و اعمل صورتين
وحدة للحالة الطبيعة و ووحدة عند مرور الماوس
و خلي أسمائهم
navbar1.png
و
navbar2.png
مثال من تصميمي
5 - افتح المنتدى و استمتع بالقائمة الجديدة
6 - اذا مـا عرفت تعدل القالب من المرفقات
في النهــاية أتمنــى اني مـا قصرت في شي , على فكرة الدرس من
تأليفي
اذا شفت تفـاعل بهذا الموضوع بتشجعوني اني أسوي دروس أكثر :thumbdown
و أتمنى أي أحد يحط مثال مبــاشر
تحيـــــــــــــــــــــــــــــــــــاتــــــــــ ـــي
أرجو عدم ازالة الحقوق و ذكر المصدر ترايدنت عند النقل
الملفات المرفقة
Navbar Rollover Menu.zip (10.4 كيلوبايت)