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

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

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

مثال للمعاينة

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

بنية القائمة html

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

كل بند <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 سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...

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

شكرا أخي جزاك الله خيرا

مشكوور

شكرا

يسلموووووووووووووووو

شكرا اخي

شكرا

merci

merciiiiiiiiiii

انت فنان

أثابك الله الجنة استاذ

شكرا

شكرا

مشكووووررر

مشكوووووووووووووووووووووووووووووووووووور على الطرح الرائع