السلام عليكم ورحمة الله وبركاته اليوم سنشرح كيفية عمل او انشاء قائمة منسدلة بالضغط onclick dropdown menu وذلك بأستخدام الامر السهل onclick بواسطة لغة javascript نبدء علي بركة , بسم الله الرحمن الرحيم :
var lesson
var lesson =clickableDropDownMenu
اولاً سننشئ ملف html الذي سنعمل عليه وانا كالعادة استعمل javascript tag الموجود في لغة html
اولاً ننشئ الزر الذي يفتح الdrop down content
<div id="dropdown" d>
<button onclick="openDrop" d>DropDown Menu</button>
<div class="dropdown-content" d>
<a href="#" d>
content
</a>
<a href="#" d>
content
</a>
<a href="#" d>
content
</a>
</div>
</div>
كما ترون لقد صنعنا وسم div وانشئنا له id بأسم dropdown وذلك لسبب مهم للتحكم في مسار الدروب دون لان لم تفعل عليك ان تجعل مثلاً
//css
dropdownBtn{float :right};
dropdown-conten{float:right;}
اما بجمع الأثنين معا داخل وسم
dropdown#
{float:right;}
وذلك يسهل علينا الكثير...
ثم وضعنا بداخله <button> ووضعنا داخل الزر دالة onclick تلك الدالة تستعمل في مثال غبي ,سهل: onclick :make this do that;
طبعا هذه ليست اكواد جافا سكربت بل انني جعلتك تفهم اسرع ماتفعله الدالة.
ومن ثم انشئنا div وانشئنا لها id اسمه dropdown-content اي محتويات القائمة المنسدلة.
نفتح css
<style type="text/css" d>
dropdown.
{float:left; d}
dropdown-content.
{
position :absoluate; d
display:none;d}
//*لقد جعلنا محتويات القائمة مخفية باستخدام ذلك الكود وجعلناها مطلقة absolute لجعلها لاتؤثر علي محتويات الصفحة الاخر كانها شبح .*//
</style>
ومن ثم نفتح ملف جافا سكربت
<script>
// نفتح الحدث
function openDrop() //d
{
document.getElmentById("dropdown-content").classList.toggle("showdrop")
}
//لقد جلبنا الدوك dropdown-content بواسطة الاي دي الخاص بها و انشأنا لها لها كلاس اسمه showdrop
</script>
نفتح css
<style>
showdrop.
{display:block}
//* كما ترون فتحنا الكلاس الذي صنعناه للدروب كونتيت وجعلنا الدروب دون كونتيت ظاهر عند الضغط عليه *//
</style>
اتمني ان تكونو فهمتم , لا تبخلو علي بالتفاعل ,شكراً