السلام عليكم ورحمة الله ...
طريقة التركيب .....
1) حمل الملف التالي به مجموعه ملفات js و css وصور الايقونات وكذلك امثلة للقوائم.
2) برأس الصفحة وبين الوسم <head> قم بوضع الأكواد التاليه مع تغير المسار لملفات js و css بنفس المسار اللى وضعتهم به بمجلد الموقع
كود HTML:<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script>كود HTML:<link href="style.css" rel="stylesheet" type="text/css" />الكود الأول هو لجلب ملفات الجافاسكربت الخاصة بالقائمة ، والكود الثانى هو لربط ملف css بالصفحة ، والكود الثالث هاك حتى تظهر الصور بإمتداد png بخلفيتها الشفافة على متصفحات إنترنت اكسبلورار القديمة IE5.5 , IE 6كود HTML:<!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–>
3) اخيرا ضع هذا الكود باى مكان بالصفحه داخل الوسمbody
4) لإضافة او حذف اى من عناصر القائمة ابحث في سورس الصفحه عن كود بهذا الشكل للتعديل على القائمة ...كود HTML:<script type="text/javascript"> $(document).ready( function() { $(’#dock2′).Fisheye( { maxWidth: 60, items: ‘a’, itemsText: ’span’, container: ‘.dock-container2′, itemWidth: 40, proximity: 80, alignment : ‘left’, valign: ‘bottom’, halign : ‘center’ } ) } ); </script>
ستجده مكرر يمكنك الحذف او الإضافة عليهكود HTML:<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
القائمة تم تجربتها ومتوافقه مع متصفحات ( IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 )
مع التحيه ،، نقلاً عن CSS Dock Menu
رد مع اقتباس
