في الواقع، ظهر مفهوم أبواب CSS المنزلقة منذ بضع سنوات، ولكن تم ذكره كثيرًا في السنوات الأخيرة. لكن غالبًا ما يخلط الناس بينه وبين تأثير علامة التبويب، خاصة بعض الأصدقاء المبتدئين، لذلك سأكتب شرحًا مفصلاً هنا، على أمل أن يكون مفيدًا.
وبالحديث عن ذلك، فإن الأبواب المنزلقة ليست تقنية متطورة، فهي مجرد تقنية CSS. يستخدم تداخل وانزلاق صور الخلفية لتحقيق بعض التأثيرات. الأكثر شيوعًا هو التنقل في الزاوية المستديرة، يمكننا أن نتخيل خلفيتي الزاوية المستديرة، واحدة على اليسار والأخرى على اليمين، كبابين منزلقين يمكن أن ينزلقا معًا ويتداخلا لعرض محتوى أقل، أو يمكن أن ينزلقا مقابل كل منهما أخرى مفتوحة لعرض المزيد من المحتوى، كما هو موضح أدناه:
في بعض الدروس السابقة، أحببت قص صورة الخلفية إلى جزأين، أحدهما عريض والآخر ضيق، للربط. في الواقع، صورة واحدة تكفي.
هنا، نستخدم فقط العلامتين "a" و"span". يمكن للنمط تحديد ثلاث حالات، والتي يمكن القول إنها أبسط طريقة.
| وفيما يلي المحتوى المقتبس: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>مستند بدون عنوان</title> <نمط> الجسم {حجم الخط: 12 بكسل؛} .nav {margin:0 auto; text-align:center; .nav a {display:inline-block; Margin:0 3px height:25px الخلفية:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) الجزء السفلي الأيسر بدون تكرار؛ اللون:#666؛ زخرفة النص: لا شيء؛ المؤشر: المؤشر؛} .nav aspan {display:inline-block; height:25px;line-height: 25px ; 15 بكسل؛} .nav a:hover {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) اللون العلوي الأيسر بدون تكرار:#FFF;} .nav a:hoverspan {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) أعلى اليمين بدون تكرار؛} .nav a.set {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) اللون العلوي الأيسر بدون تكرار:#FFF } .nav a.set تمتد {background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) أعلى اليمين بدون تكرار؛} </نمط> </الرأس> <الجسم> <div class="nav"> <a class="set" href="#"><span>الصفحة الرئيسية</span></a> <a href="#"><span>الفئة 1</span></a> <a href="#"><span>التصنيف</span></a> <a href="#"><span>قد يستغرق وقتًا أطول</span></a> <a href="#"><span>مرحبًا</span></a> <a href="#"><span>مدونتي</span></a> </div> </الجسم> </html> |