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

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

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

في هذا الدرس ستتعلم كيف تصمم شريط قوائم عمودي و شريط قوائم أفقي.

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

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

<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;
    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 فقط يتغير لونها في حال تمرير الماوس فوقها.

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;
}

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

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

في المثال التالي قمنا بتصميم قائمة أفقية، مع جعل لون و خلفية العناصر فيها تتغير عند تمرير الماوس فوقها.
ملاحظة: عناصر القائمة التي تحتوي على الروابط جعلناها تظهر وراء بعضها من الناحية اليسرى بإضافة الخاصية 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;
}

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

.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>

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

li {
    border-right: 1px solid #444;
}

li:last-child {
    border-right: none;
}

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

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

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

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

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

ul {
    position: fixed;
    bottom: 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;
}