Css Rollover Navbar , من I-Zaad.Com

[اشراق العالمrss]

موضوعــي اليوم عن طريقة عمـل Css Rollover

بالنـافبــار

توضيح للفكرة :-

افتـح هذا الموقع

http://www.oreillynet.com/pub/a/orei...is-web-20.html (http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-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

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

http://www.sewarak.com/up_img/public/yauCayAoucuou9ARAIuZyRU1aMUFe6Y8ePeruLYCY7y4ahAmew .png

http://www.sewarak.com/up_img/public/aa9aGuOukyEuSaZu0yOuLa5uheuaAeQyHateUaKaraMu9aKyXe .png

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

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

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

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

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

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

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





الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif Navbar Rollover Menu.zip (http://www.traidnt.net/vb/attachment.php?attachmentid=347723&d=1235430564) (10.4 كيلوبايت)