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

يعد البرنامج التعليمي الأول لقائمة CSS3 المنسدلة هو الأحدث في المجموعة (من أبريل 2016). إيجابيات الحل: في هذه القائمة المنسدلة الأفقية للموقع، تحتوي العناصر الفرعية على أيقونات، كما أن التنفيذ وكود CSS نفسه سهل الفهم والتنفيذ.

الخطوة 1 - ترميز HTML

الخطوة الأولى هي إنشاء قائمة غير مرتبة في HTML مع روابط ربط (#) لعناصرها. هناك، في أحد العناصر، نضيف قائمة متداخلة أخرى، والتي ستكون مسؤولة عن القائمة الفرعية.

لوحة القيادة الخاصة بي الإعجابات الآراء وثائق رسائل خروج التحميلات أشرطة فيديو وثائق

• لوحة القيادة الخاصة بي
• الإعجابات
• الآراء
  • وثائق
  • رسائل
  • خروج
• التحميلات
• أشرطة فيديو
• وثائق

الخطوة 2 - عرض القائمة

نقوم بإزالة المسافات البادئة غير الضرورية في CSS لعناصر القائمة المنسدلة الأفقية للموقع. في نفس المرحلة، سنقوم بتعيين عرض وارتفاع ثابتين لعناصر القائمة، ونضيف أيضًا زوايا مستديرة.

.menu, .menu ul, .menu li, .menu a ( الهامش : 0 ; الحشو : 0 ; الحدود : لا شيء ; المخطط التفصيلي : لا شيء ; ) .menu ( الارتفاع : 40px ; العرض : 505px ; الخلفية : #4c4e5a ; الخلفية : -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; الخلفية : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ؛ #2c2d33 100%) ؛ الخلفية: -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100%) ؛ الخلفية: خطي-gradient(top , #4c4e5a 0% , #2c2d33 100%) ؛ نصف قطر الحدود: 5 بكسل؛ نصف قطر الحدود: 5 بكسل. القائمة لي (الموضع: نسبي؛ نمط القائمة: لا شيء؛ تعويم: يسار؛ العرض: كتلة؛ الارتفاع: 40 بكسل؛

القائمة، .menu ul، .menu li، .menu a ( الهامش: 0؛ الحشو: 0؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .menu ( الارتفاع: 40 بكسل؛ العرض: 505 بكسل؛ الخلفية: #4c4e5a؛ الخلفية: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); 100% الخلفية: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); نصف القطر: 5 بكسل؛ - نصف قطر الحدود: 5 بكسل؛ نصف قطر الحدود: 5 بكسل؛

الخطوة 3 - تصميم الارتباط

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

.menu li a ( العرض: كتلة؛ الحشو: 0 14 بكسل؛ الهامش: 6 بكسل 0؛ ارتفاع الخط: 28 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #393942؛ الحد الأيمن: 1 بكسل صلب #4f5058 ؛ الخط -العائلة: Helvetica، sans-serif؛ حجم الخط: غامق؛ اللون: #f3f3f3؛ moz-transition: color .2s easy-in-out؛ -o-transition: color .2s easy-in-out؛ (الحدود على اليسار: لا شيء ; ) .menu li: الطفل الأخير a (الحدود على اليمين : لا شيء ; ) .menu li : تحوم > a ( اللون : #8fde62 ; )

القائمة li a ( العرض: كتلة؛ الحشو: 0 14 بكسل؛ الهامش: 6 بكسل 0؛ ارتفاع الخط: 28 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #393942؛ الحد الأيمن: 1 بكسل صلب #4f5058؛ الخط- العائلة: Helvetica، sans-serif؛ وزن الخط: حجم الخط: 13px؛ ظل النص: 1px 1px 1px rgba(0,0,0,.6); الانتقال: اللون .2s سهولة الدخول والخروج؛ -o-transition: اللون .2s سهولة الدخول والخروج؛ اليسار: لا شيء؛

الخطوة 4 - القائمة الفرعية

نظرًا لأن لدينا قائمة موقع منسدلة تستخدم CSS، فيجب علينا أيضًا تعيين تصميم للقائمة المتداخلة. أولاً، قم بتعيين هامش قدره 40 بكسل في الأعلى و0 بكسل على اليسار + أضف زوايا مستديرة. لإظهار/إخفاء القائمة الفرعية، قم في البداية بتعيين خاصية العتامة على الصفر، وعند تحريكها على واحد. لإنشاء تأثير ظهور قائمة فرعية، اضبط قيمة ارتفاع القائمة على صفر، ومع تمرير مؤشر الماوس = 36 بكسل.

.menu ul (الموضع: مطلق؛ الأعلى: 40 بكسل؛ اليسار: 0؛ العتامة: 0؛ الخلفية: #1f2024؛ -webkit-border-radius: 0 0 5px 5px؛ -moz-border-radius: 0 0 5px 5px ; border -radius: 0 0 5px 5px ؛ -webkit-transition: العتامة .25s سهولة .1s ؛ -moz-transition: العتامة .25s سهولة .1s ؛ الانتقال: العتامة .25s سهولة .1s ؛ .menu li: hover > ul ( العتامة : 1 ; ) .menu ul li ( الارتفاع : 0 ; الفائض : مخفي ; الحشو : 0 ; -webkit-transition : الارتفاع .25s سهولة . 1s -moz-transition: ارتفاع .25s سهولة .1s ؛ -ms-transition: ارتفاع .25s سهولة .1s ; ؛)

القائمة ul ( الموضع: مطلق؛ الأعلى: 40 بكسل؛ اليسار: 0؛ العتامة: 0؛ الخلفية: #1f2024؛ -webkit-border-radius: 0 0 5px 5px؛ -moz-border-radius: 0 0 5px 5px؛ border- نصف القطر: 0 0 5px 5px؛ -webkit-transition: العتامة .25s سهولة .1s؛ -moz-transition: العتامة .25s سهولة .1s؛ العتامة .25s سهولة .1s؛) .menu li:hover > ul ( العتامة: 1؛ ) .menu ul li ( الارتفاع: 0؛ الفائض: مخفي؛ الحشو: 0؛ -webkit-transition: الارتفاع .25s سهولة .1s؛ -moz-transition: الارتفاع .25 ثانية بسهولة .1 ثانية؛ -ms-transition: الارتفاع .25 ثانية بسهولة .1 ثانية؛

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

.قائمة ul li a (العرض: 100 بكسل؛ الحشو: 4 بكسل 0 4 بكسل 40 بكسل؛ الهامش: 0؛ الحدود: لا شيء؛ الحد السفلي: 1 بكسل صلب #353539؛) .قائمة ul li: الطفل الأخير أ (الحدود: لا شيء؛) .القائمة أ. المستندات ( الخلفية : url (../img/docs.png ) بدون تكرار 6 بكسل مركز ; ) . القائمة أ. الرسائل ( الخلفية : url (../img/bubble.png ) بدون تكرار 6 بكسل مركز . ) .menu a.signout ( الخلفية : url (../img/arrow.png ) مركز بدون تكرار 6 بكسل ؛ )

القائمة ul li a (العرض: 100 بكسل؛ الحشو: 4 بكسل 0 4 بكسل 40 بكسل؛ الهامش: 0؛ الحدود: لا شيء؛ الحد السفلي: 1 بكسل صلب #353539؛) . القائمة ul li: Last-child a (الحدود: لا شيء؛ ) . القائمة أ. المستندات ( الخلفية: url(../img/docs.png) مركز 6 بكسل بدون تكرار؛ ) . القائمة أ. الرسائل ( الخلفية: url(../img/bubble.png) مركز 6 بكسل بدون تكرار؛ ) .menu a.signout ( الخلفية: url(../img/arrow.png) بدون تكرار 6 بكسل مركزي؛ )

أنا شخصياً أحب سهولة التنفيذ واستخدام الرموز. هذا هو الكود النهائي من Codepen:

يشبه خيار Josh Riser بصريًا القائمة المنسدلة السابقة لـ HTML وCSS. لا يحتوي الكود على محدد فرعي ">" (مفيد في التصميمات متعددة المستويات)، لكن المؤلف يستفيد جيدًا من تأثيرات CSS3 (الانتقال، وظل الصندوق، وظل النص) للحصول على نتيجة أكثر جمالًا. لا يصف الرابط الموجود في المصدر عملية إنشاء قائمة منسدلة أفقية، لذا سأقدم الكود النهائي على الفور:

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

كود HTML

للتنقل، كما هو الحال دائمًا، يتم استخدام قائمة غير مرتبة (مع فئة التنقل). عناصر القائمة العادية هي عناصر قائمة (li) وتحتوي على روابط (a href) بدون أي فئات أو معرفات. الاستثناء هو 3 عناصر متخصصة في هذه القائمة المنسدلة الأفقية بالمعرفات التالية:

• الإعدادات - رابط الصورة؛
• البحث - كتلة تحتوي على بحث وزر مطابق؛
• الخيارات - تحتوي على قائمة فرعية (يتم تنفيذها من خلال قائمة ذات فئة التنقل الفرعي).

سترى أيضًا في الكود برنامجًا نصيًا خاليًا من البادئات لاستخدام خصائص CSS بدون بادئات. يبدو HTML النهائي للقائمة المنسدلة كما يلي:

طلب سبورة خيارات إعدادات طلب سبورة خيارات

• 
• طلب
• سبورة
• خيارات
  • إعدادات
  • طلب
  • سبورة
  • خيارات

القائمة CSS

1. الأنماط الأساسية وعناصر القائمة

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

@import url (http: //fonts.googleapis.com/css?family= مونتسيرات) ؛ * (الهامش: 0؛ الحشو: 0؛) .nav (الخلفية: #232323؛ الارتفاع: 60 بكسل؛ العرض: كتلة مضمنة؛) .nav li (تعويم: يسار؛ نوع نمط القائمة: لا شيء؛ الموضع: نسبي؛) )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( الهامش: 0؛ الحشو: 0؛ ) .nav ( الخلفية: #232323؛ الارتفاع: 60 بكسل؛ العرض: كتلة مضمنة؛ ) .nav li ( تعويم: يسار؛ نوع نمط القائمة: لا شيء؛ الموضع: نسبي؛ )

2. تنسيق الروابط

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

.nav li a (حجم الخط: 16 بكسل؛ اللون: أبيض؛ العرض: كتلة؛ ارتفاع الخط: 60 بكسل؛ الحشو: 0 26 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #2e2e2e؛ عائلة الخط: مونتسيرات ، sans-serif ؛ ظل النص: 0 0 1 بكسل rgba ( 255 ، 255 ، 255 ، 0.5 ) .nav li a: hover (لون الخلفية : #2e2e2e ;) #settings a ( الحشو : 18px ; الارتفاع : 24px ; حجم الخط: 10 بكسل؛ ارتفاع الخط: 24 بكسل؛

Nav li a ( حجم الخط: 16 بكسل؛ اللون: أبيض؛ العرض: كتلة؛ ارتفاع الخط: 60 بكسل؛ الحشو: 0 26 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #2e2e2e؛ عائلة الخط: مونتسيرات، Sans-serif؛ text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -الحجم: 10 بكسل؛ ارتفاع الخط: 24 بكسل)

3. كتلة البحث

هذا العنصر له عرض ثابت ويتكون من عدة أجزاء - حقل إدخال (#search_text) بخلفية خضراء وزر بحث (#search_button). في بعض المتصفحات، قد يكون لون الخلفية رماديًا.

#search (العرض: 357 بكسل ؛ الهامش: 4 بكسل ؛) #search_text (العرض: 297 بكسل ؛ الحشو: 15 بكسل 0 15 بكسل 20 بكسل ؛ حجم الخط: 16 بكسل ؛ عائلة الخط: Montserrat، sans-serif ؛ الحدود: 0 لا شيء ؛ الارتفاع: 52 بكسل الهامش الأيمن: 0؛ اللون: أبيض؛ الخلفية: #1f7f5c؛ تعويم: مربع انتقال: الكل) :: -moz- العنصر النائب ( /* Mozilla Firefox 4 إلى 18 */ اللون : أبيض ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ اللون : أبيض ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ اللون: أبيض؛) #search_text: التركيز (الخلفية: rgb (64، 151، 119)؛) #search_button (الحدود: 0 لا شيء؛ الخلفية: #1f7f5c url (search.png) المركز بدون تكرار؛ تعويم: يسار محاذاة النص: المركز: المؤشر؛

#search (العرض: 357 بكسل؛ الهامش: 4 بكسل؛) #search_text (العرض: 297 بكسل؛ الحشو: 15 بكسل 0 15 بكسل 20 بكسل؛ حجم الخط: 16 بكسل؛ عائلة الخط: Montserrat، sans-serif؛ الحدود: 0 لا شيء؛ الارتفاع: 52 بكسل ; فايرفوكس 4 إلى 18 */ اللون: أبيض ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: White; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ اللون: أبيض ) #search_text:focus ( الخلفية: rgb(64, 151, 119); ) #search_button (الحدود: 0 لا شيء؛ الخلفية: #1f7f5c url (search.png) المركز بدون تكرار؛ تعويم: يسار؛ محاذاة النص: 52بكسل;

4. القائمة الفرعية المنسدلة

ستسمح لنا اللمسة الأخيرة بإنشاء قائمة منسدلة في CSS يتم تشغيلها لعنصر #options الأخير.

#options a( border-left: 0 none ; ) #options > a ( صورة الخلفية : url (triangle.png ) ; موضع الخلفية : 85% مركز ; تكرار الخلفية : بدون تكرار ; الحشو على اليمين : 42px ; ) .subnav (الرؤية: مخفي؛ الموضع: مطلق؛ الأعلى: 110%؛ اليمين: 0؛ العرض: 200 بكسل؛ الارتفاع: تلقائي؛ العتامة: 0؛ الانتقال: الكل 0.1 ثانية؛ الخلفية: #232323؛) .subnav li (تعويم) : لا يوجد ;

#options a( border-left: 0 none; ) #options>a ( صورة الخلفية: url(triangle.png); موضع الخلفية: مركز 85%; تكرار الخلفية: بدون تكرار; الحشو على اليمين: 42px; ) .subnav (الرؤية: مخفي؛ الموضع: مطلق؛ الأعلى: 110%؛ اليمين: 0؛ العرض: 200 بكسل؛ الارتفاع: تلقائي؛ العتامة: 0؛ الانتقال: الكل 0.1 ثانية؛ الخلفية: #232323؛ ) .subnav li ( float : لا شيء؛ ) .subnav li a (الحدود السفلية: 1 بكسل صلب #2e2e2e؛) #options:hover .subnav (الرؤية: مرئية؛ الأعلى: 100%؛ العتامة: 1؛)

ستجد في الأنماط إدراج صورة خلفية مثلث (triangle.png) للإشارة إلى القائمة الفرعية - لا تنس الإشارة إلى المسار الصحيح لهذه الصورة وغيرها من الصور في المثال. يتم تنفيذ مظهر القائمة الفرعية باستخدام خاصية العتامة. الحل النهائي على Codepen:

يستخدم هذا الخيار بشكل أساسي تقنيات CSS2.1، والحل زائد أو ناقص جديد - لشهر مارس 2015. إذا كنت تفتقد مستوى فرعيًا واحدًا في القائمة المنسدلة الأفقية لموقع ما، فإن هذا المثال يحتوي على ثلاثة مستويات فرعية في وقت واحد. باستخدام الفئة الزائفة: الطفل الوحيد، تتم إضافة رمز "+" إلى العناصر للإشارة إلى وجود قائمة فرعية.

على العموم، مثال جيد وبسيط. لن نقوم بوصف عملية التنفيذ بالتفصيل، لأن... إنه مشابه للإطارات السابقة - أولاً تقوم بإنشاء إطار عمل HTML، ثم تضيف أنماطًا له تدريجيًا. قم بتنزيل الكود النهائي باستخدام رابط المصدر، ويمكنك مشاهدته جزئيًا في Codepen:

المجموع

أعلاه، نظرنا إلى 4 خيارات لكيفية إنشاء قائمة منسدلة باستخدام CSS + HTML، على الرغم من وجود العديد من الأمثلة المماثلة على الإنترنت. هناك حلول مع jQuery، ولكن هذا على الأرجح مفيد فقط لتنفيذ بعض المؤثرات الخاصة والمهام غير القياسية. في معظم الحالات، سيكون مزيج CSS + HTML كافيا، خاصة وأن المتطلبات الرئيسية الآن للقائمة هي الراحة وسرعة التحميل السريعة.

وأخيرًا، ملاحظتان على الرموز أعلاه. تستخدم بعض الأمثلة الصور الموجودة في CSS للقائمة المنسدلة، لذا ستحتاج إلى مراجعة مسارات الصور بعناية وتوفير القيم الصحيحة لموقعك. ثانيًا، يبلغ عمر بعض الحلول 2-3 سنوات، لذا يجب عليك التحقق من أدائها مرة أخرى في متصفحات مختلفة.

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

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

خطة الدرس وتخطيط القائمة لدينا

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

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

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

في الواقع، ها هو كل العلامات:

• الفقرة 1
  • بند فرعي
  • بند فرعي
  • بند فرعي
• النقطة 2
  • بند فرعي
  • بند فرعي
  • بند فرعي
• النقطة 3
  • بند فرعي
  • بند فرعي
  • بند فرعي
• النقطة 4
  • بند فرعي
  • بند فرعي
  • بند فرعي

< nav id = "nav" > < ul > < li > < a href = "#" >الفقرة 1< / a > < ul class = "second" > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < / ul > < / li > < li > < a href = "#" >النقطة 2< / a > < ul class = "second" > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < / ul > < / li > < li > < a href = "#" >النقطة 3< / a > < ul class = "second" > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < / ul > < / li > < li > < a href = "#" >النقطة 4< / a > < ul class = "second" > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < li > < a href = "#" >بند فرعي< / a > < / li > < / ul > < / li > < / ul > < / nav >

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

في الواقع، لقد أعطيت التنقل بأكمله معرفًا للتنقل، وجميع القوائم المتداخلة فئة نمط ثانية لفهم أنها متداخلة.

عظيم، لدينا علامة جاهزة، يمكنك إلقاء نظرة على النتيجة:

نعم، يبدو فظيعا. ولكن الآن سنقوم بتمكين CSS وفي غضون دقائق قليلة سيتم تحويل التنقل الخاص بنا. دعونا نعمل.

كتابة أنماط CSS

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

*( الهامش: 0؛ الحشو: 0؛)

الهامش: 0; الحشو: 0؛

#nav(الارتفاع: 70px;) #nav ul(نمط القائمة: لا شيء;)

#التنقل( الارتفاع: 70 بكسل؛ #نافول( نمط القائمة : لا يوجد ;

الآن نحن بحاجة إلى أن نقرر فعليًا ما ستكون قائمتنا. أفقي أم عمودي؟ أقترح القيام بالنموذج الأفقي أولاً ورؤية كل شيء في مثاله. للقيام بذلك تحتاج إلى كتابة الأنماط التالية:

#nav > ul > li( float: left; width: 180px; الموضع: نسبي; )

# التنقل > أول > لي( تعويم: اليسار؛ العرض: 180 بكسل؛ الموقف: نسبي؛

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

لكن يمكنك بالطبع القيام بذلك بشكل مختلف وفقًا لفكرتك. يمكنك التأكد من أن جميع النقاط تقع على سطر واحد.

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

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

وفي هذه الأثناء، إليك ما حصلنا عليه حتى الآن:

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

#nav li a( العرض: كتلة؛ الخلفية: #90DA93؛ الحد: 1 بكسل صلب #060A13؛ اللون: #060A13؛ الحشو: 8 بكسل؛ محاذاة النص: المركز؛ زخرفة النص: لا شيء؛) #nav li a:hover( الخلفية: #2F718E )

#نافلي( العرض محجوب؛ الخلفية: #90DA93؛ الحدود: 1 بكسل صلب #060A13؛ اللون: #060A13؛ الحشو: 8 بكسل؛ محاذاة النص : المركز ; زخرفة النص : لا يوجد ; #nav li a:hover( الخلفية: #2F718E؛

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

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

يرجى ملاحظة أننا في هذه الحالة لم نستخدم علامة >، وبالتالي سيتم تطبيق القواعد المذكورة أعلاه على جميع الروابط، بما في ذلك الروابط الموجودة في الفقرات المتداخلة. إذن لدينا الآن ما يلي:

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

#nav li .ثانية (العرض: لا شيء؛ الموضع: مطلق؛ الأعلى: 100%؛)

#nav لى .الثانية( عرض لا شيء؛ الموقف: مطلق؛ أفضل 100٪؛

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

الآن نرى فقط القائمة الرئيسية على صفحة الويب، وهو ما نحتاجه.

دعونا ننفذ التسرب

كل ما بقي لنا أن نفعله هو الأهم، وهو أن ندرك السقوط نفسه. لا يوجد شيء معقد في هذا الأمر، أنظر إلى هذا الكود:

#nav li:hover .sec( العرض: block; )

#nav li:hover .ثانية( العرض محجوب؛

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

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

#nav li li (العرض: 180 بكسل؛)

#نافليلي( العرض: 180 بكسل؛

هذا كل شيء، تم حل المشكلة:

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

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

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

أولاً، سوف تحتاج إلى إزالة float:left من عناصر القائمة الرئيسية. هذه الخاصية هي التي تضمن عرض العناصر لدينا في سطر واحد، ولكن لماذا نحتاج إلى ذلك إذا كان التنقل عموديًا؟

الآن كل ما تبقى هو تغيير قواعد المحدد #nav li .Second، أي بالنسبة للقوائم المتداخلة، أي أنها تحتاج إلى وضعها بشكل مختلف قليلاً. مثله:

#nav li .ثانية (العرض: لا شيء؛ الموضع: مطلق؛ اليسار: 100%؛ الأعلى: 0؛)

#nav لى .الثانية( عرض لا شيء؛ الموقف: مطلق؛ اليسار: 100%؛ أعلى: 0؛

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

لذلك، نقوم بتغيير الأعلى: 100% إلى اليسار: 100%. بالإضافة إلى ذلك، نحتاج أيضًا إلى الإحداثيات العليا. لقد قمنا بتعيينها على 0 بحيث تكون القائمة الفرعية في نفس مستوى العنصر الذي يتوافق معها.

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

قائمة أفقية بعدة مستويات

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

1. قائمة jQuery الساطعة العمودية 2. تأثير رائع. قائمة الرقص.

4. القائمة المنسدلة باستخدام jQuery

تصميم ممتاز لعنصر الواجهة على شكل قائمة منسدلة.

عند تحريك الماوس فوق الزر، تظهر لوحة في الأعلى.

6. البرنامج المساعد jQuery "MobilyBlocks" لعرض قائمة شعاعية

7. القائمة باستخدام النقوش المتحركة

قائمة جافا سكريبت المتحركة مع تأثير التوهج.

قائمة جديدة وجميلة باستخدام jQuery.

9. قائمة jQuery "GarageDoor" 10. قائمة التمرير العمودية jQuery

تنفيذ قائمة تحتوي على عدد كبير من العناصر. يتم التمرير عند تحريك مؤشر الماوس لأعلى أو لأسفل.

11. تصميم القائمة المنسدلة jQuery

12. البرنامج المساعد للملاحة الصفحة

التمرير السلس إلى القسم المطلوب في الصفحة. jQuery البرنامج المساعد للملاحة في صفحة واحدة.

13. البرنامج المساعد "قائمة المحتوى المتحرك"

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

14. البرنامج المساعد لقائمة jQuery "القائمة الحلوة"

قائمة متحركة مع العناصر المنبثقة.

15. قائمة مسج ثابتة

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

16. قوائم التمرير لمجموعة أدوات التمرير

لتنفيذ قائمة عمودية مع عدد كبير من العناصر. يتم التمرير عبر العناصر باستخدام عجلة الماوس، أو باستخدام روابط "السابق" و"التالي".

17. قائمة CSS3 الأنيقة

18. قائمة CSS3 جديدة بأسلوب Apple

قائمة جديدة بأسلوب أبل. يبدو أغمق من ذي قبل، ولكن ليس أقل لطيف.

19. قائمة jQuery الأصلية

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

20. القائمة المتحركة مع مسج

القائمة المتحركة. يتم عرض عناصر القائمة في شكل أيقونات وأوصاف. العديد من التأثيرات الرائعة عند تحريك الماوس فوق عنصر القائمة. هناك 8 تأثيرات، لرؤيتها جميعًا - اتبع الروابط Exemple1-Exemple8 الموجودة على الصفحة التجريبية.

21. "قائمة التمرير" قائمة XML مع التمرير

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

22. قائمة السياق على موقع الويب باستخدام jQuery

تظهر قائمة عند النقر بزر الماوس الأيمن على منطقة معينة.

23. القائمة الدائرية ذات المستويين للموقع

عند تحديد عنصر قائمة، يتم عرض عناصر القائمة الفرعية على اليمين.

24. قائمة jQuery CSS3 مع تأثير التمويه “Blur Menu” CSS3

تأتي قائمة jQuery CSS3 الأصلية في 7 أنماط مختلفة. عند تحريك مؤشر الماوس فوق أحد عناصر القائمة، يبدو أن الباقي غير واضح.

25. بعض قوائم jQuery CSS3 المتحركة الرائعة

10 قوائم متحركة إبداعية. قوائم CSS3 أفقية وعمودية مع تأثيرات وانتقالات مختلفة.

يتضمن الأرشيف أيضًا ملف PSD للقائمة الأصلية.

27. قائمة ماجيك لاين

تتبع الخلفية أو التسطير الخاص بعنصر القائمة الماوس بتأخير بسيط، بينما تغير الخلفية لونها بسلاسة أثناء انتقالها من عنصر إلى آخر. تأثير جميل جدا، يبدو غير عادي. تنبيه: التأثير لا يعمل في الأوبرا

28. فقاعات الصورة

تأثير ممتاز عند تحريك الماوس فوق إحدى الصور. التأثير يذكرنا إلى حد ما بـ jQDock الموصوف أعلاه.

31. قوائم jQuery مثيرة للاهتمام مع تأثيرات مختلفة

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

32. قائمة jQuery رائعة على طراز Apple

34. قائمة jQuery ذات تأثير مثير للاهتمام

36. قائمة جديدة ذات تأثير مثير للاهتمام باستخدام jQuery

تأثير مثير جدا للاهتمام. مثالية لتصميم مواقع المحفظة.

تأثير مثير للاهتمام للصور المصغرة التي تظهر عند التمرير.

40. القائمة المنسدلة مع التمرير التلقائي

تأثير انتقال لطيف بين العناصر.

42. قائمة مسج رائعة

43. قائمة مسج كبيرة وجميلة

44. قوائم التمرير مسج

يتم عرض عناصر القائمة في شكل صور مصغرة.

46. ​​قائمة التنقل الشعاعي jQuery

47. قائمة CSS وjQuery

شريط تنقل به مربع بحث يصبح شفافًا أثناء التمرير لأسفل الصفحة.

48. قائمة مسج أفقية

49. قائمة مسج عمودية

قائمة عمودية رائعة. عند تحريك المؤشر، ينبثق عنصر القائمة.

50. قائمة مسج أفقية

تأثير مثير للاهتمام عند تحريك المؤشر فوق عنصر القائمة.

52. القائمة المنسدلة مسج

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

53. شريط التنقل CSS وjQuery

تأثير مثير للاهتمام عند تحريك الماوس فوق عنصر القائمة.

54. لوحة منبثقة مسج

قائمة متحركة جديدة بألوان رمادية.

58. التنقل العمودي في الموقع باستخدام jQuery

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

59. الملاحة في موقع مسج

يتم تقديم التنقل في الموقع على شكل 4 صور، عندما تحوم فوقها ستلاحظ تأثيرًا متحركًا مثيرًا للاهتمام.

60. يتم تمرير شريط التنقل بالمحتوى

لوحة التنقل. يؤدي النقر فوق السهم إلى تمرير الصفحة. يتم تمرير التنقل مع محتوى الصفحة.

61. لوحة jQuery مع الخدمات الاجتماعية المختلفة

62. قائمة مسج متحركة أنيقة

63. قائمة jQuery "فرش الألوان المائية".

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

هيكل المادة

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

أولاً، دعونا نلقي نظرة على مثال القائمة الأفقية التي لا تحتوي على عناصر منسدلة.

كود HTML

• الفقرة 1
• النقطة 2
• النقطة 3
• النقطة 4
• النقطة 5

كود Css *، *::after، *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms - حجم الصندوق: مربع الحدود؛ حجم الصندوق: مربع الحدود: 0؛ #القائمة الرئيسية (الخلفية: #444؛ الموضع: نسبي؛ الفائض: مخفي؛ الارتفاع: 40 بكسل؛ الهامش: 30 بكسل 0) # القائمة الرئيسية ul (قائمة) -النمط: لا شيء؛ الهامش: 0؛ الموضع: نسبي على اليسار: 50%؛ الخط على اليسار: 14px Arial، Helvetica، sans-serif؛ left: -50%; float: left; ) #القائمة الرئيسية ul li a:hover ( لون الخلفية: #666 ؛ )

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

الآن يتعلق الأمر بأنماط CSS. أولاً نقوم بإعادة ضبط جميع الهوامش والحشوة على الصفر لجميع المتصفحات. بعد ذلك، باستخدام خاصية "float:left"، نقوم بنقل قائمتنا غير المرتبة إلى اليسار ثم، باستخدام الموضع النسبي، نقوم بنقلها بنسبة 50٪ إلى اليمين. سيكون عرض القائمة "ul" مساوياً لمجموع أطوال جميع عناصر "li" الموجودة بداخلها. وبالتالي، إذا قسمنا نافذة المتصفح ذهنيًا إلى نصفين، فستنتقل قائمتنا إلى يمين الخط الفاصل. للمحاذاة، سنطبق أيضًا موضعًا نسبيًا على العناصر "li" وننقلها إلى اليسار بنسبة 50%، مع تحديد خاصية "left:-50%". وأيضًا، نسيت تقريبًا أن حاوية "القائمة الرئيسية" الخاصة بنا يجب أن تحدد خاصية "التجاوز: مخفي"، وإلا فسنحصل على شريط تمرير أفقي.

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

قائمة أفقية في المنتصف تحتوي على عناصر منسدلة

الآن دعونا نلقي نظرة على العناصر الفرعية المنسدلة. هنا الوضع مختلف إلى حد ما وأكثر تعقيدا إلى حد ما، لأنه في الحالة الأولى، لن تظهر العناصر الفرعية لدينا، لأننا حددنا خاصية "التجاوز: مخفي" في كتلة "القائمة الرئيسية". وهذا يعني أنه لن يتم عرض العناصر الموجودة خارج هذه الكتلة. ولكن هناك طريقة للخروج.

لذلك، قمت بتعديل الكود السابق وإزالة خاصية "التجاوز: مخفي" منه.

كود HTML

• الفقرة 1
  • البند الفرعي 1.1
    • البند الفرعي 1.1.1
    • البند الفرعي 1.1.2
    • البند الفرعي 1.1.3
  • البند الفرعي 1.2
    • البند الفرعي 1.2.1
    • البند الفرعي 1.2.2
    • البند الفرعي 1.2.3
  • البند الفرعي 1.3
  • البند الفرعي 1.4
  • البند الفرعي 1.5
• النقطة 2
  • البند الفرعي 2.1
  • البند الفرعي 2.2
  • البند الفرعي 2.3
    • البند الفرعي 2.3.1
    • البند الفرعي 2.3.2
    • البند الفرعي 2.3.3
  • البند الفرعي 2.4
  • عنصر فرعي طويل، عنصر فرعي طويل
• عنصر القائمة الطويلة 3
  • البند الفرعي 3.1
  • البند الفرعي 3.2
  • البند الفرعي 3.3
  • البند الفرعي 3.4
  • البند الفرعي 3.5
• النقطة 4
  • البند الفرعي 4.1
  • البند الفرعي 4.2
  • البند الفرعي 4.3
  • البند الفرعي 4.4
  • البند الفرعي 4.5
• النقطة 5
  • البند الفرعي 5.1
  • البند الفرعي 5.2
  • البند الفرعي 5.3
  • البند الفرعي 5.4
  • البند الفرعي 5.5

كود CSS *، *::after، *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms - حجم الصندوق: مربع الحدود؛ حجم الصندوق: مربع الحدود: 0؛ #القائمة الرئيسية (الموضع: نسبي؛ الخلفية: #444444؛ الارتفاع: 40 بكسل؛ الهامش: 30 بكسل 0؛ الحشو: 0؛ تعويم: يسار؛ العرض : 100%؛ فهرس-z: 10) #القائمة الرئيسية ul (واضح: يسار؛ الموضع: نسبي؛ يمين: 50%؛ الارتفاع: 40 بكسل؛ تعويم: يمين؛ محاذاة النص: المركز؛ الخط: 15 بكسل Arial، Helvetica، sans- serif; 0 ) #mainmenu > ul > li > a ( الحد الأيسر: 1 بكسل صلب #666; العرض: كتلة; اللون: #fff; زخرفة النص: لا شيء; الحشو: 0 20 بكسل; ارتفاع الخط: 40 بكسل; ) #القائمة الرئيسية > ul > li:first-child > a (الحدود: لا شيء) #mainmenu > ul > li:hover > a، #mainmenu > ul > li.hover > a، #mainmenu > ul > li.active > a ( color: # fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( الخلفية: #666 ) /* العناصر الفرعية المنسدلة */ #mainmenu ul li ul ( الموضع: مطلق؛ اليسار: 0؛ أعلى: 40 بكسل؛ عرض لا شيء؛ نمط القائمة: لا شيء؛ الرؤية: مخفية؛ الحشو: 0؛ الهامش: 0; width: 200px ) #mainmenu > ul > li ul li ( لون الخلفية: #666; الموضع: نسبي; اليسار: 0; العرض: عنصر القائمة; تعويم: لا شيء; الارتفاع: تلقائي; الهامش: 0; محاذاة النص: left;) #mainmenu ul li ul li a (الحدود السفلية: 1 بكسل صلب #999؛ العرض: كتلة؛ اللون: #fff؛ الحشو: 10 بكسل 15 بكسل؛ زخرفة النص: لا شيء؛) #mainmenu ul li ul li.parent a (الموضع: نسبي؛) #القائمة الرئيسية ul li ul > li.parent > a::before (الحدود العلوية: 1 بكسل صلب #fff؛ الحدود اليمنى: 1 بكسل صلب #fff؛ المحتوى: ""؛ العرض: كتلة؛ الموضع: اليمين المطلق: 15 بكسل؛ التحويل: ترجمة Y(-50%) تدوير (45 درجة) العرض: 6 بكسل (لون الخلفية: #444) #mainmenu ul li:hover ul، #mainmenu ul li.hover ul؛ ) /* العناصر المنسدلة من المستوى الثاني */ #mainmenu ul li:hover > ul ( العتامة: 1; الرؤية: مرئية; الهامش: 0; ) #القائمة الرئيسية ul li ul li ul ( top: 0; left: 200px; الهامش: 0 0 20 بكسل العرض: 180 بكسل)

الآن تم وضع قائمتنا في المنتصف وتظهر العناصر الفرعية عند المرور فوقها.

توسيط القوائم مع flexbox

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

كود CSS *، *::after، *::before ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms- حجم الصندوق: مربع الحدود؛ حجم الصندوق: مربع الحدود؛ الحشو: 0) # القائمة الرئيسية (الموضع: نسبي؛ الخلفية: #444444؛ الارتفاع: 40 بكسل؛ الهامش: 30 بكسل 0؛ الحشو: 0؛ العرض: 100% z-index: 10) #mainmenu ul (عرض: -webkit-box؛ عرض: -webkit-flex؛ عرض: -ms-flexbox؛ عرض: flex؛ -webkit-box-orient: أفقي؛ - webkit-box-؛ الاتجاه: عادي؛ -webkit-flex-direction: صف؛ -webkit-justify-content: center؛ ) /** النقاط الرئيسية **/ #mainmenu > ul > li ( الموضع: نسبي; الارتفاع: 40px; الحشو: 0; الهامش: 0 ) #mainmenu > ul > li > a ( border-left: 1px Solid #666; العرض: لون الكتلة: #fff؛ زخرفة النص: لا شيء؛ الحشو: 0 20 بكسل؛ ارتفاع الخط: 40 بكسل؛ ) #mainmenu > ul > li:first-child > a ( الحدود: لا شيء ) #mainmenu > ul > li:hover > a، #mainmenu > ul > li.hover > a، #mainmenu > ul > li.active > a ( اللون: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( الخلفية: #666 ) /* العناصر الفرعية المنسدلة */ #mainmenu ul li ul (الموضع: اليسار المطلق: 0؛ العرض: لا شيء؛ الرؤية: الهامش: 0؛ : #666؛ الموضع: اليسار: 0؛ التعويم: لا شيء؛ محاذاة النص: اليسار؛ الصلبة #999؛ اللون: #fff؛ الحشو: 10 بكسل 15 بكسل؛ زخرفة النص: لا شيء أ:: قبل (الحدود العلوية: 1 بكسل صلب #fff؛ الحدود اليمنى: 1 بكسل صلب #fff؛ المحتوى: ""؛ العرض: كتلة؛ الموضع: مطلق؛ اليمين: 15 بكسل ؛ الأعلى: 50%؛ تحويل: ترجمة Y(- 50%) تدوير (45 درجة)؛ الارتفاع: 6 بكسل؛ العرض: 6 بكسل؛ ) #القائمة الرئيسية ul li ul li:hover، #mainmenu ul li ul li.hover (لون الخلفية: #444) #mainmenu ul li:hover ul، #mainmenu ul li.hover ul (display: block) /* Drop- العناصر السفلية المستوى الثاني */ #mainmenu ul li:hover > ul ( العتامة: 1; الرؤية: مرئية; الهامش: 0; ) #mainmenu ul li ul li ul ( top: 0; left: 200px; هامش: 0 0 0 20px العرض: 180 بكسل)

كما ترون، تغيرت القواعد فقط للقائمة الرئيسية - #mainmenu ul. الشيء الوحيد هو أنه كان علينا إضافة بادئات للإصدارات السابقة من المتصفحات. ألاحظ أن المتصفحات الحديثة فقط هي التي تفهم قاعدة flexbox بشكل صحيح. إذا كنت تستهدف المتصفحات القديمة، فسيتعين تأجيل الخيار المرن. يمكنك معرفة المتصفحات التي تفهم flexbox جيدًا

من المؤلف: أرحب بكم في مدونتنا حول بناء المواقع. هذه سلسلة من المقالات المخصصة للمواصفات الجديدة واليوم أود أن أخبركم بكيفية إنشاء قائمة في HTML5 وكيف تختلف هذه العملية عن نفسها في الإصدارات السابقة من اللغة.

ما هي الاختلافات

بادئ ذي بدء، أود أن أقول إن المواصفات ليست جديدة جدًا - فقد بدأ تطويرها في عام 2009. في الواقع، منذ ذلك الحين، كان هناك تطور مستمر - تظهر ميزات جديدة في html5، وتدعم المتصفحات الحديثة هذه الميزات نفسها أكثر فأكثر، لذلك سيكون من الممكن قريبًا التحدث عن الدعم الكامل لهذه التكنولوجيا، على الرغم من أنها ليست كاملة، بل هي بالأحرى مجموعة من الاحتمالات الجديدة، كل واحدة منها مستقلة.

حسنًا، حسنًا، ولكن ما هو المختلف في إنشاء التنقل الرئيسي (القائمة)، نظرًا لأنك تقرأ مقالًا حول هذا الموضوع، فيجب أن يكون هناك بالتأكيد بعض الاختلافات. حسنًا، كيف تم إنشاء القائمة من قبل؟ عادةً ما يتم استخدام قائمة ذات تعداد نقطي لهذا الغرض، والتي تم وضعها في حاوية إضافية لجميع عمليات التنقل - قسم عادي.

لذلك، مع ظهور علامات جديدة، يمكنك الآن القيام بشيء أكثر صحة - بدلاً من علامة div، لف القائمة في التنقل - وهو عنصر دلالي جديد تم إنشاؤه خصيصًا لتجميع الروابط الأكثر أهمية فيه وتجميعها معًا.

يمكنك وضع قائمة أو مجرد مجموعة من الروابط في التنقل. يبدو لي أن هذا حل أبسط وأكثر صحة، على الرغم من أنه في العديد من القوالب، لا يزال بإمكانك رؤية تنفيذ القائمة باستخدام علامات ul، li، a.

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

كيفية عمل قائمة أفقية باستخدام html5

بيت خدمات جهات الاتصال التعليقات

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

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

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

العرض محجوب؛

الآن ينتقلون من الأعلى إلى الأسفل، أي أن التنقل لدينا أصبح عموديًا. لتحويله مرة أخرى إلى الوضع الأفقي، تحتاج إلى إضافة خصائص معينة. على سبيل المثال، بدلاً من نوع الكتلة، حدد نوع خط الكتلة لها، أو أعطها (تعويم: يسار). اقرأ المزيد عن هذه الأساليب.

الملاحة العمودية

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

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

أ (زخرفة النص: لا شيء؛ اللون: #fff؛ الحشو: 5 بكسل؛ حجم الخط: 22 بكسل؛ العرض: كتلة؛ الخلفية: تدرج خطي (إلى اليمين، rgba(96,108,136,1) 0%,rgba(63,76,107) ،1) 100%)؛ العرض: 200 بكسل؛ محاذاة النص: المركز )

زخرفة النص : لا يوجد ; اللون : #ففف؛ الحشو: 5 بكسل؛ حجم الخط: 22 بكسل؛ العرض محجوب؛ الخلفية: خطي - متدرج (إلى اليمين، rgba (96، 108، 136، 1) 0%، rgba (63، 76، 107، 1) 100%)؛ العرض: 200 بكسل؛ النص - محاذاة: المركز