ككل مصممي ومستعملي ووردبريس ، كلنا تواجهنا مشكلة الإختيار بين CSS أو JavaScript عندما نحاول أن نصمم قوائم منسدلة هذا بدون غض النظر عن مشاكل المتصفحات ،أيضا بدون ذكر إخواننا الذين لا يعرفون كيف يقومون بعمل قوائم منسدلة كما هو الحال في أقلام .
في هذا الموضوع إن شاء الله سنحاول تسليط الضوء حول كيفية إنشاء قوائم منسدلة متعددة المستويات Multi-Level DropDown Menu لثيم مدونتك (ووردبريس) باللإعتماد على تقنية JQuery ،طلعا البعض سيتسائل لماذا JQuery ؟ الجواب هو أن سكريبت الووردبريس يحتوي على مكتبة JQuery مسبقا و لسنا مجبرين على إضافة أو تحميل هذه المكتبات من جديد .
الخطوات المتبعة :
سأشرح الطريقة بشكل عام وأتمنى ممن سيجربونها تكون عندهم دراية ولو بسيطة بلغة HTML حاى يتفادوا الوقوع في أية مشاكل التي نخلي مسؤوليتنا منها
أولا : نفتح ملف header.php ونضيف الكود التالي بين توسيمتي HEAD :

[html] <?php wp_enqueue_script(‘jquery’); ?>

<script type=’text/javascript’>
jQuery(document).ready(function() {
jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find(‘ul:first’).css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find(‘ul:first’).css({visibility: "hidden"});
});
});
</script>
[/html]

بعد ذلك نضيف الكود التالي لملف ال CSS غالبا يكون إسمه style.css

[html] <style type="text/css">
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
</style>
[/html]

وبعد ذلك نضع الكود التالي بالمكان الذي نود أن يطهر به ال Menu :

[html] <ul id="dropmenu">
<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>
</ul>
[/html]

في النهاية ، النتائج المرجوة ستكون قريبة من هذه الصورة :