ككل مصممي ومستعملي ووردبريس ، كلنا تواجهنا مشكلة الإختيار بين CSS أو JavaScript عندما نحاول أن نصمم قوائم منسدلة هذا بدون غض النظر عن مشاكل المتصفحات ،أيضا بدون ذكر إخواننا الذين لا يعرفون كيف يقومون بعمل قوائم منسدلة كما هو الحال في أقلام .
في هذا الموضوع إن شاء الله سنحاول تسليط الضوء حول كيفية إنشاء قوائم منسدلة متعددة المستويات Multi-Level DropDown Menu لثيم مدونتك (ووردبريس) باللإعتماد على تقنية JQuery ،طلعا البعض سيتسائل لماذا JQuery ؟ الجواب هو أن سكريبت script الووردبريس يحتوي على مكتبة JQuery مسبقا و لسنا مجبرين على إضافة أو تحميل هذه المكتبات من جديد .
الخطوات المتبعة :
سأشرح طريقة الطريقة بشكل عام وأتمنى ممن سيجربونها تكون عندهم دراية ولو بسيطة بلغة HTML حاى يتفادوا الوقوع في أية مشاكل التي نخلي مسؤوليتنا منها
أولا : نفتح ملف header.php ونضيف الكود code التالي بين توسيمتي HEAD :
رمز Code:
<?php wp_enqueue_script('jquery'); ?> <script type='text/javascript'> jQuery(document).ready(function() { jQuery(&quot;#dropmenu ul&quot.css({display: &quot;none&quot;}); // Opera Fix jQuery(&quot;#dropmenu li&quot.hover(function(){ jQuery(this).find('ul:first').css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(268); },function(){ jQuery(this).find('ul:first').css({visibility: &quot;hidden&quot;}); }); }); </script>
بعد ذلك نضيف الكود code التالي لملف ال CSS غالبا يكون إسمه style.css

رمز Code:
<style type=&quot;text/css&quot;> #dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-positionutside; 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>
وبعد ذلك نضع الكود code التالي بالمكان الذي نود أن يطهر به ال Menu :
رمز Code:
<ul id=&quot;dropmenu&quot;> <?php wp_list_pages('sort_column=menu_order&title_li='); ?> </ul>
في النهاية ، النتائج المرجوة ستكون قريبة من هذه الصورة :







©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©