قائمة منبثقة CSS Dock Menu

ca2oom · 25-05-2007, 11:23 AM

السلام عليكم ورحمة الله ...
[CENTER]

مشاهدة مثال [/CENTER]

طريقة التركيب .....

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" />

كود بلغة HTML:

 <!--[if lt IE 7]> <style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style> <![endif]–>

الكود الأول هو لجلب ملفات الجافاسكربت الخاصة بالقائمة ، والكود الثانى هو لربط ملف css بالصفحة ، والكود الثالث هاك حتى تظهر الصور بإمتداد png بخلفيتها الشفافة على متصفحات إنترنت اكسبلورار القديمة IE5.5 , IE 6

3) اخيرا ضع هذا الكود باى مكان بالصفحه داخل الوسمbody

كود بلغة 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>

4) لإضافة او حذف اى من عناصر القائمة ابحث في سورس الصفحه عن كود بهذا الشكل للتعديل على القائمة ...

كود بلغة 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

Akwad Net · 25-05-2007, 01:08 PM

لم يظهر لدي المثال سوف اقوم بالتطبيق ان شاء الله واعاود الرد ..
شكرا لك مقدما ً

Zizwar · 25-05-2007, 08:52 PM

أوه يا سلام شبيه جدا بقائمة الماكينتوش
أخ أكواد عاود الدخول أنا أيضا لم تظهر لي الصفحة امس لكن اليوم ظهرت الصفحة صدقني أنك ستظن انها بالفلاش وليست بالجافاسكريبت
بارك الله فيك أخ ca2oom كعادتك مبدع في طرح المواضيع

Akwad Net · 26-05-2007, 12:47 AM

لا لا لا بصراحة القائمة رائعه جدا جدا جدا انا بالفعل حسبتها فلاش في البداية

من جد رائعه تسسسسسسسسسسسسسلم على هذه القائمة

ca2oom · 26-05-2007, 02:43 PM

مرحبااا

بارك الله فيكم وشكراً على التواجد أحبتي
وانا أول ما وجدت بالصدفة كانت صفحة المثال فقط وتوقعت انها فلاش 100% الا اني عندما شاهد سورس الصفحة ووصلت للمصدر طلعت js و css

تحيتي ،،

الإمبراطور وحيد · 26-05-2007, 05:16 PM

جميلة جدا الف شكر لك
السلام عليكم

DESIGN-1983 · 08-06-2007, 12:07 AM

اكثر من رائعة شكرا لك

t-net · 08-06-2007, 07:05 AM

فعلا رائعه ومميزه
ماقصرت بارك الله فيك

awam10 · 10-06-2007, 04:58 PM

رااااااااائعة فعلا

لا حرمنا الله جهدك

الهذلي · 10-06-2007, 05:14 PM

مشكور كتوم على القائمة الجميلة

دمت بود

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
طريقة صنع قائمة سريعة متحركة (css).	ca2oom	ويب 2.0 و البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	8	17-04-2007 09:19 PM
قائمة menu	المشوار	تطوير الويب	3	01-04-2005 09:02 AM
مشكلة css	تلال الامارات	تطوير الويب	0	19-10-2004 12:05 PM
CSS بسهولة (1)	سردال	تطوير الويب	18	26-04-2003 08:59 AM
جاهز لأي كلمة سر لأي لعبة كمبيوتر و بلاي ستيشن	مهران	أخبار الإنترنت والتقنية ومناقشتها	24	08-08-2000 08:08 PM

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق