إنشاء قائمة التنقل المستجيبة الأكثر ذكاء باستخدام هذا البرنامج المساعد jQuery
كل موقع حديث يحتاج تخطيط استجابة و الملاحة صالحة للاستعمال. هذا معطى.
ولكن ، لا يمكن لقوائم الهامبرغر أن تذهب إلا وهي بعيدة تغيير جذري قابليتها للاستخدام لأحجام الشاشة المختلفة. أفضل طريقة للتعامل مع هذا هو يختبئ تدريجيا الروابط مع البرنامج المساعد مثل OkayNav.
هذا البرنامج المساعد jQuery مجانا يضيف ميزة قائمة بسيطة جدا إلى أي صفحة وانهايخفي متواضع عناصر التنقل, بناء على viewports مختلفة. وبهذه الطريقة ، يكون لدى مستخدمي الهواتف الذكية قائمة هامبرغر واحدة ، لكن يمكن لمستخدمي الجهاز اللوحي رؤية بعض الروابط أيضًا.
افتراضيا ، فإنه يعتمد على جزء و قائمة طويلة غير مرتبة. حتى الآن ، لا أعتقد أن هذا البرنامج المساعد يدعم قوائم منسدلة متعددة المستويات ، لكن إذا كنت تعرف شيئًا ما عن jQuery ، فيمكنك إضافة ذلك بنفسك.
OkayNav بسيط للغاية وهو يعني لمواقع أبسط التي لديها سوى عدد قليل من الروابط الملاحة. هذه الروابط إخفاء ببطء وراء قائمة خارج الشاشة بمجرد أن تصل إلى منفذ معين و المزيد من الروابط تبقى مختبئة أصغر المستعرض يحصل.
سوف تحتاج إلى التفاف قائمتك غير مرتبة في عنصر التنقل ومنحه معرفًا محددًا. إذا تستطيع استهداف التنقل كله مع ال okayNav () تعمل مثل هذا:
var navigation = $ ('# nav-main'). okayNav ()؛ لاحظ هذا هو مجرد أبسط الإعداد دون أي ميزات مخصصة. يمكنك العمل مع أكثر من عشرة خيارات مخصصة مضمن في هذه المكتبة للتحكم في نمط الأيقونة ، الرسوم المتحركة للقائمة ، دعم السحب ، ووظائف رد الاتصال.
ويمكنك حتى استدعاء القائمة فتح / إغلاق في الإرادة بتمرير قيم محددة إلى الوظيفة. هنا مثال بسيط ل افتح الملاحة:
navigation.okayNav ( 'openInvisibleNav')؛
جميع هذه الرموز موثقة جيدا في جيثب ريبو والذي يتضمن أيضًا تنزيل البرنامج النصي. إذا كنت تفضل مسار CDN ، فيمكنك أيضًا استخدام رابط RawGit لإضافة هذا البرنامج النصي مباشرة من جيثب.
OkayNav هو عظيم للمواقع الصغيرة التي تستفيد من تقنية الملاحة التدريجي. ولكن ، إذا كنت لا تزال غير متأكد من كيفية عمل ذلك ، تحقق من هذا العرض التوضيحي على CodePen والذي يوضح ما يمكن أن يفعله هذا البرنامج المساعد الصغير.
