Milligram: كيف أقوم بدفع العناصر الأخرى إلى اليمين باستخدام الشريط الجانبي الخاص بي؟

تم إنشاؤها على ٢٧ أكتوبر ٢٠١٧ · 5تعليقات · مصدر: milligram/milligram

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

عرض Codepen

كما ترى ، فإن الشريط الجانبي الخاص بي هو العنصر التالي

<div class="sidebar"></div>

بالأنماط التالية:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

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

كيف يمكنني جعله يدفع الشريط الجانبي كل شيء آخر (بما في ذلك شريط التنقل) إلى اليمين بمقدار 250 بكسل (عرضه)؟ أعلم أن هذا سيجعل الأشياء غير قابلة للاستخدام على الشاشات الأصغر ، لكنني سأمنح المستخدم طريقة لتبديلها.

Hacktoberfest help wanted

مصدر

fooksupachai

👍1

ال 5 كومينتر

لقد وجدت هذه المشكلة أيضًا. نأمل أن يساعد شخص ما في هذه المشكلة.

abc985 في ١٤ ديسمبر ٢٠١٧

ليس بالضبط مشكلة في الإطار. ما تبحث عنه بشكل أساسي هو شريط جانبي خارج القماش. لقد قمت بتعديل Codepen الخاص بك لجعله يعمل: https://codepen.io/chillyorange/pen/EQYJvQ

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