القائمة المسندلة , هي تلك القائمة التي تحتوي عددا من المواضيع ( روابط ) يتم اخفائها تحت تبويب معين , و عند النقر على هذا التبويب تفتح القائمة ليظهر ما تحتويه هذه القائمة من موضوعات ( روابط ) , و النقر على الروابط هذه تنقلنا للصفحة الخاصة بكل موضوع
الفائدة من هذه القوائم , هو تقليل عدد الروابط على الصفحة الرئيسية ضمن الاعمدة , فمثلا نرغب كثيرا ان نجعل موضوعا ما ظاهرا و بشكل دائم امام الزوار لاهمية هذا الموضوع , و ان نجعل كل ما يتعلق بهذا الموضوع ظاهرا ايضا , فالطريقة الامثل لذلك هو استخدام القوائم المسندلة
طريقة تركيب القوائم المنسدلة في المدونة
لتركيب و استخدام القوائم المنسدلة اتبع ما يلي :
بعد الدخول الى حسابك انتقل الى صفحة التخطيط
نضيف اداة جديدة , نختار اداة ( html / javascript )
ننسخ الكود التالي و نلصقه في الاداة
<style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#333333; color:#FFFFFF; width:150px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #222222;/* */ } .submenu{ margin-bottom: 0.5em; } </style> <script type="text/javascript"> /*********************************************** * Switch Menu script- by Martial B of http://getElementById.com/ * Modified by Dynamic Drive for format & NS4/IE4 compatibility * Visit http://www.dynamicdrive.com/ for full source code * Visit http://allinonefor.blogspot.com/ for more widgets & gadgets ***********************************************/ var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc) var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> <!-- Keep all menus within masterdiv--> <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">Title1</div> <span class="submenu" id="sub1"> - <a href="url1">descrption1</a><br /> - <a href="url2">descrption2</a><br /> - <a href="url3">descrption3</a><br /> - <a href="url4">descrption4</a><br /> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">Title2</div> <span class="submenu" id="sub2"> - <a href="url1">descrption1</a><br /> - <a href="url2">descrption2</a><br /> - <a href="url3">descrption3</a><br /> - <a href="url4">descrption4</a><br /> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">Title3</div> <span class="submenu" id="sub3"> - <a href="url1">descrption1</a><br /> - <a href="url2">descrption2</a><br /> - <a href="url3">descrption3</a><br /> - <a href="url4">descrption4</a><br /> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">Title4</div> <span class="submenu" id="sub4"> - <a href="url1">descrption1</a><br/> - <a href="url2">descrption2</a><br/> - <a href="url3">descrption3</a><br/> - <a href="url4">descrption4</a><br/> </span> <div class="menutitle" onclick="SwitchMenu('sub5')">Title5</div> <span class="submenu" id="sub5"> - <a href="url1">descrption1</a><br/> - <a href="url2">descrption2</a><br/> - <a href="url3">descrption3</a><br/> - <a href="url4">descrption4</a><br/> </span> <div class="menutitle" onclick="SwitchMenu('sub6')">Title6</div> <span class="submenu" id="sub6"> - <a href="url1">descrption1</a><br/> - <a href="url2">descrption2</a><br/> - <a href="url3">descrption3</a><br/> - <a href="url4">descrption4</a><br/> </span> </div>
نقوم بالحفظ و بذا نكون انتهينا , و لكن علينا ان نقوم بما يلي:
لاحظ في نهاية الكود يوجد ستة عناوين و كل عنوان يحتوي على اربع روابط و وصف مقابل كل رابط
في خانة العنوان ( Title ) نضع الاسم الرئيسي للموضوع اي نستبدلها بالعنوان
مكان ( url) نضع رابط الموضوع المطلوب اي نستبدله
و نستبد ( descrption ) بوصف الرابط المطلوب
