دعونا ننفذ فكرتنا باستخدام الأكثر عادية CSS. في المقالة التالية، إذا كنت أتذكر، سأصف نفس التأثير باستخدام مسج. لكن الآن دعونا نبدأ في تحليل هذه الطريقة. لكن أولاً، سأقترح النظر إلى ما سيحدث في النهاية:
أولا وقبل كل شيء، دعونا نكتب HTMLرمز القائمة لدينا. القائمة ستكون بسيطة. على سبيل المثال، سيحتوي على عنصرين، سيحتوي كل منهما على قائمة منسدلة تحتوي على عناصر فرعية.
أعتقد أن كل شيء واضح هنا، أبسط قائمة من مستويين. كما قلت، القائمة تحتوي على عنصرين رئيسيين، يمكنك إضافة أي عدد تريده إذا لزم الأمر. إذًا كل ما عليك فعله هو إضافة أنماط من شأنها أن تفعل كل السحر :)
#slow_nav > ul (العرض: 500px; الهامش: 25px auto 0; ) #slow_nav > ul > li( نمط القائمة: لا شيء; العرض: كتلة مضمّنة; الموضع: نسبي; الحشو:0; ) #slow_nav a(text- الديكور: لا شيء؛) #slow_nav > ul > li > a( حجم الخط: 18px; الحشو: 5px; لون الخلفية:#333; اللون:#fff; ) #slow_nav li ul( الموضع:مطلق; نمط القائمة: none; -moz-transition:max-height 0.4s خطي؛ /* end */ ) #slow_nav li:hover ul( max-height :300px; ) #slow_nav li ul li( لون الخلفية:#333; الحدود السفلية: 1px صلب #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( الحشو:5px 12px; اللون:#fff; العرض:block; ) #slow_nav li ul li :hover( لون الخلفية:#444; ) #slow_nav li ul li:first-child( هامش أعلى: 25px; الموضع: نسبي; ) #slow_nav li ul li:first-child:before( content:""; الموضع:مطلق; العرض:1px; الارتفاع:1px; الحدود:5px صلب شفاف; لون الحد السفلي:#333; اليسار:10px; الأعلى :-10 بكسل)
كود CSS ليس صغيرًا، ولكنه ليس معقدًا بطبيعته. إذا كان لديك مهارات التخطيط، يمكنك بسهولة معرفة ماذا وكيف. وسأسلط الضوء فقط على بعض النقاط المهمة.
أول شيء هو الرسوم المتحركة نفسها. الكود المطلوب موضح في التعليقات في الكود - /* هذه الأسطر ضرورية لكي تعمل الرسوم المتحركة بشكل صحيح */. لا يمكنك الحذف من، وإلا ستتوقف الرسوم المتحركة عن العمل. في هذا الجزء من الكود، قمنا مبدئيًا بتعيين الارتفاع على صفر بكسل -
الحد الأقصى للارتفاع: 0 بكسل؛وتعيين الممتلكات تجاوز: مخفي؛لإخفاء القائمة الفرعية لدينا، أي القائمة المنسدلة. بعد ذلك قمنا بإعداد خاصية عبر المتصفحات انتقال، والتي سوف تؤدي الرسوم المتحركة.
انتقال مجموعة الويب: أقصى ارتفاع 0.4 ثانية خطي؛ -انتقال moz: أقصى ارتفاع 0.4 ثانية خطي؛ الانتقال: أقصى ارتفاع 0.4 ثانية خطي؛
هنا يمكنك فقط تغيير وقت الرسوم المتحركة. تم ضبط الوقت حاليًا على 0.4 ثانية. مباشرة بعد تعيين الرسوم المتحركة، تمت إضافة خاصية لتعيين ارتفاع جديد عند المرور فوق عناصر القائمة الرئيسية:
#slow_nav li:hover ul( max-height:300px; )
هنا صورة. تم ضبط الارتفاع على حد أقصى ثابت، إذا كان ارتفاع القائمة المنسدلة أكبر، فقم بتغيير القيمة إلى قيمة أكبر. وبخلاف ذلك، سيتم قطع القائمة الخاصة بك إلى 300 بكسل في الارتفاع.
يمكن تطبيق هذه الطريقة ليس فقط على القوائم المكتوبة ذاتيًا، ولكن أيضًا على نفس القوائم الديناميكية التي يتم إنشاؤها بواسطة أنظمة إدارة المحتوى، على سبيل المثال ووردبريس. للقيام بذلك تحتاج إلى تعديل الأنماط قليلاً وهذا كل شيء. أي أنك لا تحتاج إلى استخدام كود HTML الأول، بل تحتاج فقط إلى استخدام الأنماط. في الأنماط، تحتاج إلى استبدال اسم المعرف #slow_nav بما لديك، وربما تصحيح بعض الأشياء الصغيرة الأخرى. لن أخوض في التفاصيل. كل حالة تتطلب نهجًا شخصيًا، لذا معذرةً :) لقد قدمت فكرة وطريقة، والأمر متروك لك لتقرر استخدامهما أم لا.
هذا كل شيء، شكرا لاهتمامكم. 🙂
تحيات! إذا كنت مصمم تخطيط مبتدئًا، فستواجه عاجلاً أم آجلاً حقيقة أنك تريد إحياء صفحاتك بطريقة أو بأخرى، وجعلها تفاعلية قليلاً على الأقل. يمكن أن تساعدك الرسوم المتحركة CSS بأفضل طريقة ممكنة هنا. ولكن عليك أن تعرف أين وكيف تستخدمها.
اليوم سأخبرك كيفية جعل القائمة المنسدلة على فارغةCSSو كيفية إضافة نعومة إليهاباستخدام الرسوم المتحركة CSS. إذا كنت لا تعرف، فقد حان الوقت للتعرف على الأساسيات.
قائمة التخطيط HTML + CSS
أولاً، حتى يكون لدينا شيء نعمل عليه، فلنقم بإنشاء قائمة بسيطة ذات مستوى واحد. دعونا لا نهتم كثيرًا بالتصميم، من أجل الوضوح، سيكون هذا كافيًا:
ماذا لدينا؟ القائمة غير المرقمة الأكثر شيوعًا التي تحتوي على المعرف "top_menu" ومع روابط ملفوفة في عناصر هذه القائمة بالذات. كل شيء عادي وبسيط. يتغير لون عناصر القائمة عند التمرير فوقها... جميعكم تعرفون هذا بالفعل وتفهمون كيفية القيام بذلك (آمل).
إضافة قائمة المستوى الثاني
لإنشاء قائمة متعددة المستويات، نحتاج إلى إضافة قائمة ثانية غير مرقمة داخل القائمة الأولى. أعتقد أنك مررت بهذا في مكان ما في الدروس الأولية. وأيضًا حقيقة أنه يجب إدراجها ليس فقط داخل قائمتنا، ولكن على وجه التحديد داخل عنصر القائمة، أي العلامة " لى"، مباشرةً بعد علامة الإغلاق "a".
نقوم بوضع القوائم المتداخلة بشكل نسبي تمامًا مع " لى"، والتي تم تضمينها فيها. وهذا كل شيء لى» يتم وضع المستوى الأعلى بالنسبة إلى ( نسبي). لكي يتم تحديد موقع القائمة المنسدلة فورًا بعد قائمة المستوى الأعلى لدينا، فهي (القائمة المنسدلة - " Inner_menu"يجب تحديدها
الموقف: مطلق؛ أعلى: 100%؛
أي أن الإزاحة من الحد العلوي للأصل ستكون مساوية لارتفاع الأصل. منطقي جدا، في رأيي.
بالإضافة إلى تحديد الموضع، تحتاج إلى تصميم القائمة المنسدلة مثل قائمة المستوى الأعلى. تفاحة من شجرة تفاح كما يقولون...
كما ترون، لا تبدو القائمة المنسدلة لدينا منسدلة بعد، ولكنها سقطت ومعلقة. لكن لا بأس، سنصلح ذلك قريبًا.
كيفية جعل القائمة المنسدلة حقا المنسدلة
لا شيء يمكن أن يكون أسهل! لجعل قائمتنا المتداخلة قائمة منسدلة، ما عليك سوى إخفاءها! ثم يتم فتحه فقط عندما يتحرك مؤشر الماوس فوق عنصر القائمة ذي المستوى الأعلى، والذي يحتوي على قائمة منسدلة. قد يبدو الأمر معقدًا بعض الشيء، ولكن في الواقع يمكن حله في بضعة أسطر فقط من التعليمات البرمجية.
أضف إلى القائمة المنسدلة:
العرض: لا يوجد؛
ولعرضه عليك أن تكتب:
#top_menu > li:hover > ul ( العرض: block; )
ماذا تخبرنا هذه المجموعة الكاملة من المحددات؟ نقرأ من النهاية. نقوم بتعيين أنماط (الرؤية) لقائمة المستوى الثاني، والتي تقع داخل عنصر قائمة المستوى الأول، ولكن هذه الأنماط لن تعمل إلا إذا قمنا بالتمرير فوق العنصر "li" الذي يحتوي على قائمة المستوى الثاني لدينا.
آمل أن أكون قد أوضحت نفسي. إذا لم يكن الأمر كذلك، حاول قراءتها عدة مرات. والأفضل من ذلك، فقط افهمه من خلال النظر إلى الكود. دعونا نرى ما حصلنا عليه:
نعم، يبدو أننا حققنا ما أردناه - لقد أنشأنا قائمة منسدلة، قائمة منسدلة حقيقية، أيها الوغد! لكنه يفتقد شيئا. هل تعرف ماذا؟ نعومة! بعد كل شيء، يبدو كل شيء كما لو أن القائمة لا تسقط، ولكن تظهر ببساطة. وبشكل حاد جدًا، وحتى على الفور، أود أن أقول.
حسنا، دعونا نعمل المزيد من السحر عليه.
القائمة المنسدلة السلسة أصبحت سهلة
لذلك دعونا ننشئ قائمة منسدلة سلسة باستخدام CSS خالصًا. لماذا تفعل هذا؟ لأن الناس يحبون ذلك عندما يكون كل شيء سلسًا وناعمًا... ويبدو جميلًا. ستكون ميزة إضافية لسهولة استخدام موقعك. دعنا نذهب!
تذكر أنه يمكنك فقط تحريك القيم الرياضية الدقيقة، مثل 50 بكسل و300 بكسل، و0 و100%، و0.5 و1.0، وما إلى ذلك. في حالتنا، لن نتمكن من تحريك الحالتين في القائمة المنسدلة ( العرض: لا شيء؛و عرض:كتلة؛).
ولكن يمكننا استبدالها بالشفافية - العتامة:0 والعتامة:1. وقم بتعيين الوقت الذي ستظهر فيه قائمتنا من حالة شفافة. نعم، سينجح الأمر بالفعل، لكنه ليس التأثير الذي توقعته تمامًا. لذلك دعونا نجعل الأمر أكثر تعقيدًا بعض الشيء. لكن الأمر يستحق ذلك، صدقوني.
لجعل الرسوم المتحركة أكثر سلاسة وقابلية للتنبؤ بها، كان علينا تعيين ارتفاع ثابت لعناصر القائمة المنسدلة، على الرغم من أنه كان بإمكاننا القيام بذلك بدون ذلك. هناك الكثير من الطرق، فقط قم بالتوصل إلى مجموعات وحل المشكلات.
كما ترون من الكود، قمنا بتحريك ارتفاع عناصر القائمة المنسدلة وشفافيتها. كان هذا كافيًا لإنشاء رسوم متحركة جميلة وسلسة للقائمة المنسدلة.
ماذا نحتاج للرسوم المتحركة؟ حالتان من عناصر القائمة لدينا، بالإضافة إلى خاصية الانتقال، التي تحرف هذه الحالات، أي تملأ جميع القيم المتوسطة في الفترة الزمنية المخصصة. هذا كل شيء!
قد يكون من الأسهل القيام بذلك باستخدام jQuery، لكننا ذكرنا أولاً أننا سنعمل اليوم باستخدام CSS خالصًا. يمكنك جعله أكثر جمالا بإضافة منحنيات بيزييه إلى الرسوم المتحركة، ولكن هذا الموضوع هو خارج نطاق اليوم قليلا. ولكننا حتما سنعود إليها لاحقا.
خاتمة:
يمكنك الآن أن تظهر لأصدقائك وعائلتك أنك تعرف كيفية إنشاء قائمة منسدلة باستخدام CSS خالصًا. هذه مهارة مفيدة حقًا وستكون مفيدة أكثر من مرة. حسنًا، احكم بنفسك، كم عدد المواقع التي شاهدتها بقائمة ثابتة؟ لا، تحتوي معظم المواقع على قائمة منسدلة.
بالمناسبة، كان هذا أول درس لي في CSS. وصف كيف تريد ذلك؟ هل شرحت كل شيء بوضوح أم أنك بحاجة إلى شرحه بمزيد من التفصيل؟ وهل يستحق الاستمرار في كتابة مقالات حول موضوع اختراق الحياة في CSS؟
شكرا لاهتمامكم ونراكم قريبا!
هل قرأت حتى النهاية؟
هل كانت هذه المقالة مفيدة؟
ليس حقيقيًا
ما الذي لم يعجبك بالضبط؟ هل المقال ناقص أم كاذب؟
اكتب في التعليقات ونعد بالتحسين!
لقد أردت منذ فترة طويلة أن أكتب مقالاً عن كيفية صنعه القائمة الفرعية في CSS. كثير من الناس يفعلون ذلك مسجومع ذلك، فقد اتضح جيدًا المبدأ الأساسي للخلق القائمة الفرعية في CSSسأذكر ذلك هنا. وبعد ذلك، بدءًا من هذه القاعدة، يمكنك تحسين القائمة الفرعية بشكل أكبر.
سأحضره على الفور كود CSS:
* أتش تي أم أل أولي (
تعويم: يسار؛
}
* أتش تي أم أل أولي (
الارتفاع: 1%؛
}
أول (
الحد السفلي: 1 بكسل صلب #000؛
نمط القائمة: لا شيء؛
الهامش: 0;
الحشو: 0؛
العرض: 100 بكسل؛
}
أولي (
الموقف: نسبي؛
}
أولي (
عرض: كتلة؛
الحدود: 1 بكسل صلب #000؛
الحد السفلي: 1 بكسل؛
الحشو: 5 بكسل؛
زخرفة النص: لا شيء؛
}
لي اول (
العرض: لا شيء؛
اليسار: 99 بكسل؛
الموقف: مطلق؛
أعلى: 0؛
}
لى: تحوم ul (
عرض: كتلة؛
}
الشيء الأكثر أهمية هنا هو المحدد " لي:تحوم ماي". في الواقع، يعرض محتويات القائمة. بشكل افتراضي، " العرض: لا يوجد"، وعندما تقوم بالتمرير فوق عنصر قائمة، تصبح القائمة الفرعية: " العرض: كتلة"، أي مرئي. هذا هو الشيء الأكثر أهمية. أيضًا في المحددين الأولين (وهما * ) قادم اختراق CSSل أي.وإلا فلن يعمل شيء في هذا المتصفح بدونه. كل شيء آخر هو المظهر، والذي، بالطبع، يمكن تغييره.
احضر و كود HTML:
بيت
القائمة 1
القائمة الفرعية 1
القائمة الفرعية 2
القائمة الفرعية 3
القائمة 2
القائمة الفرعية4
القائمة الفرعية 5
القائمة الفرعية 6
القائمة الفرعية7
القائمة الفرعية 8
إذا فكرت مليًا في هذا الهيكل، يصبح كل شيء واضحًا جدًا. علامة ماي- إنشاء القائمة. لو مايهو داخل آخر ماي، فهذه بالفعل قائمة فرعية. علامة لىمسؤول عن عنصر قائمة محدد.
بالطبع القائمة هي الأبسط سواء من حيث المنطق أو الهيكل أو من حيث التصميم. وبطبيعة الحال، يمكنك استخدام مسجقم بفتح سلس. يمكنك أيضًا تغيير التصميم، لكن المبدأ بأكمله سيبقى كما هو في هذا القائمة الفرعية مكتوبة في CSS وHTML.
أهلاً بكم. سنواصل اليوم موضوعنا عن القوائم المنسدلة ونتحدث عن كيفية القيام بذلك. كالعادة، سيكون وضع العرض التجريبي متاحًا لكل مثال، بالإضافة إلى ملفات للتنزيل.
إذا أتيت إلى هذا الموقع بالصدفة أو كنت تبحث عن موقع آخر، أنصحك باتباع الرابط، فهناك العديد من القوائم المختلفة للموقع.
هناك الكثير من القوائم الرأسية لمواقع الويب، سأعرض لك في هذا البرنامج التعليمي قائمة منسدلة رأسية فقط في CSS عند التمرير مع قائمة منسدلة على اليمين واليسار، بالإضافة إلى قوائم منسدلة متعددة المستويات . سيتم وصف الخيارات الأخرى للقوائم الرأسية للموقع في الدروس التالية. وهكذا سوف نتجاوز.
التنقل في الصفحة:
كمقدمة، أعتقد أنه من المفيد معرفة كيفية عمل المتسربين في CSS.
جميع المتصفحات التي تعمل من جهاز كمبيوتر شخصي أو كمبيوتر محمول تتوفر بها خاصية CSS :تحوم(أنا مخطئ بعض الشيء هنا، هذه فئة زائفة :) والتي على أساسها يمكنك إنشاء أي قائمة منسدلة رأسية تقريبًا.
ولكن ماذا تفعل مع متصفحات الجوال؟ - أو على الأجهزة اللوحية التي تطلبها.
لحسن الحظ، قدم مطورو متصفحات الأجهزة المحمولة (للأسف ليس في كل مكان) القدرة على تشغيل الفئة الزائفة: تحوم عند النقر الأول على الرابط، إذا تم وصفه في CSS. بفضل هذه الجهود، سيتمكن معظم المستخدمين من رؤية القائمة المنسدلة العمودية الخاصة بـ CSS.
بضع كلمات حول فوائد القوائم المنسدلة:
- يمكنك وضع قوائم طويلة جدًا في مساحة محدودة؛
- يصبح التصميم أكثر أناقة.
- العوامل السلوكية تتحسن جزئيا.
القائمة المنسدلة العمودية إلى اليمين
أقدم انتباهكم إلى المثال الأول: قائمة منسدلة رأسية بسيطة على اليمين عند التمرير.
سنبدأ بكتابة القائمة باستخدام كود html ونجعلها عالمية للقوائم، خيار الإجابة مطابق لما يعرضه WordPress.
أتش تي أم أل للقائمة العمودية
أعتقد أنه فيما يتعلق بفهم HTML، لن تواجه أي صعوبات، فالقوائم النموذجية تحتوي على علامتي ul وli. دعونا نلقي نظرة على الكود:
قائمة موقع تعتمد على القوائم: تحتوي بعض العناصر على كتل منسدلة، والبعض الآخر لا يحتوي عليها. كل شيء بسيط للغاية، وأعتقد أنه ليس هناك حاجة إلى تفسير.
القائمة المنسدلة العمودية CSS
مع أنماط CSS، تكون المشكلة أكثر تعقيدًا بعض الشيء. سأعرض لك كود القائمة نفسها فقط، ويمكنك رؤية بقية الأنماط عند تنزيل المثال.
#menuVertical(width:100%;height:auto;) #menuVertical ul(display:block; width:100%; height:auto; Margin:0px; padding:0px; list-style:none; Position:relative; ) # MenuVertical ul li (العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ الموضع: نسبي؛) #menuVertical ul li a (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ تحجيم الصندوق: حدود -box حجم الخط: 13 بكسل ؛ حجم الخط: غامق ؛ ارتفاع الخط: 10 بكسل 15 بكسل ؛ ;) #menuVertical ul li a:hover، #menuVertical ul li:hover a( الخلفية:#0A3CC1; ) #menuVertical ul li ul(position:absolute; top:0px; left:100%;display:none; width:auto ); تحويل النص: لا شيء؛ الحشو: 5 بكسل 20 بكسل) #menuVertical ul li ul li a:hover(background:#75C1D4;
اللون: #0A3CC1؛
)
هنا هذا السطر من CSS
#menuVertical ul li:hover ul(display:block;)
المسؤول عن السقوط. يظهر كتلة منسدلة عند التمرير. هناك حاجة إلى الأنماط المتبقية لتصميم القائمة نفسها، بالإضافة إلى الموضع الصحيح للقوائم/عناصر القائمة.
ويمكنك أن ترى ما حصلنا عليه في هذا المثال على الجلد:
يمكنك معرفة كيفية عمل قائمة CSS المنسدلة العمودية في الوضع التجريبي أدناه، أو عن طريق تنزيل مثال:
فيما يلي مثال بسيط لقائمة منسدلة توصلت إليها.
لنفترض أنك بحاجة إلى إنشاء قائمة منسدلة عند التمرير باستخدام القائمة المنسدلة اليسرى. بناءً على مثال الهبوط إلى اليمين، سنقوم الآن بتنفيذه.
القائمة المنسدلة العمودية اليسرى في CSS
نترك رمز HTML كما هو، فلا فائدة من تغييره. ما لم يكن في المثال نفسه، سأضطر إلى تبديل الكتل اليمنى واليسرى، من أجل وضوح المثال. (سترى من خلال تنزيل المثال في النهاية)
#menuVertical(width:100%;height:auto;) #menuVertical ul(display:block; width:100%; height:auto; Margin:0px; padding:0px; list-style:none; Position:relative; ) # MenuVertical ul li (العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ الموضع: نسبي؛) #menuVertical ul li a (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ تحجيم الصندوق: حدود -box حجم الخط: 13 بكسل ؛ حجم الخط: غامق ؛ ارتفاع الخط: 10 بكسل 15 بكسل ؛ ;) #menuVertical ul li a:hover، #menuVertical ul li:hover a( الخلفية:#0A3CC1; ) #menuVertical ul li ul(position:absolute; top:0px; right:100%;/*تم التغيير هنا*/ العرض :none; width:auto;) /*********إظهار القائمة المنسدلة عند التمرير ******** / #menuVertical ul li:hover ul(display:block;) #menuVertical ul li ul li a ( مسافة بيضاء:nowrap; تحويل النص: لا شيء; الحشو: 5 بكسل 20 بكسل; ) #menuVertical ul li ul li a:hover( الخلفية:#75C1D4;
اللون: #0A3CC1؛
)
هذا كل شيء. لقد انتهى الأمر بهذه القائمة. على اليسار يوجد مظهر قابل للنقر، وعلى اليمين يوجد عرض توضيحي ورابط لتنزيل المثال:
قائمة عمودية متعددة المستويات
نهاية التسرب
#menuVertical(width:100%;height:auto;) #menuVertical ul(display:block; width:100%; height:auto; Margin:0px; padding:0px; list-style:none; Position:relative; ) # MenuVertical ul li (العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ الموضع: نسبي؛) #menuVertical ul li a (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ تحجيم الصندوق: حدود -box حجم الخط: 13 بكسل؛ وزن الخط: غامق؛ ارتفاع الخط: 10 بكسل 15 بكسل؛ :0px;) #menuVertical ul li a:hover، #menuVertical ul li:hover a( الخلفية:#0A3CC1;) #menuVertical ul li ul(position:absolute; top:0px; left:100%;display:none; width :150px;) /*********إظهار القائمة المنسدلة عند التمرير*********/ #menuVertical ul li:hover > ul(display:block;) #menuVertical ul li ul li a(تحويل النص) :none;
اللون: #0A3CC1؛
)
هذه هي الأنماط لإنشاء قائمة منسدلة عمودية متعددة المستويات على اليمين عند التمرير. سيكون الخيار مع الانخفاض إلى اليسار أبعد قليلاً. دعونا نرى أدناه ما حصلنا عليه في الصورة (الجلد القابل للنقر).
يمكن إنشاؤه بدون JavaScript و/أو jQuery. لإنشائه، استخدم عرض خصائص CSS، والحشو، والفئة الزائفة: التحويم. من الممكن إنشاء قائمة عمل (انقر فوق "Fork" إذا كنت تريد تصميم قائمة HTML بطريقتك الخاصة). طول الفيديو ~ 12 دقيقة. هذه المذكرة مخصصة لمصممي التخطيط المبتدئين ومطوري الويب الذين يتخذون خطواتهم الأولى لتعلم أساسيات HTML وCSS؛ لمن درس دورة "أساسيات HTML5 وCSS3".إنشاء قائمة منسدلة بسيطة لإنشاء القائمةو يستخدم الموقع عادة بنية الكتلةعنصر التنقل HTML
قائمة غير مرقمة . في أحد عناصر القائمة، يتم تضمين قائمة أخرى بحيث لا يتم تضمينها في الارتباط التشعبي. سيكون من الممكن وضع ul داخل a، لكن في رأيي هذه ليست فكرة جيدة جدًا، لأن الفئة الزائفة:hover تعمل مع عناصر li أيضًا!في حالتنا، نحن لا نعتبر الخيار متى
لتسهيل العمل مع العلامات (فجأة سنواجه تنقلًا آخر)، سنضيف فئة CSS إلى عنصر التنقل الهيكلي الخاص بنا؛ سنقوم بإنشاء بذرة للارتباطات التشعبية، ولكن يمكنك كتابة http://site بدلاً من # :)
ترميز HTML لقائمة تحتوي على قائمة فرعية منسدلة
الشيء الرئيسي في CSS: مسح القيم الافتراضية لعناصر HTML المدرجة في القائمة؛ إخفاء القائمة الفرعية المنسدلة المستقبلية ( القائمة الفرعية) وعرضه عند المرور فوق عنصر HTML الأصلي - باستخدام الفئة الزائفة:hover
قواعد CSS لقائمة منسدلة.menu ul li( الحشو: 10px; ) .menu ul > li:hover( لون الخلفية: #f96; ) .menu ul ul > li:hover( لون الخلفية: #69e; ) . القائمة ul li، .menu ul (العرض: كتلة مضمّنة؛ ) .menu ul (الموضع: نسبي؛ الهامش: 0؛ الحشو: 0؛ لون الخلفية: #f63؛) .menu ul (العرض: لا شيء؛ الموضع: لون الخلفية المطلق: #369؛ الهامش العلوي: 10 بكسل؛ الهامش الأيسر: -10 بكسل) .menu ul a( color: #fff; text-decoration: none; ) .menu ul a( color: #fff ; text -الزخرفة: لا شيء؛) .menu li:hover ul(display: block;) .menu li:hover li(display: block;)
القائمة التي تم إنشاؤها ليست مثالية ويمكن تحسينها (فكر في الطريقة). حظًا موفقًا في تطويرك وقد لا يكون إنشاء مثل هذه القوائم أمرًا صعبًا أبدًا!
تحميل...