أريد أن يعمل دوران لزر القائمة العلوية

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

فيما يلي  كيفية تحقيق هذه الوظيفة

ملف index.css

.rotate {
    transform: rotate(90deg);
    /* دوران الزر بزاوية 90 درجة */
}

#toggler {
    transition: transform 0.3s ease-in-out;
    /* تحديد وقت الانتقال و التأثير المرئي */
}

ملف index.js

$("#toggler").click(function (event) {
  this.classList.toggle("rotate"); // إضافة هذا السطر فقط
});

عند النقر مرة أخرى على الزر، يتم إزالة الصفة "rotate" وبالتالي يتم إعادة الزر إلى حالته الأولى.

يمكنك تحقيق هذه الفكرة باستخدام خاصية التحويل (transform) في CSS. تستخدم هذه الخاصية لتطبيق تأثير الدوران على زر أو أيقونة بسهولة.

أولاً، قم بتطبيق التنسيق المناسب لزر القائمة، مثل تحديد الألوان والحجم. ثم قم بإضافة الخاصية التالية:

.icon {
	transform: rotate(0deg);
}

.icon.active {
	transform: rotate(90deg);
	transition: all 0.3s; /* المدة التي يستغرقها الزر للانتقال بين الحالتين */
}

بهذا الشكل، عند إضافة الصنف (class) "active" إلى الأيقونة، ستدور الأيقونة بزاوية 90 درجة بشكل سلس وبمدة تستغرق 0.3 ثانية.

لتحقيق ذلك، يمكنك استخدام JavaScript عند النقر على الأيقونة. يكون الكود كالتالي:

const icon = document.queryselector(".icon");

icon.addEventListner(("click") ,() => {
	icon.classList.toggle("active"); // عند وجود class "active" سيتم ازالته والا سيتم اضافته
})

بهذا الشكل، عند النقر على الأيقونة، سيتم إضافة أو إزالة الصنف (class) "active" من الأيقونة، مما يتسبب في تدويرها وفقًا للتأثير المحدد في CSS.

ستحتاج في هذا القيام باستعمال حركية css لضمان مثل هذا السلوك، 

قم أولا بوصف أيقونة القائمة باستخدام قواعد css: 

<span class="sidebar-button list">
  <span class="bar-1"></span>
  <span class="bar-2"></span>
  <span class="bar-3"></span>
</span>

.sidebar-button.list{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 15px;
}
.sidebar-button.list span{
  width: 100%;
  height: 2px;
  background-color: black;
}

نفس الشيء بالنسبة لأيقونة علامة x: 

<span class="sidebar-button list">
  <span class="bar-1"></span>
  <span class="bar-2"></span>
  <span class="bar-3"></span>
</span>

.sidebar-button.xmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.sidebar-button.xmark .bar-1, 
.sidebar-button.xmark .bar-2, 
.sidebar-button.xmark .bar-3 {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
}

.sidebar-button.xmark .bar-1 {
  transform: rotate(45deg);
}

.sidebar-button.xmark .bar-2 {
  transform: rotate(-45deg);
}

.sidebar-button.xmark .bar-3 {
  display: none;
}

الآن ما عليك إلا تبديل كلاس xmark و list بالنسبة لعنصر sidebar-button باستخدام جافاسكربت وستحل المشكلة:

function toggleClass(){
   let target = document.querySelector('.sidebar-button')
   
   if(target.classList.contains('list'))
   {
   target.classList.remove('list')
   target.classList.add('xmark')
   }
   else{
   target.classList.add('list')
   target.classList.remove('xmark')
   }
}

ثم لبعض الحركية أضف ميقات التحويل: 

.sidebar-button span{
  transition-duration: .5s;
}

مرفق مثال حي.