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

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

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

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

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

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

< 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 بحيث تكون القائمة الفرعية في نفس مستوى العنصر الذي يتوافق معها.

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

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

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

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

مثال على القائمة المركزية

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

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

ترميز HTML

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

رمز CSS للقائمة المركزية

يوجد أدناه رمز CSS الكامل المستخدم لتوسيط القائمة. سيتم تقديم شرح لمبدأ التشغيل لاحقًا في الدرس.

#centeredmenu ( تعويم: يسار؛ العرض: 100%؛ الخلفية: #fff؛ الحد السفلي: 4 بكسل صلب #000؛ الفائض: مخفي؛ الموضع: نسبي؛ ) #centeredmenu ul ( واضح: يسار؛ تعويم: يسار؛ نمط القائمة :none; 3px 10px; الخلفية:#ddd; اللون:#000; a.active، #centeredmenu ul li a.active:hover ( color:# fff; الخلفية:#000;

كيف تعمل طريقة التمركز؟

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

عنصر شعبة(الكتلة) بدون إزاحة تمتد إلى كامل العرض المتاح لها.

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

القائمة القياسية المحاذية لليسار

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

يرجى ملاحظة النقاط التالية:

• عنصر شعبة القائمة المركزية(المستطيل الأزرق) تمت إزاحته إلى اليسار، ولكن بعرض 100%، لذا يظل ممتدًا عبر الصفحة بأكملها.
• عنصر ماي(المستطيل الوردي) موجود داخل العنصر com.centermenu شعبةويتحرك إلى اليسار. وهذا يعني أنه سيتم ضغطه إلى عرض محتواه، أي إلى العرض الإجمالي لجميع الإشارات المرجعية.
• جميع عناصر li (المستطيلات الخضراء) موجودة داخل العنصر مايوالانتقال إلى اليسار. وبالتالي، يتم ضغطها بحجم الروابط الموجودة بها وتصطف في خط أفقي واحد.
• داخل كل رابط (مستطيلات برتقالية) يتم عرض نص الإشارة المرجعية: الإشارة المرجعية 1، الإشارة المرجعية 2، وهكذا.

تغيير موضع القائمة غير المرتبة

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

قم بتغيير موضع جميع عناصر القائمة

كل ما تبقى هو تحريك جميع العناصر لىاليسار بنسبة 50٪. يمثل هذا 50% من عرض عنصر ul (الحاوية التي تحتوي على القائمة). وبالتالي، يتم نقل الإشارات المرجعية بالضبط إلى وسط النافذة.

بعض الملاحظات المهمة

عند استخدام طريقة التوسيط هذه، هناك عدة نقاط مهمة يجب تذكرها:

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

خاتمة

الحل المقترح متوافق مع جميع المتصفحات، ولا يستخدم JavaScript، ويدعم النص الذي يمكن تغيير حجمه.

من المؤلف:أرحب بكم في مدونتنا حول بناء المواقع. هذه سلسلة من المقالات المخصصة للمواصفات الجديدة واليوم أود أن أخبركم بكيفية إنشاء قائمة في 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 بكسل؛ النص - محاذاة: المركز

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

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 "فرش الألوان المائية".

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

لذلك، دعونا نبدأ. لنقم بإنشاء قائمة بأسماء قائمتنا. لتكن أسماء العناصر: "الصفحة الرئيسية"، "الأخبار"، "المنتجات"، "الخدمات"، "الشركاء"، "جهات الاتصال". قم بإنشاء ملف جديد يسمى Menu.html، على سبيل المثال، باستخدام برنامج Dreamweawer أو باستخدام المفكرة العادية. في ذلك، بين علامات الجسم نضع قائمتنا. هذه قائمة نقطية عادية لـ ul مع عناصر li. بالطبع، نجعل كل عنصر في القائمة رابطًا، حيث نقوم بإدخال علامة التجزئة # بدلاً من عنوان URL. باستخدام Photoshop، قم بإنشاء صورة بحجم 3x30 بكسل، مع تعبئة متدرجة كما هو موضح في الشكل أدناه. سنقوم بحفظ الملف بتنسيق GIF. دعنا نسميها bg.gif. ستكون هذه الصورة بمثابة صورة خلفية لقائمتنا.

فيما يلي محتويات ملف Menu.html:

• بيت
• أخبار
• منتجات
• خدمات
• الشركاء
• جهات الاتصال

الآن لنقم بإنشاء ملف نمط يسمى main.css بشكل منفصل. وتظهر قائمتها بالكامل أدناه.

Ul ( هامش:0; /*حشوة صفر*/ الحشو:0; /*حشوة صفر*/ float:left; /*محاذاة القائمة إلى اليسار*/ width:auto;/*ضبط عرض تلقائي بناءً على نوع القائمة ومحتوياتها */ صورة الخلفية: url(bg.gif); /*ضبط صورة الخلفية*/ خلفية-تكرار:تكرار-x;/*تكرار صورتنا أفقيًا*/ نمط القائمة:لا شيء; /*إزالة علامات القائمة*/ لون الخلفية:#4778c3; /*ضبط لون الخلفية للصورة*/ حجم الخط:13px; /*ضبط الخط*/ ) ul li ( float:left; /*محاذاة عناصر القائمة إلى اليسار*/ ) ul a (display:block; /*تمثيل روابط القائمة كعناصر كتلة*/ width:100px; /* ضبط حجم الكتلة*/ الارتفاع: 30 بكسل; /* وارتفاع الكتلة*/ text-align:center /*centered text*/ line-height: 2.1em; إزالة التسطير من الروابط*/ color:#fff /*لون نص الرابط - أبيض*/ border-right:#fff Solid 1px /*border على الجانب الأيمن من الكتلة (1px خط أبيض)*/ ) ul a: تحوم (اللون:#ccc؛ /*يتغير لون الرابط عند المرور فوقه*/ )

أعتقد أنه لا ينبغي أن يكون هناك أي أسئلة حول محتويات ملف main.css؛ لقد كتبت النصائح في التعليقات بتفاصيل كافية وواضحة، لذلك لن أكرر نفسي. لا تنس توصيله بصفحة Menu.html الخاصة بنا باستخدام

لخص. نتيجة لذلك، حصلنا على قائمة أفقية عبر المتصفحات بالكامل، والتي تبدو متشابهة ليس فقط في جميع المتصفحات الحديثة، ولكن أيضًا في حالات نادرة مثل IE 5.5 و IE 6.0. يتم تقديم جميع عناصر القائمة كعناصر كتلة ولها نفس الأبعاد وهي 100 بكسل عرض و30 بكسل ارتفاع. كفاصل لعناصر القائمة، يتم استخدام تصميم عنصر الكتلة باستخدام حد أبيض أيمن بسمك 1 بكسل. هذه هي أبسط طريقة لتنفيذ القائمة الأفقية. بالطبع، إذا كنت ترغب في ذلك، يمكنك تعديله وجعله أكثر جمالًا وعمليًا باستخدام خيالك وخصائص CSS والعناصر الرسومية الإضافية. حسنا و قائمتنا الأفقيةيبدو مثل هذا:

إيجابيات هذا الحل:
سهل الفعل
رمز بسيط
لا توجد جداول أو جافا سكريبت
التوافق عبر المتصفحات: تبدو القائمة متشابهة في جميع المتصفحات
يتم استخدام رسم واحد فقط
الحد الأدنى من التعليمات البرمجية في صفحة Menu.html
الحد الأدنى من التعليمات البرمجية لتنفيذ الأنماط في main.css

يمكن تنزيل الملفات المستخدمة في هذا المثال في الأرشيف