Css Rollover Navbar , من I-Zaad.Com

موضوعــي اليوم عن طريقة عمـل 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');
}

3 - افتح القالب بأي محرر نصوص

و ابحث عن أي كلمة vbmenu_control

و استبدلهـا ب navbarmenu

بتلاقي حوالي 15 وحدة

4 - قم بانشاء ملف navbar في مجلد images في المنتدى و اعمل صورتين

وحدة للحالة الطبيعة و ووحدة عند مرور الماوس

و خلي أسمائهم

navbar1.png

و

navbar2.png

مثال من تصميمي





5 - افتح المنتدى و استمتع بالقائمة الجديدة

6 - اذا مـا عرفت تعدل القالب من المرفقات

في النهــاية أتمنــى اني مـا قصرت في شي , على فكرة الدرس من تأليفي

اذا شفت تفـاعل بهذا الموضوع بتشجعوني اني أسوي دروس أكثر :thumbdown

و أتمنى أي أحد يحط مثال مبــاشر

تحيـــــــــــــــــــــــــــــــــــاتــــــــــ ـــي

أرجو عدم ازالة الحقوق و ذكر المصدر ترايدنت عند النقل

الملفات المرفقة Navbar Rollover Menu.zip (10.4 كيلوبايت)