القائمة الجانبية مع التحول CSS. إنشاء قائمة جانبية منزلقة باستخدام CSS خالص. القائمة العمودية مع تأثيرات التمرير

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

الخطوة 1. قم بتوصيل الخط بالأيقونات، وإنشاء مستند فارغ

يمكنك العثور على معلومات مفصلة حول العمل باستخدام خط FontAwesome ورابط للمشروع نفسه في رسالتي -.

وهذا هو الكود الخاص بالصفحة التي تحتوي على الملفات المرفقة:

الخطوة 2: إضافة علامة HTML للقائمة الثابتة

إليك رمز الترميز لقائمتنا الثابتة:

كما لاحظت، قمت بتطبيق العلامة

الخطوة 3. أضف علامة HTML للقائمة الفرعية

• نص الرابط الخاص بك
• نص الرابط الخاص بك
• نص الرابط الخاص بك

القائمة الفرعية هي نفس القائمة الموجودة في القائمة الرئيسية، بالإضافة إلى علامة ، الذي يعرض أيقونة "العربة على اليسار"، يؤدي وظيفة نوع من "الذيل"، مزيد من التفاصيل في الصورة أدناه :)

يربط هذا العنصر أيضًا الفراغ بين كتلة القائمة والقائمة الفرعية، مما يسمح لنا بتنفيذ خيار النقل.

الخطوة 4. اكتب أنماط القائمة الجانبية الثابتة

لقد حاولت التعليق على رمز النمط في الأماكن التي تهمك. بشكل عام، تتعلق جميع النقاط غير المعلقة بالأسلوب المبتذل للخلفية واللون وما إلى ذلك.

#sidebar-menu ( الموضع: ثابت؛ /* إصلاح قائمتنا */ top: 200px; /* موضع القائمة بالنسبة إلى الحافة العلوية للمتصفح */ left: 0; /* لصق القائمة على الحافة اليسرى * / الحشو: 10 بكسل؛ الخلفية: # 323A45؛ اللون: #FFF؛ نصف قطر الحدود: 0 8px 8px 0؛ ) #sidebar-menu li ( الموضع: نسبي؛ المؤشر: المؤشر؛ ) #sidebar-menu li i ( /* Set يجب أن تكون الرموز ذات الحجم الثابت والارتفاع وارتفاع الخط هي نفسها */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; الخلفية: #3CB7E7; text-align: center; ) #sidebar-menu li+li (الهامش العلوي: 4px;) #sidebar-menu b ( العرض: لا شيء; الموضع: مطلق; /* الموضع بالنسبة للحافة اليسرى يساوي عرض العنصر li */ left: 27 بكسل؛ الأعلى: 0؛ الارتفاع: 27 بكسل؛ /* العرض يساوي الفجوة بين قائمة الكتلة والقائمة الفرعية */ العرض: 16 بكسل؛ ارتفاع الخط: 27 بكسل؛ الخلفية: شفاف؛ اللون: #323A45؛ /* ضع الأيقونة نفسه إلى اليمين بحيث يبدو بصريًا مع كتلة القائمة الفرعية */ text-align: right;) #sidebar -menu li > ul (display: none; الموقف: مطلق؛ أعلى: -10 بكسل؛ اليسار: 42 بكسل؛ العرض: 120 بكسل؛ الحشو: 10 بكسل؛ الخلفية: #323A45؛ نصف قطر الحدود: 8 بكسل؛ ) #sidebar-menu li:hover b، #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a (display: block; padding: 4px 8px; border-radius: 4px; color: #FFF ؛ -انتقال webkit: كل .2s؛ -moz-transition: كل .2s؛ -ms-transition: كل .2s؛ -o-transition: كل .2s؛ الانتقال: كل .2s؛) #sidebar-menu li a :تحويم (العرض: كتلة؛ الخلفية: #3CB7E7؛)

إذا كانت لديك أسئلة حول التصميم، فاكتب في التعليقات على هذا المنشور، وسأكون سعيدًا بالإجابة عليها.
هذا كل شئ! القائمة الجانبية الثابتة جاهزة 🙂

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

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

1. القائمة العمودية مع الرأس

خيار تصميم أنيق بسيط. مناسبة لفئات التصميم على موقع على شبكة الإنترنت. عند تمرير مؤشر الماوس، يغير عنصر القائمة لون الارتباط.

* (حجم الصندوق: مربع الحدود؛ الهامش: 0؛). القطعة (الحشوة: 20 بكسل 30 بكسل؛ الخلفية: أبيض؛ عائلة الخط: "Roboto"، sans-serif؛ ) .عنوان القطعة (تحويل النص: أحرف كبيرة ؛ تباعد الحروف: 2 بكسل؛ اللون: #222؛ حجم الخط: 16 بكسل؛ مساحة اليسار: 15 بكسل؛ الهامش السفلي: 15 بكسل؛ الحد الأيسر: 2 بكسل صلب #b99d61؛ ) .قائمة الأدوات (الحشوة: 0؛ القائمة -النمط: لا شيء؛ ) .قائمة القطعة أ: قبل (المحتوى: "\2014"؛ الهامش الأيمن: 14 بكسل؛ ) .قائمة القطعة أ (زخرفة النص: لا شيء؛ المخطط التفصيلي: لا شيء؛ العرض: كتلة؛ الحشو: 6 بكسل 0؛ تباعد الحروف: 1 بكسل؛ وزن الخط: 300؛ اللون: #444؛ الانتقال: .3s خطي؛ ) .widget-list a:hover (اللون: #b99d61؛)

2. القائمة العمودية بأسلوب "خريطة مترو الأنفاق"

حل مثير للاهتمام لتصميم قائمة رأسية، من الممكن إضافة قوائم متداخلة. "خط المترو" هو الحد الأيسر للقائمة، ويتم إنشاء العلامات قبل كل رابط.

• قائمة الاغراض
  • عنصر القائمة المتداخلة
  • عنصر القائمة المتداخلة
  • عنصر القائمة المتداخلة
• قائمة الاغراض
• قائمة الاغراض

.metro ( نمط القائمة: لا شيء؛ الحشو: 0؛ الهامش: 30 بكسل 0 0 50 بكسل؛ الحد الأيسر: 5 بكسل صلب # DAE4F1؛ ) .metro li (ارتفاع الخط: 2em؛) .metro ul ( الهامش: 20 بكسل 0 20 بكسل 15 بكسل؛ الحشو: 0؛ الحدود: لا شيء؛ نمط القائمة: لا شيء؛ ) .metro ul: قبل، .metro ul: after ( المحتوى: ""؛ العرض: 5 بكسل؛ الارتفاع: 28 بكسل؛ الخلفية: # DAE4F1؛ الموضع: نسبي ؛ العرض: كتلة؛ اليسار: -9px؛ ) .metro ul: قبل (تحويل: تدوير (-45deg)؛ الهامش العلوي: -15px؛ ) .metro ul: بعد ( تحويل: تدوير (45deg)؛ أسفل: -20px ; ) .metro ul li (الحد الأيسر: 5px صلب #DAE4F1;) .metro ul li:الطفل الأول (الهامش العلوي: -5px؛ الحشو العلوي: 5px;) .metro ul li:الطفل الأخير (الحشوة -أسفل: 9 بكسل؛ الهامش السفلي: -25 بكسل؛ ) .metro a (زخرفة النص: لا شيء؛ العرض: كتلة؛ عائلة الخط: "Noto Sans"، sans-serif؛ اللون: #4A4B4D؛ ) .metro a: قبل ( المحتوى: ""; العرض: كتلة مضمنة; الخلفية: #CA682D; العرض: 12 بكسل; الارتفاع: 12 بكسل; اليسار: -9 بكسل; الموضع: نسبي; نصف قطر الحدود: 50%; الهامش الأيمن: .5em; )

3. القائمة العمودية مع تأثيرات التمرير

ستساعد تعبئة الأيقونة والخلفية التي تظهر عند التمرير فوق عنصر القائمة في تنويع تصميم عناصر القائمة الرأسية.

.category-wrap ( الحشو: 15px؛ الخلفية: أبيض؛ العرض: 200px؛ ظل الصندوق: 2px 2px 8px rgba(0,0,0,.1); عائلة الخط: "Helvetica Neue"، Helvetica، Arial، sans -serif; ) .category-wrap h3 ( حجم الخط: 16px; اللون: rgba(0,0,0,.6); الهامش: 0 0 10px; الحشو: 0 5px; الموضع: نسبي; ) .category-wrap h3: بعد ( المحتوى: ""؛ العرض: 6 بكسل؛ الارتفاع: 6 بكسل؛ الخلفية: #80C8A0؛ الموضع: مطلق؛ اليمين: 5 بكسل؛ الأسفل: 2 بكسل؛ ظل الصندوق: -8px -8px #80C8A0، 0 -8px #80C8A0 ، -8px 0 #80C8A0; ) .category-wrap ul ( نمط القائمة: لا شيء; الهامش: 0; الحشو: 0; الحد العلوي: 1px Solid rgba(0,0,0,.3); ) .category- التفاف لي (الهامش: 12px 0 0 0px؛) .category-wrap a ( زخرفة النص: لا شيء؛ العرض: كتلة؛ حجم الخط: 13px؛ اللون: rgba(0,0,0,.6); الحشو: 5px ؛ الموضع: نسبي؛ الانتقال: .3s خطي؛ ) .category-wrap a:after (المحتوى: "\f18e"؛ عائلة الخط: FontAwesome؛ الموضع: مطلق؛ اليمين: 5px؛ اللون: أبيض؛ الانتقال: .2s خطي ; ) .category-wrap a:hover ( الخلفية: #80C8A0; اللون الابيض؛ )

4. القائمة العمودية مع الرموز

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

* (حجم الصندوق: مربع الحدود؛ الهامش: 0؛). القطعة (الحشوة: 20 بكسل؛ الحد: 5 بكسل صلب #f1f1f1؛ الخلفية: #fff؛ نصف قطر الحدود: 5 بكسل؛ عائلة الخط: "Roboto"، بلا- serif; ) .القطعة h3 ( الهامش السفلي: 20 بكسل؛ محاذاة النص: المركز؛ حجم الخط: 24 بكسل؛ وزن الخط: عادي؛ اللون: #424949؛ ) . القطعة ul ( الهامش: 0؛ الحشو: 0؛ القائمة -النمط: لا شيء؛ العرض: 250 بكسل؛ ) .widget li (الحد السفلي: 1px صلب #eaeaea؛ الحشو السفلي: 15px؛ الهامش السفلي: 15px؛ ) .widget li:last-child (الحدود السفلية: لا شيء؛) الهامش السفلي: 0؛ الحشو السفلي: 0؛ ) .القطعة أ (زخرفة النص: لا شيء؛ اللون: #616a6b؛ العرض: كتلة مضمنة؛ ) .القطعة li: قبل (عائلة الخط: FontAwesome؛ حجم الخط : 20 بكسل؛ محاذاة عمودية: أسفل؛ اللون: #dd3333؛ الهامش الأيمن: 14 بكسل؛ ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2): قبل (المحتوى:"\f0d0";) .القطعة li:nth-child(3):قبل (المحتوى:"\f0cd";) .القطعة li:nth-child(4):قبل (المحتوى:" \f028";).القطعة li:nth-child(5):قبل (المحتوى:"\f03d";)

5. القائمة العمودية مع الصور

يمكن استخدام هذا المثال لتصميم كتل تحتوي على منتجات جديدة ومنتجات مماثلة وما إلى ذلك. موقع المتجر على الانترنت.

جي بي إي جي">