الرئيسيةأحدث الصورالتسجيلدخول
   ديزاين ستارز على الفيس بوكديزاين ستارز على تويترقناة ديزاين ستارز على اليوتيوبخلاصات ديزاين ستارز
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

    ديزاين ستارز | Design Stars :: دعم وتطوير المواقع - استايلات منتديات - اكواد هامه - قوالب كامله - ارشفه واشهار :: اكواد تومبلايت - اكواد html - اكواد css - أكواد JavaScript و jQuery :: أكواد JavaScript لاحلى منتدى - اكواد jQuery لمنتديات احلى منتدى
شاطر | 
 

  قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل 

مواضيع مماثلة

+
كاتب الموضوعمحتوى الموضوع

Mr.BaDr

Mr.BaDr

مجلس الإدارة



الـجنس : ذكر

نقاط التقييم : 178

عدد المشاركات : 3605

نقاط الشراء : 150 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 25/09/2010

نقاط المشاركه : 11663



http://www.des-stars.yoo7.com http://twitter.com/#!/des_stars

مُساهمةموضوع: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2011-07-23, 6:26 am

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

 قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Multi-level-menus

قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

في درس سابق قدمت طريقة عمل قائمة منسدلة،
أعيد تقدميها من جديد جاهزة للإستخدام وبها الكثير من التعديلات
والتحسنيات عن القائمة السابقة، حيث أصبحت بعدة مستويات بدلاً من مستوى
واحد فقط وأضفت لها قائمة أخرى جانبية متفرعة مع تأثيرات حركية بواسطة
jQuery، وفيما يلي شرح سريع لما تحتويه...

100% CSS، دون إي إضافات، فقط القليل من جافاسكريبت من أجل تأثيرات jQuery.
متعددة المستويات، تصل الى 3 مستويات -كل مستوى يمكن أن يكون بلون مختلف-
توزيع القائمة بشكل طبيعي عن طريق الوسم الأوسمة <ul>, <li>.
سريعة وخفيفة الوزن، تظهر مباشرة بمجرد تحميل الصفحات.
توافق كامل ودعم جميع المتصفحات بما في ذلك IE6!! بخطوة إضافية.

بنية القائمة html
{ اضف ردا لكى يظهر لك الكود }

كل بند <li> يتفرع منه قائمة فرعية أخرى <ul>، وهناك فئة مخصصة بإسم popup_down توضع مع وصلات بنود القائمة الرئيسية بغرض عرض صورة للسهم جهة الأسفل، وفئات أخري بإسم popup لنفس الغرض لوصلات البنود الداخلية، سوف تساعدك في حالة رغبتك بتغيير التصميم.


إضافة مكتبة jQuery


من موقع نحصل على آخر إصدار من
المكتبة لربطها برأس الصفحة، وإن كنت من مستخدمي blogger يمكنك إيجاد رابط
مباشر لعرض المكتبة دون تحميلها بالدخول على وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس الصفحة داخل الوسم <head> هكذا:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



إضافة تأثيرات jQuery


داخل وسم <script> جديد في رأس الصفحة وضعنا فيه الشفرة التالية، أو أربط الشفرة في ملف خارجي واستدعيها داخل الصفحة.$(document).ready(function () {
// Effect
$("#nav-h li,#nav-v li").hover(
function () {
// التأثيرات التى تظهر عند التأشير لفتح القائمة
$(this).find('ul:first').css({visibility: "visible",display: "none"}).toggle('fast');
},
function () {
// التأثيرات عند الإفلات
$(this).find('ul:first').css({visibility: "hidden"});
}
);

});

بخبرتك في Jquery يمكنك التحكم في شكل حركة فتح القائمة، لكن في نفس
الوقت وضعك للشفرة من عدمة غير مسئول عن ظهور القائمة، فهي تظهر مباشرة من
خلال خصائص css والشفرة هي مجرد تأثير إضافي.

تصحيح العرض داخل IE 6

ولو إن
لكن للأسف أضيف هذا الجزء حتى لا تأتيني ردود تطلب دعمه كما يحدث دائماً،
متصفح IE6 لا يدعم pseudo-classes مثل: hover: وذلك على كل الأوسمة
بإستثناء الوسم <a> فالحلول مع Jquery أسهل وذلك بإضافة فئه calss خاصة لهذه الغرض بإسم iehover لكي تستخدم وتظهر القائمة عند التأشير عليها، وبمعاينك لخصائص css سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...

{ اضف ردا لكى يظهر لك الكود }

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

βίĸỘ Ěŀ.Ṱăīβ

βίĸỘ Ěŀ.Ṱăīβ

فريق التصميم



الـجنس : ذكر

نقاط التقييم : 36

عدد المشاركات : 1677

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 22/10/2010

نقاط المشاركه : 7493



http://sh3sl.yoo7.com http://twitter.com/#!/bikoeltaib

مُساهمةموضوع: رد: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2011-07-24, 4:02 pm

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
تمام على موضوعك يا باشا

 قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery 569435

 
الموضوع الاصلى : قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery      المصدر : منتديات ديزاين ستارز     الكاتب : βίĸỘ Ěŀ.Ṱăīβ
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

Sadness-Design

Sadness-Design

عضو جديد



الـجنس : ذكر

نقاط التقييم : 0

عدد المشاركات : 21

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 10/01/2012

نقاط المشاركه : 4711



http://twitter.com/#!/des_stars

مُساهمةموضوع: رد: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2012-02-20, 3:48 am

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
تمام  قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery 569435

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

saloom

saloom

عضو جديد



الـجنس : ذكر

نقاط التقييم : 0

عدد المشاركات : 7

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 27/03/2012

نقاط المشاركه : 4619



http://twitter.com/#!/des_stars

مُساهمةموضوع: رد: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2012-03-27, 2:02 am

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
good

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

DR AHMED

DR AHMED

عضو جديد



الـجنس : ذكر

نقاط التقييم : 0

عدد المشاركات : 3

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 16/09/2012

نقاط المشاركه : 4441



http://twitter.com/#!/des_stars

مُساهمةموضوع: رد: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2012-09-16, 8:08 pm

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
lمشكور

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

مسلم

مسلم

عضو جديد



الـجنس : ذكر

نقاط التقييم : 0

عدد المشاركات : 1

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 10/09/2013

نقاط المشاركه : 4080



http://twitter.com/#!/des_stars

مُساهمةموضوع: رد: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery    قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Icon_minitime2013-09-10, 8:01 am

  
قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
مشكور

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Empty

تذكر قول الله تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )


 قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Empty
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
ديزاين ستارز | Design Stars :: دعم وتطوير المواقع - استايلات منتديات - اكواد هامه - قوالب كامله - ارشفه واشهار :: اكواد تومبلايت - اكواد html - اكواد css - أكواد JavaScript و jQuery :: أكواد JavaScript لاحلى منتدى - اكواد jQuery لمنتديات احلى منتدى-
 قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery Empty

الاتصال بنا -الاعلان لدينا - بيان الخصوصية - أعلى
شات -منتديات الريان سوفت التكنولوجية - منتديات حبيبى - حروف -  تبادل نصى