❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSقوائم الروابط

  • مفهوم قوائم الروابط
  • المبادئ الأساسية لتصميم القوائم
  • تصميم قائمة عمودية
  • تصميم قائمة أفقية
  • تحديد موقع القائمة

مفهوم قوائم الروابط

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

المبادئ الأساسية لتصميم القوائم

بشكل عام، قائمة الروابط يتم تصميمها في العادة كقائمة نوعها <ul> و كل عنصر فيها نضعه بداخل <li> و من ثم نضع رابط العنصر بداخل وسم <a> و بهذه الطريقة يكون التحكم بتصميم القائمة و التعديل عليها سهل جداً.

<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
<ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul>

من بعدها نقوم بإضافة الخصائص التالية لإزالة النقاط و الهوامش الإفتراضية من عناصر القائمة.

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul { list-style-type: none; margin: 0; padding: 0; }

و من ثم نقوم بإضافة باقي الخصائص لإظهار القائمة بالشكل الذي نريده.

تصميم قائمة عمودية

القائمة العمودية يكون الرابط فيها يظهر على سطر منفرد و على كامل عرض القائمة و بالطبع يمكنك إضافة هامش له أو تحديد كم هو طوله بالشكل الذي تريده.

فيما يلي قمنا بتصميم عدة قوائم عمودية مع التركيز على فكرة مختلفة في كل قائمة نصممها.


في المثال التالي قمنا بتصميم قائمة عمودية، مع جعل لون و خلفية العناصر فيها تتغير عن تمرير الماوس فوقها.

مثال

/* هنا قمنا بإزالة هوامش القائمة و تحديد عرضها و لون خلفيتها */
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 220px;
background-color: #f1f1f1;
}
/* هنا قمنا بتحديد لون الروابط و إضافة هامش داخلي حولهم */
li a {
display: block;
color: #000;
padding: 12px 16px;
text-decoration: none;
}
/* هنا قمنا بجعل لون نص و خلفية الرابط يتغير عند تمرير الماوس فوقه */
li a:hover {
color: white;
background-color: #444;
}
/* هنا قمنا بإزالة هوامش القائمة و تحديد عرضها و لون خلفيتها */ ul { list-style-type: none; margin: 0; padding: 0; width: 220px; background-color: #f1f1f1; } /* هنا قمنا بتحديد لون الروابط و إضافة هامش داخلي حولهم */ li a { display: block; color: #000; padding: 12px 16px; text-decoration: none; } /* هنا قمنا بجعل لون نص و خلفية الرابط يتغير عند تمرير الماوس فوقه */ li a:hover { color: white; background-color: #444; }
جرب الكود

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

مثال

.active {
color: white;
background-color: darkcyan;
}
.active { color: white; background-color: darkcyan; }
جرب الكود

في المثال التالي قمنا بجعل الروابط التي لم تستخدم الكلاس active فقط يتغير لونها في حال تمرير الماوس فوقها.

مثال

li a:hover:not(.active) {
color: white;
background-color: #444;
}
li a:hover:not(.active) { color: white; background-color: #444; }
جرب الكود

في المثال التالي قمنا بإظهار حدود حول الروابط و جعلنا نص الروابط يظهر في الوسط أيضاً.
ملاحظة: ما فعلناه بالضبط أننا أظهرنا حدود حول القائمة بحد ذاتها و من ثم أظهرنا الحدود السفلية للروابط باستثناء الرابط الأخير بسبب أننا جعلنا القائمة من الأساس يظهر حدود لها بالأسفل.

مثال

ul {
border: 1px solid #444;
}
li {
text-align: center;
border-bottom: 1px solid #444;
}
li:last-child {
border-bottom: none;
}
ul { border: 1px solid #444; } li { text-align: center; border-bottom: 1px solid #444; } li:last-child { border-bottom: none; }
جرب الكود

تصميم قائمة أفقية

القائمة الأفقية تكون الروابط فيها تظهر وراء بعضها على ذات السطر.
فيما يلي قمنا بتصميم عدة قوائم أفقية مع التركيز على فكرة مختلفة في كل قائمة نصممها.


في المثال التالي قمنا بتصميم قائمة أفقية، مع جعل لون و خلفية العناصر فيها تتغير عن تمرير الماوس فوقها.
ملاحظة: عناصر القائمة التي تحتوي على الروابط جعلناها تظهر وراء بعضها من الناحية اليسرى بإضافة الخاصية float: left; و الخاصية overflow: hidden; للقائمة نفسها.

مثال

/* هنا قمنا بإزالة هوامش القائمة و تحديد عرضها و لون خلفيتها */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #282a35;
overflow: hidden;
}
/* هنا قمنا بجعل العناصر تتدفق وراء بعدها البعض من الجهة اليسرى */
li {
float: left;
}
/* هنا قمنا بتحديد لون الروابط و إضافة هامش داخلي حولهم */
li a {
display: block;
color: white;
padding: 12px 16px;
text-decoration: none;
}
/* هنا قمنا بجعل لون خلفية الرابط يتغير عند تمرير الماوس فوقه */
li a:hover {
background-color: black;
}
/* هنا قمنا بإزالة هوامش القائمة و تحديد عرضها و لون خلفيتها */ ul { list-style-type: none; margin: 0; padding: 0; background-color: #282a35; overflow: hidden; } /* هنا قمنا بجعل العناصر تتدفق وراء بعدها البعض من الجهة اليسرى */ li { float: left; } /* هنا قمنا بتحديد لون الروابط و إضافة هامش داخلي حولهم */ li a { display: block; color: white; padding: 12px 16px; text-decoration: none; } /* هنا قمنا بجعل لون خلفية الرابط يتغير عند تمرير الماوس فوقه */ li a:hover { background-color: black; }
جرب الكود

إضافة الخاصية float: left; لعناصر القائمة تجعل المتصفح غير قادر على تحديد طول القائمة و لكننا نحل هذه المشكلة بإضافة الخاصية overflow: hidden; للقائمة نفسها لكي يتمدد طولها نسبةً لطول العناصر الموضوعة فيها لأننا إن لم نفعل ذلك فإن طولها سيُعتبر 0 و بالتالي لن تظهر في الصفحة.

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


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

مثال

.active {
background-color: darkcyan;
}
li a:hover:not(.active) {
background-color: black;
}
.active { background-color: darkcyan; } li a:hover:not(.active) { background-color: black; }
جرب الكود

في المثال التالي قمنا بجعل الروابط عموماً تظهر من الناحية اليسرى، و من ثم جعلنا أحدها يظهر من الناحية اليمنى.

مثال

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right;"><a href="#about">About</a></li>
</ul>
<ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right;"><a href="#about">About</a></li> </ul>
جرب الكود

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

مثال

li {
border-right: 1px solid #444;
}
li:last-child {
border-right: none;
}
li { border-right: 1px solid #444; } li:last-child { border-right: none; }
جرب الكود

تحديد موقع القائمة

يمكنك جعل القائمة تظهر في المكان الذي تم وضعها فيه أو تحديد موقعها في الصفحة بالشكل الذي تريده أنت.


في المثال التالي قمنا بجعل القائمة ثابتة في أعلى الصفحة.

مثال

ul {
position: fixed;
top: 0;
width: 100%;
}
ul { position: fixed; top: 0; width: 100%; }
جرب الكود

في المثال التالي قمنا بجعل القائمة ثابتة في أسفل الصفحة.

مثال

ul {
position: fixed;
bottom: 0;
width: 100%;
}
ul { position: fixed; bottom: 0; width: 100%; }
جرب الكود

في المثال التالي قمنا بجعل القائمة تثبت في أعلى الصفحة عند النزول فيها.

مثال

ul {
position: sticky;
top: 0;
width: 100%;
}
ul { position: sticky; top: 0; width: 100%; }
جرب الكود

في المثال التالي قمنا بجعل القائمة ثابتة في الجهة اليسرى في الصفحة.
ملاحظة: أضفنا الخاصية height: 100%; للقائمة حتى يكون طولها مطابق لطول الصفحة و أضفنا لها overflow-x: auto; حتى تظهر شريط تمرير في حال كانت المساحة غير كافية لإظهار كل الروابط.

مثال

ul {
width: 25%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
ul { width: 25%; height: 100%; position: fixed; top: 0; left: 0; overflow-x: hidden; overflow-y: auto; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق