:: عضو جديد ::
بيانات موقعي
بسم االله الرحمن الرحيم
الناتج
-----------------------------------------
المعاينة المباشرة
من هنا
---------------------------------------------------
مميزات القائمة :-
خفيفة في التصفح
تظهر في جميع المتصفحات بنفس الشكل
سهولة التعديل عليها
جمالية الشكل والكثير من المميزات
--------------------------------------------------
طريقة التركيب :-
تحميل الملف من المرفقات او من هنا
رفع ملف images الي ملف المنتدي (vb )
رفع ملف js الي ملف المنتدي (vb )
اضافة الاكواد الاتية :
اضافة الكود التالي في نهاية قالب الهيدر
رمز PHP:
< ul id = "navigation" > < li class= "home" >< a href = "#" title = "Home" ></ a ></ li > < li class= "about" >< a href = "#" title = "About" ></ a ></ li > < li class= "search" >< a href = "#" title = "Search" ></ a ></ li > < li class= "photos" >< a href = "#" title = "Photos" ></ a ></ li > < li class= "rssfeed" >< a href = "#" title = "Rss Feed" ></ a ></ li > < li class= "podcasts" >< a href = "#" title = "Podcasts" ></ a ></ li > < li class= "contact" >< a href = "#" title = "Contact" ></ a ></ li > </ ul >
طبعا هنغير الهاش (#) علي حسب روابط منتداك
---------------------------------------------------------------
اضافة الكود التالي في Additional CSS Definitions
رمز PHP:
#container_buttons{ width : 400px ; margin : 0 auto ; background : rgba ( 255 , 255 , 255 , 0.3 ); padding : 60px 60px 30px ; border - radius : 20px ; box - shadow : 4px 4px 4px rgba ( 0 , 0 , 0 , 0.09 ) inset ; } #container_buttons p{ display : block ; padding - bottom : 60px ; } ul #navigation { position : fixed ; margin : 0px ; padding : 0px ; top : 10px ; left : 0px ; list- style : none ; z - index : 9999 ; } ul #navigation li { width : 100px ; } ul #navigation li a { display : block ; margin - left : - 2px ; width : 100px ; height : 70px ; background - color : #CFCFCF; background - repeat : no - repeat ; background - position : center center ; border : 2px solid #AFAFAF; - moz - border - radius : 0px 10px 10px 0px ; - webkit - border - bottom - right - radius : 10px ; - webkit - border - top - right - radius : 10px ; - khtml - border - bottom - right - radius : 10px ; - khtml - border - top - right - radius : 10px ; - moz - box - shadow : 0px 4px 3px #000; - webkit - box - shadow : 0px 4px 3px #000; opacity : 0.6 ; filter : progid : DXImageTransform . Microsoft . Alpha ( opacity = 60 ); } ul #navigation .home a{ background - image : url ( images / home . png ); } ul #navigation .about a { background - image : url ( images / id_card . png ); } ul #navigation .search a { background - image : url ( images / search . png ); } ul #navigation .podcasts a { background - image : url ( images / ipod . png ); } ul #navigation .rssfeed a { background - image : url ( images / rss . png ); } ul #navigation .photos a { background - image : url ( images / camera . png ); } ul #navigation .contact a { background - image : url ( images / mail . png ); }
---------------------------------------------------------------
اضافة الكود التالي في نهاية قالب headinclude
رمز PHP:
< script type = "text/javascript" src = "js /jquery-1.3.2.js " > </script> <script type="text/javascript"> $(function() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
} ); }); </script>
اتمني يكون الشرح مفصل وسهل عليكم
الصور المصغرة المرفقة
الملفات المرفقة
توقيع hostusite.com
اسم الشركة : مؤسسة استضف موقعك
صاحب الشركة : احمد طارق
خدمات الشركة : استضافة - ريسلير - سيرفير VBS - ارشفة - دعم فني - تصميم
مقر الشركة : مصر - الاسكندرية - العجمي - ابو يوسف
هاتف الشركة : 02/0119962742
بريد الشركة : hostusite
yahoo.com
رابط الشركة :
www.hostusite.com