كيفية عمل شريط التنقل في html. СSS شريط التنقل

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

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

كيفية عمل قائمة أفقية: أمثلة على الترميز والتصميم

ترميز HTML والأنماط الأساسية لقائمة أفقية

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

ترميز HTML للتنقل الأفقي

• عنصر القائمة
• عنصر القائمة
• عنصر القائمة
...

يمكن وضع قائمة أفقية داخل علامة اختياريا داخل عنصر

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

هناك عدة طرق لوضعهم. أفقيا... أولاً ، تحتاج إلى إعادة تعيين أنماط المتصفح الافتراضية لعناصر التنقل:

Ul (list-style: none؛ / * إزالة علامات القائمة * / margin: 0؛ / * إزالة الهامش العلوي والسفلي يساوي 1em * / padding-left: 0 ؛ / * إزالة الهامش الأيسر الذي يساوي 40 بكسل * /) أ ( زخرفة النص: لا شيء ؛ / * إزالة تسطير نص الرابط * /)

الطريقة 1.li (عرض: مضمنة ؛)

نجعل عناصر القائمة صغيرة. نتيجة لذلك ، يتم وضعها أفقيًا ، على الجانب الأيمن بينهما تتم إضافة فجوة تساوي 0.4em (محسوبة بالنسبة لحجم الخط). لإزالته ، أضف هامشًا أيمنًا سلبيًا li (margin-right: -4px ؛) لـ li. بعد ذلك ، سنقوم بتصميم الروابط كما نرغب.

الطريقة 2.li (تعويم: يسار ؛)

عائم عناصر القائمة. نتيجة لذلك ، يتم وضعها أفقيًا. يصبح ارتفاع كتلة الحاوية ul صفرًا. لحل هذه المشكلة ، نضيف (overflow: hidden ؛) إلى ul ، ونوسعها وبالتالي نسمح لها باحتواء عناصر عائمة. بالنسبة للروابط ، أضف (display: block ؛) وقم بتصميمها كما يحلو لك.

الطريقة 3.li (العرض: كتلة مضمنة ؛)

نجعل عناصر القائمة مضمنة. تقع أفقياً ، يتم تشكيل فجوة على الجانب الأيمن ، كما في الحالة الأولى. بالنسبة للروابط ، أضف (display: block ؛) وقم بتصميمها كما يحلو لك.

الطريقة 4.ul (العرض: المرن ؛)

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

1. قائمة متجاوبة مع تأثير تسطير عند التمرير فوق ارتباط

• عمل
• عن
• مدونة او مذكرة
• اتصل
import url ("https://fonts.googleapis.com/css؟family=Ubuntu+Condensed") ؛ .menu-main (list-style: none؛ margin: 40px 0 5px؛ padding: 25px 0 5px؛ text-align: center؛ background: white؛) .menu-main li (display: inline-block؛) .menu- main li: after (content: "|"؛ color: # 606060؛ display: inline-block؛ vertical-align: top؛) .menu-main li: last-child: after (content: none؛) .menu-main أ (زخرفة النص: لا شيء ؛ مجموعة الخطوط: "Ubuntu Condensed" ، sans-serif ؛ تباعد الأحرف: 2 بكسل ؛ الموضع: نسبي ؛ المساحة السفلية: 20 بكسل ؛ الهامش: 0 34 بكسل 0 30 بكسل ؛ حجم الخط: 17 بكسل ؛ تحويل النص: أحرف كبيرة ؛ عرض: كتلة مضمنة ؛ انتقال: اللون. 2 ثانية ؛). القائمة الرئيسية أ ،. القائمة الرئيسية أ: تمت زيارتها (اللون: # 9d999d ؛). القائمة الرئيسية أ.حالي ،. القائمة- main a: hover (color: # feb386؛). menu-main a: before،. menu-main a: after (content: ""؛ position: due؛ height: 4px؛ top: auto؛ right: 50٪؛ bottom : -5 بكسل ؛ يسار: 50٪ ؛ الخلفية: # feb386 ؛ انتقال: .8 ثانية ؛). القائمة الرئيسية أ: تحوم: قبل ،. القائمة الرئيسية. الحالية: قبل (يسار: 0 ؛). القائمة الرئيسية أ: hover: after، .menu-main .current: after (right: 0؛ )media (max-width: 550px) (.menu-main (padding-top: 0؛) .menu-main li (display: block؛). menu-main li: after (content: none؛) .menu- الرئيسي أ (الحشو: 25 بكسل 0 20 بكسل ؛ الهامش: 0 30 بكسل ؛ ))

2. قائمة مستجيبة لموقع الزفاف

import url ("https://fonts.googleapis.com/css؟family=PT+Sans") ؛ .top-menu (position: النسبي ؛ الخلفية: #fff ؛ box-shadow: inset 0 0 10px #ccc؛) .top-menu: before، .top-menu: after (content: ""؛ display: block؛ height : 1 بكسل ؛ الحد الأعلى: 3 بكسل صلب # 575350 ؛ الحد السفلي: 1 بكسل صلب # 575350 ؛ الهامش السفلي: 2 بكسل ؛) أعلى القائمة: بعد (الحد السفلي: 3 بكسل صلب # 575350 ؛ الحد العلوي: 1 بكسل صلب # 575350؛ box-shadow: 0 2px 7px #ccc؛ margin-top: 2px؛). menu-main (list-style: none؛ padding: 0 30px؛ margin: 0؛ font-size: 18px؛ text-align: المركز ؛ الموضع: نسبي ؛). القائمة الرئيسية: قبل ،. القائمة الرئيسية: بعد (المحتوى: "25C8" ؛ ارتفاع السطر: 1 ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ التحويل: translateY (-50٪ ) ؛). menu-main: before (left: 15px؛). menu-main: after (right: 15px؛). menu-main li (display: inline-block؛ padding: 5px 0؛). (زخرفة النص: لا شيء ؛ العرض: كتلة مضمنة ؛ الهامش: 2 بكسل 5 بكسل ؛ المساحة المتروكة: 6 بكسل 15 بكسل ؛ مجموعة الخطوط: "PT Sans" ، sans-serif ؛ حجم الخط: 16 بكسل ؛ اللون: # 777777 ؛ الحد السفلي : 1 بكسل شفافة صلبة ؛ العبور n: .3s خطي ؛ ). menu-main .current، .menu-main a: hover (border-radius: 3px؛ background: # f3ece1؛ color: # 313131؛ text-shadow: 0 1px 0 #fff؛ border-color: # c6c6c6؛) media (أقصى عرض: 500 بكسل) (.menu-main li (عرض: كتلة ؛))

3. القائمة التكيفية مع الأسقلوب

• عمل
• عن
• مدونة او مذكرة
• اتصل
import url ("https://fonts.googleapis.com/css؟family=PT+Sans+Caption") ؛ .menu-main (نمط القائمة: لا شيء ؛ المساحة المتروكة: 0 30 بكسل ؛ الهامش: 0 ؛ حجم الخط: 18 بكسل ؛ محاذاة النص: المركز ؛ الموضع: نسبي ؛ الخلفية: أبيض ؛). القائمة الرئيسية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ العرض: 100٪ ؛ الارتفاع: 20 بكسل ؛ اليسار: 0 ؛ الأسفل: -20 بكسل ؛ الخلفية: التدرج الشعاعي (أبيض 0٪ ، أبيض 70٪ ، rgba (255،255،255،0) 70٪ ، rgba ( 255،255،255،0) 100٪) 0-10 بكسل ؛ حجم الخلفية: 20 بكسل 20 بكسل ؛ تكرار الخلفية: تكرار x ؛). القائمة الرئيسية لي (عرض: كتلة مضمنة ؛). القائمة الرئيسية أ (زخرفة النص: بلا ؛ عرض: كتلة مضمنة ؛ الهامش: 0 15 بكسل ؛ المساحة المتروكة: 10 بكسل 30 بكسل ؛ عائلة الخطوط: "PT Sans Caption" ، sans-serif ؛ اللون: # 777777 ؛ الانتقال: .3s خطي ؛ الموضع: نسبي ؛). القائمة -main a: before، .menu-main a: after (content: ""؛ position: due: top: calc (50٪ - 3px)؛ width: 6px؛ height: 6px؛ border-radius: 50٪؛ background: # F58262 ؛ العتامة: 0 ؛ الانتقال: .5s easy-in-out ؛). القائمة الرئيسية أ: قبل (يسار: 5 بكسل ؛). القائمة الرئيسية أ: بعد (يمين: 5 بكسل ؛). الحالي: قبل. menu-main a.cur الإيجار: بعد ، .menu-main a: hover: before، .menu-main a: hover: after (opacity: 1؛). menu-main a.current، .menu-main a: hover (color: # F58262؛ )media (max-width: 680px) (.menu-main li (display: block؛))

4. قائمة الاستجابة على الشريط

import url ("https://fonts.googleapis.com/css؟family=PT+Sans+Caption") ؛ .top-menu (margin: 0 60px ؛ الموضع: نسبي ؛ الخلفية: # 5A394E ؛ box-shadow: 1px 0 0 rgba (255،255،255، .1) ، داخلي -1 بكسل 0 0 rgba (255،255،255 ، .1) ، داخلي 150 بكسل 0 150 بكسل -150 بكسل rgba (255،255،255، .12) ، داخلي -150 بكسل 0 150 بكسل -150 بكسل rgba (255،255،255 ، .12) ؛). القائمة العلوية: قبل ،. القائمة العلوية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ z-index: 2؛ left: 0؛ width: 100٪؛ height: 3px؛). top-menu: before (top: 0؛ border-bottom: 1px متقطع rgba (255،255،255، .2)؛). menu: بعد (bottom: 0؛ border-top: 1px متقطع rgba (255،255،255، .2) ؛). menu-main (list-style: none؛ padding: 0؛ margin: 0؛ text-align: center؛). القائمة الرئيسية: قبل ، .menu-main: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ العرض: 50 بكسل ؛ الارتفاع: 0 ؛ أعلى: 8 بكسل ؛ الحد الأعلى: 18 بكسل صلب # 5A394E ؛ الحد السفلي: 18 بكسل صلب # 5A394E ؛ تحويل: استدارة (360 درجة) ؛ z-index: -1 ؛). menu-main: before (left: -30px؛ border-left: 12px solid rgba (255، 255، 255، 0)؛). menu- رئيسي: بعد (يمين: -30 بكسل ؛ حد يمين: 12 بكسل صلب rgba (2 55 ، 255 ، 255 ، 0) ؛ ) .menu-main li (display: inline-block؛ margin-right: -4px؛). menu-main a (text-decoration: none؛ display: inline-block؛ padding: 15px 30px؛ font-family: "PT Sans Caption "، sans-serif ؛ اللون: أبيض ؛ الانتقال: .3s خطي ؛). القائمة الرئيسية a.current. القائمة الرئيسية أ: hover (الخلفية: rgba (0،0،0، .2)؛) media (max-width: 680px) (.top-menu (margin: 0؛) .menu-main li (display: block؛ margin-right: 0؛) .menu-main: before، .menu-main: after (المحتوى: لا شيء ؛). menu-main a (display: block؛))

5. قائمة متجاوبة مع شعار في المنتصف

import url ("https://fonts.googleapis.com/css؟family=Arimo") ؛ .top-menu (position: النسبي ؛ الخلفية: rgba (34،34،34، .2)؛). menu-main (list-style: none؛ margin: 0؛ padding: 0؛) .menu-main: after (content: "" ؛ عرض: جدول ؛ مسح: كلاهما ؛) .left-item (float: left؛). right-item (float: right؛) .navbar-logo (موضع: مطلق ؛ يسار: 50٪ ؛ أعلى : 50٪؛ تحويل: ترجمة (-50٪، - 50٪)؛). menu-main a (زخرفة النص: لا شيء؛ عرض: كتلة؛ ارتفاع السطر: 80 بكسل؛ مساحة الحشو: 0 20 بكسل؛ حجم الخط: 18 بكسل ؛ تباعد الأحرف: 2 بكسل ؛ عائلة الخطوط: "Arimo" ، sans-serif ؛ وزن الخط: غامق ؛ اللون: أبيض ؛ الانتقال: .3s خطي ؛). menu-main a: hover (background: rgba (0، 0،0، .3)؛)media (max-width: 830px) (.menu-main (padding-top: 90px؛ text-align: center؛) .navbar-logo (موضع: مطلق ؛ يسار: 50٪ ؛ top: 10px؛ transform: translateX (-50٪)؛) .menu-main li (float: none؛ display: inline-block؛). menu-main a (line-height: normal؛ padding: 20px 15px؛ font الحجم: 16 بكسل ؛))media (أقصى عرض: 630 بكسل) (.menu-main li (العرض: block ؛))

6. القائمة المتجاوبة مع الشعار على اليسار

import url ("https://fonts.googleapis.com/css؟family=Arimo") ؛ .top-menu (الخلفية: rgba (255،255،255، .5)؛ box-shadow: 3px 0 7px rgba (0،0،0، .3)؛ padding: 20px؛) .top-menu: after (content: "" ؛ عرض: جدول ؛ مسح: كلاهما ؛) .navbar-logo (عرض: كتلة مضمنة ؛). القائمة الرئيسية (نمط القائمة: لا شيء ؛ الهامش: 0 ؛ الحشو: 0 ؛ عائم: يمين ؛). القائمة الرئيسية li (display: inline-block؛) .menu-main a (زخرفة النص: لا شيء ؛ العرض: الكتلة ؛ الموضع: نسبي ؛ ارتفاع الخط: 61 بكسل ؛ المساحة المتروكة: 20 بكسل ؛ حجم الخط: 18 بكسل ؛ تباعد الأحرف : 2px؛ font-family: "Arimo"، sans-serif؛ font-weight: bold؛ color: # F73E24؛ Transition: .3s linear؛). menu-main a: before (content: ""؛ width: 9px؛ الارتفاع: 9 بكسل ؛ الخلفية: # F73E24 ؛ الموضع: مطلق ؛ اليسار: 50٪ ؛ التحويل: تدوير (45 درجة) translateX (6.5 بكسل) ؛ التعتيم: 0 ؛ الانتقال: .3s خطي ؛). القائمة الرئيسية أ: التمرير: قبل (عتامة: 1 ؛)media (max-width: 660px) (.menu-main (float: none؛ padding-top: 20px؛). top-list (text-align: center؛ padding: 20px 0 0 0؛ ) .menu-main a (padding: 0 10px؛). menu-main a: be الصدارة (التحويل: استدارة (45 درجة) translateX (-6px) ؛))media (max-width: 600px) (.menu-main li (display: block ؛))

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

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

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

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

#navigation (العرض: 560 بكسل ؛ الارتفاع: 50 بكسل ؛ الهامش: 0 ؛ الحشو: 0 ؛ صورة الخلفية: url (img / gor_menu.jpg) ؛ تكرار الخلفية: لا تكرار ؛ موضع الخلفية: المركز ؛) # navigation ul (list-style: none؛ margin: 0؛ padding: 0؛) # navigation ul li (display: inline؛ margin: 0px؛) #navigation ul li a (height: 28px؛ display: block؛ float: left؛ color: # 333333 ؛ زخرفة النص: لا شيء ؛ عائلة الخطوط: Arial ؛ حجم الخط: 12 بكسل ؛ وزن الخط: غامق ؛ صورة الخلفية: url (img / menu_separatorline.jpg) ؛ تكرار الخلفية: لا تكرار ؛ الخلفية- position: right center؛ padding-top: 17px؛ padding-right: 15px؛ padding-bottom: 0 ؛ padding-left: 15px ؛) # navigation ul li a: hover (color: #FFF؛ background-image: url (img /button_hover.jpg) ؛ تكرار الخلفية: تكرار x ؛ موضع الخلفية: أعلى اليسار ؛) # navigation ul li # active a (background-image: url (img / button_hover.jpg) ؛ تكرار الخلفية: تكرار x ؛ موضع الخلفية: أعلى اليسار ؛)

لا تقلق ، فلا حرج في هذا الرمز. لتوضيح الأمر بالنسبة لك ، سأكتب رمز HTML على الفور لهذه القائمة:

• الصفحة الرئيسية
• عن الموقع
• لماذا تريد موقع؟
• من المؤلف
• جهات الاتصال
• المنتدى

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

• مقدمة
• إنشاء الهيكل العظمي للموقع
• إنشاء قائمة الموقع
• تعبئة الموقع
• استخدام كتل PHP
• إنشاء قاعدة البيانات
• اختيار الاستضافة
• تصدير الموقع إلى الاستضافة

أنت الآن بحاجة إلى توضيح ما يشير قليلاً إلى ماذا ، فأعتقد أنك ستكتشف ذلك بنفسك:

...
- يحتوي على هيكل القائمة بالكامل. سيتم إدراج الصورة العلوية ، التي أعددتها مسبقًا في Photoshop ، فيها ؛



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

- يحتوي على هيكل القائمة نفسها ؛

• إنشاء قائمة الموقع
- هذه إحدى المواضع التي ستحتاج فيها إلى إدخال الارتباط الضروري في href = "#" ؛
- يحتوي على الجزء السفلي.

وهذا هو النص الموجود في ورقة أنماط CSS الخاصة بنا:

قائمة Div # (العرض: 144 بكسل ؛ الخلفية: url (img / menu_1.jpg) أعلى بدون تكرار ؛ padding-top: 40px ؛) div # menubody (الخلفية: url (img / menu_2.jpg) تكرار y ؛ padding- يسار: 15 بكسل ؛) div # menubottom (الارتفاع: 16 بكسل ؛ الخلفية: url (img / menu_4.jpg) الجزء السفلي بدون تكرار ؛) ul # menulist (العرض: 100 بكسل ؛ نوع القائمة: لا شيء ؛) ul # menulist li (الارتفاع: 32 بكسل ؛ الخلفية: url (img / menu_3.gif) أسفل تكرار x ؛) ul # menulist a (العرض: 100 بكسل ؛ الارتفاع: 25 بكسل ؛ الحد الأيسر: # 75c5de 10px صلب ؛ الخط: غامق 10 بكسل Verdana ، Arial ، sans-serif؛ color: #ffffff؛ text-decoration: none؛ padding: 5px 0 0 5px؛ display: block! important؛ display: inline-block؛) ul # menulist a: hover (background: url (img / menu_5 .jpg) ترك تكرار- y ؛ اللون: # 000) ul # menulist #active a (الخلفية: url (img / menu_5.jpg) ترك تكرار y ؛)

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

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

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

يبقى ملء صفحات موقعنا بالمحتوى ويمكننا أن نقول بأمان أن نصف المهمة قد تم إنجازها ، لكنني سأتحدث عن هذا في المقالة التالية.

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

يمكن مشاهدة مثال على قائمة هنا:

تحميل

لسوء الحظ ، تدعم Mozilla فقط انتقالات العناصر الزائفة.

جزء HTML

هيكل القائمة طبيعي - قائمة نقطية ، ولكل عنصر قائمة فئة تأثيرات:

1 2 3 4 5 6 7

<ul> <فئة li = "تأثيرات"> الصفحة الرئيسية</ أ> <فئة li = "تأثيرات"> نبذة عن الكاتب</ أ> <فئة li = "تأثيرات"> ملف</ أ> <فئة li = "تأثيرات"> مقالات</ أ> <فئة li = "تأثيرات"> جهات الاتصال</ أ> </ ul>

جزء CSS

أولاً ، لنقم بعمل قائمة أفقية من هذه القائمة:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul (list-style: none؛ padding-top: 50px؛) li (موضع: نسبي ؛ عائم: يسار ؛ عرض: 150 بكسل ؛ محاذاة النص: مركز ؛ padding-top: 35px ؛ padding-bottom: 35px ؛ لون: # fff؛ margin-right: 20px؛ border-radius: 5px؛ background: # 161616؛ border-bottom: 1px solid # 333؛ border-left: 1px solid # 000؛ border-right: 1px solid # 333؛ border-top: 1 بكسل ثابت # 000 ؛ المؤشر: المؤشر ؛)

الآن دعنا نضيف بعض التأثيرات:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.effects: after، .effects: before (-moz-transfer: width 0.5s easy 0s؛ height: 0px؛ width: 0px؛ position: due؛ content: ""؛ display: block؛ opacity: 0؛ box-shadow: 0px 0px 5px # 00c6ff؛). التأثيرات: after (background: -moz-linear-gradient (left، # 0ad، # 08b)؛ top: 84px؛ left: 75px؛). -التدرج (يمين ، # 0ad ، # 08b) ؛ أعلى: 84 بكسل ؛ يمين: 75 بكسل ؛). التأثيرات: التمرير: بعد ،. التأثيرات: التمرير: قبل (العرض: 72 بكسل ؛ الارتفاع: 1 بكسل ؛ العتامة: 1 ؛)

انتاج |

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

عرضي

أشرطة التنقل

يعد التنقل السهل الاستخدام أمرًا ضروريًا لأي موقع ويب.

باستخدام CSS ، يمكنك تحويل قوائم HTML المملة إلى أشرطة تنقل لطيفة.

شريط التنقل = قائمة الروابط

يحتاج شريط التنقل إلى HTML قياسي كقاعدة.

في أمثلةنا ، سننشئ شريط تنقل من قائمة HTML قياسية.

شريط التنقل هو في الأساس قائمة بالارتباطات ، لذا استخدم

و
• العناصر منطقية:

  مثال

  
  
  • الصفحة الرئيسية
  
  
  • أخبار
  
  
  • اتصل
  
  
  • عن
  
  
  جربها بنفسك "

  لنقم الآن بإزالة الرموز النقطية والهوامش والحشو من القائمة:

  شرح المثال:

  • نوع نمط القائمة: لا شيء ؛ - يزيل الرصاص. لا يحتاج شريط التنقل إلى قائمة ذات تعداد نقطي
  • تعيين الهامش: 0؛ والحشو: 0 ؛ لإزالة إعدادات المتصفح الافتراضية

  الكود في المثال أعلاه هو الكود القياسي المستخدم في كل من أشرطة التنقل الرأسية والأفقية.

  شريط التنقل العمودي

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

  شرح المثال:

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

  يمكنك أيضًا ضبط العرض

  وإزالة العرض نظرًا لأنها ستأخذ العرض المتاح بالكامل عند عرضها كعناصر كتلة. سينتج عن ذلك نفس النتيجة كما في المثال السابق:

  أمثلة على شريط التنقل العمودي

  قم بإنشاء شريط تنقل عمودي أساسي بلون خلفية رمادية وقم بتغيير لون خلفية الروابط عندما يحرك المستخدم مؤشر الماوس فوقها:

  مثال

  يو (
  نوع نمط القائمة: لا شيء ؛
  الهامش: 0؛
  حشوة: 0؛
  العرض: 200 بكسل ؛
  لون الخلفية: # f1f1f1 ؛
  }

  لي ا (
  العرض محجوب؛
  اللون: # 000 ؛
  الحشو: 8 بكسل 0 8 بكسل 16 بكسل ؛
  زخرفة النص: لا شيء ؛
  }

  / * تغيير لون الارتباط عند التمرير * /
  li a: hover (
  لون الخلفية: # 555 ؛
  اللون الابيض؛
  }

  جربها بنفسك "

  ارتباطات المركز وإضافة حدود

  إضافة محاذاة النص: توسيط لـ

  • أو إلى وسط الارتباط.

    أضف خاصية الحدود

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

      تجميد بالحجم الكامل عمودي Navbar

      إنشاء تنقل جانبي "ثابت" بارتفاع كامل:

      مثال

      يو (
      نوع نمط القائمة: لا شيء ؛
      الهامش: 0؛
      حشوة: 0؛
      العرض: 25٪؛
      لون الخلفية: # f1f1f1 ؛
      الارتفاع: 100٪؛ / * ارتفاع كامل * /
      الموقف: ثابت ؛ / * اجعلها تلتصق ، حتى أثناء التمرير * /
      تجاوز: تلقائي ؛ / * تمكين التمرير إذا كان sidenav يحتوي على الكثير من المحتوى * /
      }

      جربها بنفسك "

      ملحوظة:قد لا يعمل هذا المثال كما هو متوقع على الأجهزة المحمولة.

      شريط التنقل الأفقي

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

      عناصر القائمة المضمنة

      طريقة واحدة لإنشاء شريط تنقل أفقي للإشارة

    • عناصر مضمنة ، بالإضافة إلى الشفرة "القياسية" أعلاه:

      شرح المثال:

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

      عناصر القائمة العائمة

      طريقة أخرى لإنشاء شريط تنقل أفقي لتطفو عليه

    • العناصر ، وكذلك تحديد تنسيق روابط التنقل:

      شرح المثال:

      • تعويم: اليسار؛ - استخدام النقطة العائمة لجعل كتلة من العناصر تنزلق بجانب بعضها البعض
      • العرض محجوب؛ - عرض الروابط ككتلة من العناصر يجعل منطقة الارتباط بأكملها قابلة للنقر (وليس النص فقط) ، وهذا يسمح لنا بتحديد المساحة المتروكة (والارتفاع والعرض والهوامش وما إلى ذلك إذا كنت تريد)
      • الحشو: 8 بكسل ؛ - نظرًا لأن عناصر الكتلة تشغل العرض المتاح بالكامل ، فلا يمكن أن تطفو بجانب بعضها البعض. لذلك ، حدد بعض الإضافات لجعلها تبدو جيدة.
      • لون الخلفية: #dddddd ؛ - إضافة لون خلفية رمادية لكل عنصر

      النصيحة:إضافة لون الخلفية ل

      بدلا من كل عنصر إذا كنت تريد لون خلفية بعرض كامل:

      أمثلة على شريط التنقل الأفقي

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

      مثال

      يو (
      نوع نمط القائمة: لا شيء ؛
      الهامش: 0؛
      حشوة: 0؛
      إخفاء الفائض؛
      لون الخلفية: # 333 ؛
      }

      لي (
      تعويم: اليسار؛
      }

      لي ا (
      العرض محجوب؛
      اللون الابيض؛
      محاذاة النص: مركز ؛
      الحشو: 14 بكسل 16 بكسل ؛
      زخرفة النص: لا شيء ؛
      }

      / * قم بتغيير لون الرابط إلى # 111 (أسود) عند المرور بالماوس * /
      li a: hover (
      لون الخلفية: # 111 ؛
      }

      جربها بنفسك "

      نشط / رابط التنقل الحالي

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

      انقر بزر الماوس الأيمن فوق محاذاة الارتباط

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

      ملاحظة: نتيجة هذا البرنامج التعليمي تعمل بشكل كامل في المتصفحات التي تدعم CSS3.

      ترميز HTML

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

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

      وصف

      فلسفة

      خلف

      نظرية المعرفة

      خلف

      نص...

      اضغط مع الاستمرار على المفتاح الأيسر لرؤية الخلفية

      الميتافيزيقيا

      . . .

      جماليات

      . . .

      أخلاق مهنية

      . . .
      . . .

      تحتوي الشرائح الفرعية والمعلومات على روابط للطبقة السابقة.

      CSS

      تحتوي الحاوية الرئيسية على خاصيتين min-width و max-width ، مما يسمح لنا باستخدام النسب المئوية لضبط العرض في ظروف ganathic ، بحيث لا يصبح العنصر كبيرًا أو صغيرًا جدًا:

      حاوية Cn (العرض: 60٪ ؛ الحد الأدنى للعرض: 300 بكسل ؛ الحد الأقصى للعرض: 820 بكسل ؛ الهامش: 10 بكسل تلقائي 0 تلقائي ؛ محاذاة النص: يسار ؛ الموضع: نسبي ؛)

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

      Cn-container h2 (عائلة الخطوط: "PT Sans Narrow" ، "Arial Narrow" ، Arial ، sans-serif ؛ متغير الخط: small-caps ؛ وزن الخط: 700 ؛ اللون: #fff ؛ الموضع: مطلق ؛ z -الفهرس: 1000 ؛ ظل النص: 0 0 1 بكسل rgba (255255255.0.8) ، 1 بكسل 1 بكسل 1 بكسل rgba (0،0،0،0.2) ؛ حجم الخط: 80 بكسل ؛ ارتفاع الخط: 80 بكسل ؛ الجزء العلوي: 0 بكسل ؛ اليمين : 200 بكسل ؛ مسافة بيضاء: نوراراب ؛ عتامة: 0 ؛ -مجموعة ويب انتقالية: كل 0.3 ثانية خطية 0.4 ثانية ؛ -موز-انتقالي: كل 0.3 ثانية خطية 0.4 ثانية ؛ -o-انتقالية: كل 0.3 ثانية خطية 0.4 ثانية ؛ - انتقال ms: كل 0.3s خطي 0.4s ؛ الانتقال: كل 0.3s خطي 0.4s ؛) .cn-container .cn-slide: target h2 (right: 0px؛ opacity: 1؛)

      يتم أيضًا وضع الشرائح بشكل مطلق. يتم تعيين التعتيم الأولي للشرائح على 0. ولا يتم عرضها إلا عندما تكون هي الهدف:

      شريحة Cn (محاذاة النص: المركز ؛ الموضع: مطلق ؛ اليسار: -100٪ ؛ المساحة العلوية: 80 بكسل ؛ الهامش: 0 5٪ ؛ العرض: 90٪ ؛ التعتيم: 0 ؛ -webkit-transfer: اليسار 0.4 ثانية خطي ، عتامة 0.4 ثانية خطي ؛ -موز-انتقالي: يسار 0.4 ثانية خطي ، عتامة 0.4 ثانية خطي ؛ -أو-انتقال: يسار 0.4 ثانية خطي ، عتامة 0.4 ثانية خطي ؛ -ms-انتقالات: يسار 0.4 ثانية خطي ، عتامة 0.4 ثانية خطي ؛ الانتقال: خطي لليسار 0.4 ثانية ، عتامة 0.4 ثانية خطي ؛). شريحة cn: الهدف (يسار: 0 بكسل ؛ عتامة: 1 ؛)

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

      الآن دعونا نلقي نظرة على عناصر الارتباط. سيكون لديهم صورة خلفية واحدة ، والتي سيتم إعادة تعريفها لاحقًا لكل عنصر. الملف الافتراضي هو 1.jpg. عند تحريك مؤشر الماوس فوق العنصر ، سيتغير لون ظل النص والكتلة نفسها:

      Cn-slide nav a (text-align: left؛ display: block؛ font-family: "PT Sans Narrow"، "Arial Narrow"، Arial، sans-serif؛ font-variant: small-caps؛ font-weight: 700 ؛ الحد: 8 بكسل صلب #fff ؛ الحشو: 2٪ ؛ حجم الخط: 66 بكسل ؛ تباعد الأحرف: 7 بكسل ؛ ظل النص: 0 بكسل 0 بكسل 10 بكسل rgba (255،255،255،0.9) ؛ اللون: rgba (255،255،255،0.1) ؛ سطر- الارتفاع: 66 بكسل ؛ الهامش: 0 0 10 بكسل 0 ؛ المخطط التفصيلي: لا شيء ؛ مربع الظل: 1 بكسل 1 بكسل 3 بكسل rgba (0،0،0،0.1) ؛ الخلفية: #fff url (../ images / 1.jpg) no- مركز التكرار ؛ -حجم خلفية -webkit: 100٪ ؛ -moz-background-size: 100٪ ؛ -o-background-size: 100٪ ؛ حجم الخلفية: 100٪ ؛ مشبك الخلفية: صندوق الحشو ؛ - webkit-transfer: كل 0.3s يسهل الدخول للخارج ؛ -moz-transfer: كل 0.3 ثانية يسهل الدخول للخارج ؛ -o-Transition: كل 0.3 ثانية يسهل الدخول للخارج ؛ -ms-الإنتقال: كل 0.3 ثانية سهل -in-out ؛ الانتقال: كل 0.3 ثانية easy-in-out ؛) .cn-slide nav a: hover (box-shadow: 1px 3px 7px rgba (0،0،0،0.25) ؛ ظل النص: 1 بكسل 1 بكسل 1 بكسل rgba (0،0،0،0.1) ؛ اللون: rgba (255،255،255،0.9) ؛)

      Cn-slide-sub nav a (العرض: 42٪ ؛ العرض: كتلة مضمنة ؛ حجم الخط: 40 بكسل ؛)

      لإنشاء فجوة صغيرة بين العناصر ، قم بتعيين الهامش الأيمن للأحفاد الفردية:

      Cn-slide-sub nav أ: nth-child (فردي) (margin-right: 5px؛)

      شريحة المعلومات هي نقطة نهاية الانتقالات:

      Cn-content (background: # 80B8CE url (../ images / 1.jpg) مركز مركز عدم تكرار ؛ -webkit-background-size: cover ؛ -moz-background-size: cover ؛ -o-background-size: cover؛ background-size: cover؛ text-align: left؛ padding: 20px 20px 5px؛ box-shadow: 1px 1px 3px rgba (0،0،0،0.1)؛ border: 8px solid #fff؛ margin-top: 5px ؛ المؤشر: المؤشر ؛)

      تتوافق كل منطقة محتوى مع كتلة ارتباط. سيتم تثبيت صورة الخلفية لاحقًا:

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

      Cn-content: active p (عتامة: 0 ؛) .cn-content p (ارتفاع السطر: 24 بكسل ؛ ظل النص: 1 بكسل 1 بكسل 1 بكسل rgba (255255255.0.9) ؛ اللون: rgba (103،59،77،0.9) ؛ الحشو: 15 بكسل 20 بكسل ؛ الهامش السفلي: 10 بكسل ؛ الخلفية: rgba (255،255،255،0.96) ؛ نمط الخط: مائل ؛ أعلى الحدود: 7 بكسل صلب rgba (103،59،77،0.6) ؛ -webkit- الانتقال: العتامة 0.3 ثانية خطي ؛ -موز-انتقالي: عتامة 0.3 ثانية خطي ؛ -o-انتقالي: عتامة 0.3 ثانية خطي ؛ -ms-انتقالي: عتامة 0.3 ثانية خطي ؛ الانتقال: عتامة 0.3 ثانية خطي ؛ -webkit-touch-callout: لا شيء ؛ -webkit-user-select: لا شيء ؛ -khtml-user-select: none ؛ -moz-user-select: none ؛ -ms-user-select: none ؛ user-select: none ؛)

      ينزلق سهم العودة إلى اليسار. في البداية يكون موضعه -100 بكسل ، وعندما يتم تنشيط الشريحة ، فإنها تنزلق إلى موضع 3 بكسل:

      Cn-back (مخطط تفصيلي: بلا ؛ مسافة بادئة نصية: -9000 بكسل ؛ عرض: 49 بكسل ؛ ارتفاع: 42 بكسل ؛ الخلفية: عنوان url شفاف (../ images / arrow.png) مركز مركز بدون تكرار ؛ موضع: مطلق ؛ أعلى: 22 بكسل ؛ اليسار: -100 بكسل ؛ المؤشر: المؤشر ؛ التعتيم: 0 ؛ -مجموعة الويب-الانتقال: كل 0.4 ثانية يسهل إدخالها وإخراجها 0.5 ثانية ؛ -موز-انتقال: كل 0.4 ثانية يسهل إدخالها وإخراجها 0.5 ثانية ؛ -o-انتقالي : كل ​​0.4 ثانية يسهل إدخالها وإخراجها 0.5 ثانية ؛-مللي ثانية: انتقال كل 0.4 ثانية 0.5 ثانية ؛ انتقال: كل 0.4 ثانية يسهل إدخالها وإخراجها 0.5 ثانية ؛) .cn-slide: target .cn - الظهر (يسار: 3 بكسل ؛ عتامة: 1 ؛)

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

      / * Highlights * / .cn-slide nav a (background-image: url (../ images / 1.jpg)؛) .cn-slide nav a (background-image: url (../ images / 2. jpg) ) ؛) .cn-slide nav a (background-image: url (../ images / 3.jpg)؛) / * العناصر والعناصر الفرعية للشريحة 1 * / .cn-slide nav a، # slide-1 - 1 .cn-content (background-image: url (../ images / 4.jpg) ؛) .cn-slide nav a، # slide-1-2 .cn-content (background-image: url (.. / images / 5.jpg)؛) .cn-slide nav a، # slide-1-3 .cn-content (background-image: url (../ images / 6.jpg)؛) .cn-slide nav a ، # slide-1-4 .cn-content (background-image: url (../ images / 7.jpg)؛) / * البنود والجمل الفرعية للشريحة 2 * / .cn-slide nav a، # slide- 2- 1 .cn-content (background-image: url (../ images / 8.jpg)؛) .cn-slide nav a، # slide-2-2 .cn-content (background-image: url (. ./ images / 9.jpg) ؛) .cn-slide nav a، # slide-2-3 .cn-content (background-image: url (../ images / 10.jpg)؛) .cn-slide التنقل a، # slide-2-4 .cn-content (background-image: url (../ images / 11.jpg)؛) / * البنود والجمل الفرعية للشريحة 3 * / .cn-s lide nav a ، # slide-3-1 .cn-content (صورة الخلفية: url (../ images / 12.jpg) ؛ ) .cn-slide nav a، # slide-3-2 .cn-content (background-image: url (../ images / 13.jpg)؛) .cn-slide nav a، # slide-3-3. cn-content (background-image: url (../ images / 14.jpg) ؛) .cn-slide nav a، # slide-3-4 .cn-content (background-image: url (../ images / 15.jpg) ؛)

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

      media screen and (max-width: 1060px) (.cn-slide-sub nav a (font-size: 28px؛))media screen and (max-width: 900px) (.cn-container h2 (font-size : 48px؛ line-height: 95px؛) .cn-slide nav a (font-size: 38px؛) .cn-slide-sub nav a (width: auto؛ font-size: 36px؛ display: block؛) .cn -slide-sub nav a: nth-child (فردي) (margin-right: 0px؛))