قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery
قائمة منسدلة متعددة المستويات أفقية ورأسية, 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 سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...
{ اضف ردا لكى يظهر لك الكود }
موضوع: قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery 
2011-07-23, 6:26 am
