كيفية إنشاء شريط قوائم للجوال باستخدام HTML و CSS وجافا سكريبت

لا شك في أنه يمكنك إنشاء قائمة هاتف محمول قابلة للتبديل باستخدام أطر عمل CSS مثل TailWind أو BootStrap.

لكن ما هو المفهوم الكامن وراء ذلك؟ وكيف يمكنك صنع واحد من الصفر دون الاعتماد على أطر CSS هذه؟

يمنحك القيام بما ورد أعلاه بنفسك تحكمًا كاملاً في التخصيص. لذلك ، بدون مزيد من اللغط ، إليك كيفية إنشاء قائمة هاتف محمول قابلة للتبديل باستخدام لغة البرمجة المفضلة لديك.

إذا لم تكن قد قمت بذلك بالفعل ، فافتح مجلد مشروعك وأنشئ ملفات مشروعك (HTML و CSS وجافا سكريبت).

أدناه ، سترى أمثلة للرمز الذي تحتاجه لجميع الأنواع الثلاثة. وإذا لم تكن قد قمت بذلك بالفعل ، ففكر في تنزيله هذه التطبيقات لتعلم الكود قبل القراءة.

سنبدأ مع لغة البرمجة:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

أضف JavaScript:

كيفية تبريد جهاز الكمبيوتر

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

إليك كيف يبدو إخراج العمل عند النقر فوق شريط القائمة:

القائمة قابلة للتبديل ، لذا يؤدي النقر فوق الشريط مرة أخرى - أو في أي مكان داخل الصفحة - إلى إخفاء التنقلات.

متعلق ب: نمط عناصر موقع الويب مع تدرج خلفية CSS

قد لا يدعم المستعرض الخاص بك إخفاء المحتوى عند النقر فوق أي مكان داخل صفحة الويب الخاصة بك. يمكنك محاولة فرض هذا باستخدام هدف حدث وحلقة JavaScript. يمكنك القيام بذلك عن طريق إضافة كتلة التعليمات البرمجية التالية إلى JavaScript الخاص بك:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

إذن ، هذا ملخص لما فعلته للتو: لقد أنشأت ثلاثة أسطر باستخدام شعبة علامة HTML. قمت بتعديل ارتفاعها وعرضها ووضعها في DOM الخاص بك. ثم أعطيت هذه حدث نقرة باستخدام JavaScript.

متعلق ب: كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئين

قمت بتعيين العرض الأولي للتنقلات الخاصة بك على لا أحد لإخفائها عند تحميل الصفحة. ثم انقر الحدث الموجود في الأسطر الثلاثة يبدل هذه التنقلات بناءً على فئة تم إنشاء مثيل لها في JavaScript ( عرض ). أخيرًا ، استخدمت هذه الفئة الجديدة لعرض التنقلات باستخدام CSS و JavaScript تبديل المحتويات طريقة.

ذات صلة: اتجاهات التصميم Neumorphic في HTML و CSS و JavaScript

ومع ذلك ، فإن باقي CSS يعتمد على تفضيلاتك. لكن يجب أن يمنحك المثال الموجود في مقتطف CSS هنا فكرة عن كيفية تصميم مقتطفاتك.

كن أكثر إبداعًا عند إنشاء موقع الويب الخاص بك

يتطلب إنشاء موقع ويب جذاب بصريًا بعض الإبداع. ومن المرجح أن يؤدي موقع الويب سهل الاستخدام إلى تحويل جمهورك أكثر من كونه موقعًا لطيفًا.

على الرغم من أننا أوضحنا لك كيفية إنشاء قائمة تنقل مخصصة هنا ، فلا يزال بإمكانك تجاوز ذلك وجعله أكثر إقناعًا. على سبيل المثال ، يمكنك تحريك عرض التنقلات ومنحها لون خلفية وغير ذلك. ومهما فعلت ، تأكد من أن موقع الويب الخاص بك يستخدم أفضل ممارسات التصميم والتخطيطات التي يسهل على المستخدمين استخدامها.

يشارك يشارك سقسقة بريد الالكتروني 15 من أوامر موجه أوامر Windows (CMD) يجب أن تعرفها

موجه الأوامر لا يزال أداة Windows قوية. فيما يلي أوامر CMD الأكثر فائدة التي يحتاج كل مستخدم Windows إلى معرفتها.

اقرأ التالي مواضيع ذات صلة

برمجة
لغة البرمجة
CSS
جافا سكريبت
نصائح الترميز

نبذة عن الكاتب إديسو أوميسولا(94 مقالة منشورة)

Idowu شغوف بأي شيء التكنولوجيا الذكية والإنتاجية. في أوقات فراغه ، يلعب بالبرمجة ويتحول إلى رقعة الشطرنج عندما يشعر بالملل ، لكنه أيضًا يحب الابتعاد عن الروتين من حين لآخر. يحفزه شغفه بإظهار الطريق للناس حول التكنولوجيا الحديثة على كتابة المزيد.

المزيد من Idowu Omisola

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك

كيفية إنشاء قائمة الهاتف المحمول الخاصة بك Togglable

كن أكثر إبداعًا عند إنشاء موقع الويب الخاص بك

اشترك في نشرتنا الإخبارية