Milligram: شريط التنقل كجزء من مليغرام؟

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

https://github.com/milligram/milligram/pull/46

مرحباalexjjabouthiroppy

في الواقع ، أعتزم إبقاء Milligram خفيفًا قدر الإمكان ، ودعم الحد الأدنى من الميزات اللازمة لبدء المشروع.

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

http://codepen.io/milligram/

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

بالمثل هنا ، يعد شريط التنقل والقوائم الحد الأدنى من الميزات الضرورية للمشروع ، أليس كذلك؟

مرحبًا ، أنا أبحث عن إطار عمل يمكن أن يحل محل bootstrap بالنسبة لي والمليغرام منافس جاد.

يمكنني حقًا القيام ببعض الأمثلة الأخرى لأنني لست على دراية بإطار العمل حتى الآن ، لكن رابط الشفرة الذي طرحته لا يعمل. هل لديك رابط آخر؟

شكرا!

انت تعطيني افكار عظيمة 😍

أي نتيجة على نافبار الأفكار؟

يعد المليغرام جيدًا جدًا ولكني أرغب بالتأكيد في رؤية المزيد من خيارات التنقل ، خاصة للاستخدام مع تصميمات Sage 9 (Wordpress) ، والتي عادة ما تحتاج إلى أداة التنقل ما لم يتمكن شخص ما من تصحيح ذلك ؟، شكرًا

يبدو أن رابط cjpatoilo قد مات. الرابط الجديد هو https://codepen.io/milligramcss/

(بالإضافة إلى ذلك ، سأكون بالتأكيد لإضافة شريط التنقل إلى Milligram. أنا لا أتفق مع الآخرين الذين يقولون إنه أمر ضيق بالنسبة للأشخاص ، حيث تحتوي 90 ٪ من مواقع الويب على شريط التنقل.)

سيكون شريط التنقل رائعًا

أود أن أضيف أن حقيقة أن موقع github.io يحتوي على شريط التنقل قادني إلى الاعتقاد بأن الحزمة نفسها بها شريط التنقل. انها مخادعة جدا.

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

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

^ ^ كل ما قيل ... هل قام أي شخص بتطبيق شريط التنقل البسيط إلى حد ما مع الشعار وعناصر القائمة التي تنقسم بشكل متجاوب إلى قائمة من نوع الهامبرغر على الهاتف المحمول كمثال؟
تحرير: إضافة هنا أن JS غير مفضل ... خاصة jquery. لا. يفضل CSS بشدة فقط. سيكون الغش المسموح به عبارة عن كمية صغيرة من Vanilla JS ولكن لا يحتوي على أي JS على الإطلاق.

^ ^ كل ما قيل ... هل قام أي شخص بتطبيق شريط التنقل البسيط إلى حد ما مع الشعار وعناصر القائمة التي تنقسم بشكل متجاوب إلى قائمة من نوع الهامبرغر على الهاتف المحمول كمثال؟

أحاول الآن القيام بذلك باستخدام المثال المضمن في الملليغرام ، باستخدام https://github.com/shuedna/Milligram-baseSite-withMenu كمرجع. أنا أيضًا لست خبيرًا جدًا في هذا الأمر ، لذا فقد لا تنجح.

لكنني أتفق مع أعلاه ؛ التنقل سريع الاستجابة أساسي جدًا.

تم تحديث الطلب السابق ... CSS فقط ، لا JS ، خاصةً لا يوجد jQuery.

CSS فقط ملليغرام نافبار

مصدر
مثال
ترخيص معهد ماساتشوستس للتكنولوجيا

يعتمد على المكتبة الأساسية.

احلى كلام. الشيء الوحيد هو أنه لا ينقسم إلى قائمة نمط همبرغر.
فاتني شرط عدم وجود JS / jquery أو Vanilla JS. في كلتا الحالتين لم أحقق الكثير من النجاح من نهايتي .. حتى الآن.

لقد أوقفت بحثي عن ملاحة css فقط والتي تنهار إلى قائمة همبرغر في الوقت الحالي بسبب الوقت ؛ لقد قمت ببساطة باستبدال النص بأيقونات رائعة الخط والتي تكون أكثر إحكاما وعرض بشكل جيد عند تصغيرها. أيضًا ، بالنسبة للعنصر "navigation-item" ، قمت بتقليل الهامش الأيسر إلى 1.5rem.

بمجرد أن أكمل هذا المشروع ، سأحاول مرة أخرى ... إذا لم يكمله شخص آخر بالفعل.

أيضًا ، إخفاء شريط التنقل عند التمرير لأعلى:
بالنسبة إلى فئة التنقل ، أضف: الانتقال: أعلى 0.3 ثانية ؛
إضافة معرف = "navbar"
JS في الأسفل:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

لا يلزم Jquery أو الأقسام الأخرى

أعتقد أنك تريد عادةً إخفاء شريط التنقل عند التمرير لأسفل ، وليس التمرير لأعلى؟

الرمز للتمرير لأسفل. آسف ، لقد أخطأت

متابعة التنقل المتجاوب فقط لـ css ... هذا بسيط ويعمل بشكل رائع:
https://codepen.io/chuckreynolds/pen/ROaeXv

متابعة التنقل المتجاوب فقط لـ css ... هذا بسيط ويعمل بشكل رائع:
codepen.io/chuckreynolds/pen/ROaeXv

شكرا على الرابط. لكن كيف أجمع ذلك معًا؟ يتم تمرير محتوى الحاوية الخاصة بي "خلف" العنوان. يجب أن يكون هناك نوع من الحشو.

مجرد تعليق.

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

لا أعتقد أن too much جيد. :)

يا رفاق ، شكرًا لكم على مساعدة @. في الوقت الحالي ، سأغلق هذه المشكلة.
إذا كان شخص ما يحتاج إلى مساعدة لا تتردد في إعادة فتح أو فتح جديد!