كيف أعمل sidebar جانبي ؟

يمكنك ذلك بفكرة بسيطة وهي بإضافة الكود التالي في ملف CSS 

#parent_sidebar_container { 
  width: 450px;
  margin: 0 auto;
} 

#sidebar { 
  float: right; 
  width: 200px; 
}

الحركة الأساسية كلها تكمن في إضافة الخاصية float:right
أيضا لا تنسى أن تغير في أسماء selectors على حسب ما تستخدم أنت.

يمكنك استخدام نماذج جاهزة للقائمة الجانبية من Bootstrap ولا حاجة لتصميم قائمة جانبية من الصفر، فيمكنك تنزيل قوالب جاهزة من الإنترنت. 

يمكنك الاطلاع على المثال الموجود في الرابط التالي، إضغط هنا.

انظر هذا المثال الذي يحرك جزء من الصفحة عند النقر الرابط

أمثلة أخرى لتحريك أجزاء مختلفة بطرق مختلفة باستخدام jQuery الرابط1 - الرابط2 - الرابط3

وأيضاً بالإضافة يمكنك تجربة هذا الموقع خاص  ب JQUERY مليئ بال plugins Sidebar  احترافية يمكنك الأختيار منها الذي تريده وتحميله وربطه بمشروعك من هنا  .

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

مرحبًا عبد الواحد،

يمكنك أن تجد بعض الأمثلة على ذلك من هنا.

أيضًا يمكنك الاستفادة من أكواد ال side navbar الذي قمنا ببناءه سابقًا في مشروع يوتيوبي في دورة تطوير واجهات المستخدم.

يوجد sidebar  من اليمين لليسار   مبنية بالبوتستراب لإستخدامها من هنا    

مرحباً @عبد الواحد الحدادي
يُمكنك مُشاهدة هذا الفيديو لإنشاء قائمة جانبية تتحرك من اليسار إلى اليمين:

و مع بعض التعديلات في التنسيقات كتغيير قيمة الخاصية float من left إلى right و أيضا التعديل في قيم تموضع بعض العناصر ستتمكن من تغيير تحرك القائمة من اليمين إلى اليسار إذا لم تتمكن من ذلك يُمكنك مُشاهدة هذه الpen:

بإمكانك مشاهدة المثال التالي: إضغط هنا فيه ستجد قائمة جانبية تم إنشاؤها بإستخدام bootstrap و مكتبة jQuery كما يُمكنك الإطلاع على الأكواد البرمجية الخاصة بها.
بالتوفيق.