محمود عفيفى
30-04-2011, 05:29 PM
http://img862.imageshack.us/img862/98/20110430041640.png
في درس سابق قدم الأخ أبوهمام طريقة عمل قائمة منسدلة (http://www.abc4web.net/vb/showthread.php?t=17237)، أعيد تقدميها من جديد جاهزة للإستخدام وبها الكثير من التعديلات والتحسنيات عن القائمة السابقة، حيث أصبحت بعدة مستويات بدلاً من مستوى واحد فقط وأضفت لها قائمة أخرى جانبية متفرعة مع تأثيرات حركية بواسطة jQuery، وفيما يلي شرح سريع لما تحتويه...
* 100% CSS، دون إي إضافات، فقط القليل من جافاسكريبت من أجل تأثيرات jQuery.
* متعددة المستويات، تصل الى 3 مستويات -كل مستوى يمكن أن يكون بلون مختلف-
* توزيع القائمة بشكل طبيعي عن طريق الوسم الأوسمة <ul>, <li>.
* سريعة وخفيفة الوزن، تظهر مباشرة بمجرد تحميل الصفحات.
* توافق كامل ودعم جميع المتصفحات بما في ذلك IE6!! بخطوة إضافية.
بنية القائمة html
<ul>
<li><a href="#">Root Link</a></li>
<li><a class="popup_down" href="#">Root Link</a>
<!-- المستوى الأول -->
<ul>
<li><a href="#">Sub Link</a></li>
<li><a class="popup" href="#">Sub Link</a>
<!-- المستوى الثاني -->
<ul>
<li><a href="#">Sub Link</a></li>
<li><a class="popup" href="#">Sub Link</a>
<!-- المستوى الثالث -->
<ul>
<li><a href="#">Sub Link</a></li>
<li>...</li>
</ul>
<!-- / المستوى الثالث -->
</li>
</ul>
<!-- / المستوى الثاني -->
</li>
</ul>
<!-- / المستوى الأول -->
</li>
</ul>
كل بند <li> يتفرع منه قائمة فرعية أخرى <ul>، وهناك فئة مخصصة بإسم popup_down توضع مع وصلات بنود القائمة الرئيسية بغرض عرض صورة للسهم جهة الأسفل، وفئات أخري بإسم popup لنفس الغرض لوصلات البنود الداخلية، سوف تساعدك في حالة رغبتك بتغيير التصميم.
إضافة مكتبة jQuery
من موقع jQuery (http://jquery.com/) نحصل على آخر إصدار من المكتبة لربطها برأس الصفحة، وإن كنت من مستخدمي blogger يمكنك إيجاد رابط مباشر لعرض المكتبة دون تحميلها بالدخول على Google AJAX Libraries (http://code.google.com/apis/ajaxlibs/) وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس الصفحة داخل الوسم <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
ولو إننا مش هانكون أحسن من جوجل (أوقفت دعم مواقعها وخدماتها لمتصفح الاكسبلورور النسخة 6) لكن للأسف أضيف هذا الجزء حتى لا تأتيني ردود تطلب دعمه كما يحدث دائماً، متصفح IE6 لا يدعم pseudo-classes مثل: hover: وذلك على كل الأوسمة بإستثناء الوسم <a> فالحلول مع Jquery أسهل وذلك بإضافة فئه calss خاصة لهذه الغرض بإسم iehover لكي تستخدم وتظهر القائمة عند التأشير عليها، وبمعاينك لخصائص css سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...
$(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"});
}
);
// Fix IE
$("#nav-h li,#nav-v li").hover(
function () {
$(this).addClass("iehover");
},
function () {
$(this).removeClass("iehover");
}
);
});
في درس سابق قدم الأخ أبوهمام طريقة عمل قائمة منسدلة (http://www.abc4web.net/vb/showthread.php?t=17237)، أعيد تقدميها من جديد جاهزة للإستخدام وبها الكثير من التعديلات والتحسنيات عن القائمة السابقة، حيث أصبحت بعدة مستويات بدلاً من مستوى واحد فقط وأضفت لها قائمة أخرى جانبية متفرعة مع تأثيرات حركية بواسطة jQuery، وفيما يلي شرح سريع لما تحتويه...
* 100% CSS، دون إي إضافات، فقط القليل من جافاسكريبت من أجل تأثيرات jQuery.
* متعددة المستويات، تصل الى 3 مستويات -كل مستوى يمكن أن يكون بلون مختلف-
* توزيع القائمة بشكل طبيعي عن طريق الوسم الأوسمة <ul>, <li>.
* سريعة وخفيفة الوزن، تظهر مباشرة بمجرد تحميل الصفحات.
* توافق كامل ودعم جميع المتصفحات بما في ذلك IE6!! بخطوة إضافية.
بنية القائمة html
<ul>
<li><a href="#">Root Link</a></li>
<li><a class="popup_down" href="#">Root Link</a>
<!-- المستوى الأول -->
<ul>
<li><a href="#">Sub Link</a></li>
<li><a class="popup" href="#">Sub Link</a>
<!-- المستوى الثاني -->
<ul>
<li><a href="#">Sub Link</a></li>
<li><a class="popup" href="#">Sub Link</a>
<!-- المستوى الثالث -->
<ul>
<li><a href="#">Sub Link</a></li>
<li>...</li>
</ul>
<!-- / المستوى الثالث -->
</li>
</ul>
<!-- / المستوى الثاني -->
</li>
</ul>
<!-- / المستوى الأول -->
</li>
</ul>
كل بند <li> يتفرع منه قائمة فرعية أخرى <ul>، وهناك فئة مخصصة بإسم popup_down توضع مع وصلات بنود القائمة الرئيسية بغرض عرض صورة للسهم جهة الأسفل، وفئات أخري بإسم popup لنفس الغرض لوصلات البنود الداخلية، سوف تساعدك في حالة رغبتك بتغيير التصميم.
إضافة مكتبة jQuery
من موقع jQuery (http://jquery.com/) نحصل على آخر إصدار من المكتبة لربطها برأس الصفحة، وإن كنت من مستخدمي blogger يمكنك إيجاد رابط مباشر لعرض المكتبة دون تحميلها بالدخول على Google AJAX Libraries (http://code.google.com/apis/ajaxlibs/) وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس الصفحة داخل الوسم <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
ولو إننا مش هانكون أحسن من جوجل (أوقفت دعم مواقعها وخدماتها لمتصفح الاكسبلورور النسخة 6) لكن للأسف أضيف هذا الجزء حتى لا تأتيني ردود تطلب دعمه كما يحدث دائماً، متصفح IE6 لا يدعم pseudo-classes مثل: hover: وذلك على كل الأوسمة بإستثناء الوسم <a> فالحلول مع Jquery أسهل وذلك بإضافة فئه calss خاصة لهذه الغرض بإسم iehover لكي تستخدم وتظهر القائمة عند التأشير عليها، وبمعاينك لخصائص css سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...
$(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"});
}
);
// Fix IE
$("#nav-h li,#nav-v li").hover(
function () {
$(this).addClass("iehover");
},
function () {
$(this).removeClass("iehover");
}
);
});