قائمة روابط و أقسام للسايدبار مدعومة بالأيقونات

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

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

 

 يمكنك إضافة الكود في آداة HTML/JavaScript والسايدبار هو المكان الأمثل لتلك الإضافات

ملحوظة الكود يعتمد على مكتبة fontawesome

<style>
#side-list{display:flex;flex-direction:column;gap:10px;}
#side-list a{display:flex;gap:5px;height:46px;font-size:16px;align-items:center;text-decoration:none;background-color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);border-radius:8px;padding:0 10px;transition:all .4s;}
#side-list a:hover{background-color:#000;color:#fff!important;}
#side-list a i{order:-1;font-size:24px;}
#side-list a:nth-child(1) {color: #173b8e;}
#side-list a:nth-child(2) {color: #0064ff;}
#side-list a:nth-child(3) {color: #9917bd;}
#side-list a:nth-child(4) {color: #1b7d0d;}
#side-list a:nth-child(5) {color: #ff4800;}  
</style>

<div id="side-list">

<!--بداية الرابط-->
  <a href="#">
    اسم الرابط
    <i class="fa-solid fa-microchip"></i>
  </a>
<!--نهاية الرابط-->

  </div>

 شرح الإستخدام

قم بتكرار كود الرابط من البداية للنهاية للحصول على رابط جديد

عدل رمز # بالرابط المراد فتحه عند الضغط عليه 

عدل كود الأيقونة بالأيقونة التي تعجبك من خط الأيقونات

 بالنسبة لهذا الجزء [[#side-list a:nth-child(5) {color: #ff4800;} ]] 

هذا هو لون الأيقونات وهذه الأيقونة الخامسة كما هو موضح في الرقم يمكنك تكرار هذا الكود مع زيادة الرقم 6 و 7 الخ لعمل لون لأيقونة جديدة او تعديل الألوان الموجودة فعلياً